Как сделать картинку круглой в фигме

Круглая форма — один из самых распространённых дизайнерских приёмов в интерфейсах. Она используется для аватарок, иконок, кнопок и других элементов, где требуется смягчить визуальное восприятие или выделить объект. Figma, как мощный инструмент веб-дизайна, предоставляет несколько способов сделать картинку круглой. Главное — понимать разницу между обрезкой по маске, применением скругления углов и использованием фигур в качестве маски. Независимо от выбранного метода, важно сохранять редактируемость и качество изображения.

Метод маскирования: самый надёжный подход

Маскирование — это основной способ создания круглых изображений в Figma. Он позволяет «обрезать» картинку по форме другого объекта, не изменяя её пиксельную структуру. Это особенно важно при работе с фотографиями или сложными графическими элементами.

Для начала создайте фигуру-круг. Выберите инструмент Ellipse (O) и удерживая Shift, нарисуйте идеальный круг нужного размера. Затем добавьте изображение: перетащите его из проводника или вставьте через меню File → Place Image. Поместите изображение поверх круга.

Теперь выделите оба объекта: сначала кликните по изображению, затем зажмите Shift и выделите круг. Убедитесь, что круг находится под изображением в порядке слоёв (это можно проверить в правой панели Layers). Затем нажмите комбинацию клавиш Ctrl+Alt+M (Windows) или Cmd+Option+M (Mac). Изображение автоматически примет форму круга.

1. Нарисуйте круг с помощью инструмента Ellipse (O).
2. Добавьте изображение и расположите его поверх круга.
3. Выделите оба объекта (Shift + клик).
4. Примените маску: Ctrl+Alt+M / Cmd+Option+M.

После применения маски вы можете дважды кликнуть по изображению внутри круга, чтобы переместить или отмасштабировать его без потери качества. Это особенно полезно, если нужно точно выделить лицо на аватарке.

Как редактировать замаскированное изображение

После применения маски Figma создаёт группу, где изображение становится дочерним элементом фигуры-маски. Чтобы изменить положение изображения, дважды кликните по нему — вы попадёте внутрь группы. Теперь можно двигать изображение, масштабировать его (удерживая Shift) или поворачивать.

Чтобы выйти из режима редактирования маски, кликните за пределами объекта или нажмите Esc. Если нужно изменить саму форму маски (например, сделать её эллипсом), выделите маску и используйте инструменты трансформации.

Скругление углов: когда можно, а когда нельзя

Ещё один способ придать изображению округлую форму — использовать параметр Corner Radius (радиус скругления). Этот метод работает только с прямоугольными изображениями и требует осторожности.

Когда вы вставляете изображение в Figma, оно становится слоем с фиксированными размерами. В правой панели Inspector вы можете найти ползунок Corner Radius. Перемещая его, вы постепенно скругляете углы изображения. При значении, равном половине меньшей стороны (например, 50px для изображения 100×100), углы станут полностью круглыми.

Однако есть важное ограничение: скругление применяется к границе изображения, но не обрезает содержимое. Это значит, что если изображение выходит за пределы рамки, оно может «выглядывать» за скруглённые углы. Кроме того, при экспорте могут возникнуть артефакты на границах.

Когда использовать скругление

Скругление углов стоит применять в следующих случаях:

• Быстрое прототипирование, когда важна скорость, а не точность.
• Работа с векторными иконками или простыми графическими элементами.
• Создание эффектов «плавного входа» в макет без необходимости использовать маски.

Но если вы готовите макет для разработчиков или делаете презентацию клиента, лучше потратить лишние 10 секунд и использовать маску.

Векторные маски и фигуры: гибкость и контроль

Figma позволяет использовать не только круги, но и любые векторные фигуры в качестве масок. Это открывает широкие возможности для креативного дизайна. Например, можно сделать изображение в форме сердца, капли или даже логотипа.

Для этого нарисуйте нужную фигуру с помощью Pen Tool (P) или выберите готовую из библиотеки. Затем поместите изображение сверху и примените маску тем же способом: Ctrl+Alt+M. Figma обрежет изображение строго по контуру векторной формы.

Особенно полезна эта функция при создании кастомных аватаров, промо-баннеров или анимированных компонентов. Также можно комбинировать несколько масок в одной группе, создавая сложные композиции.

Создание повторяющихся круглых аватарок через Components

Если вы часто используете круглые изображения (например, аватарки пользователей), имеет смысл создать компонент. Сделайте один замаскированный круг, преобразуйте его в Component (через правую панель), а затем используйте как шаблон.

Для каждого нового экземпляра просто дважды кликните по изображению и замените его — форма и маска останутся неизменными. Это экономит время и обеспечивает единообразие в проекте.

Распространённые ошибки и как их избежать

Новички в Figma часто сталкиваются с типичными проблемами при создании круглых изображений. Разберём самые частые и пути их решения.

Первая ошибка — неправильный порядок слоёв. Если изображение находится под фигурой, маска не сработает. Убедитесь, что изображение выше в стеке слоёв, чем фигура-маска.

Вторая — попытка применить маску к группе, которая уже содержит другие эффекты (теней, размытия). Figma может повести себя непредсказуемо. Лучше сначала создать чистую маску, а потом добавлять эффекты.

Третья — использование низкокачественных изображений. Даже идеально сделанная маска не спасёт размытую или пиксельную картинку. Всегда используйте изображения с разрешением, превышающим целевой размер хотя бы в 1.5 раза.

• Изображение не реагирует на маску: Проверьте порядок слоёв. Изображение должно быть поверх фигуры.
• Границы изображения выглядывают: Используйте маску вместо скругления углов.
• Не получается редактировать положение: Дважды кликните по изображению внутри маски.
• Маска теряется при копировании: Убедитесь, что вы копируете всю группу, а не отдельные слои.

Экспертное мнение

По его словам, многие дизайнеры недооценивают значение правильной иерархии слоёв. Он рекомендует всегда называть слои: например, «Avatar Mask» и «Photo Inside». Это упрощает работу в команде и снижает количество ошибок при внесении правок.

Также Дмитрий отмечает рост использования плагинов для автоматизации. Например, плагин «Image Circle» за одну кнопку создаёт круглую маску нужного размера. Однако он предупреждает: «Плагины — это удобно, но сначала научитесь делать всё вручную. Только так вы поймёте, как работает система.»

Вопросы и ответы

Заключение

Создание круглой картинки в Figma — простая, но важная операция, от которой зависит качество всего макета. Наиболее надёжный и профессиональный способ — использование векторной маски. Он обеспечивает максимальную гибкость, чёткие границы и совместимость с командной работой.

• Предпочтительный метод — маскирование через Ctrl+Alt+M.
• Избегайте скругления углов для финальных макетов.
• Используйте Components для повторяющихся элементов.
• Контролируйте порядок слоёв и качество изображений.
• Тестируйте экспорт, чтобы избежать визуальных артефактов.