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

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

Figma давно стала одной из ключевых платформ для UI/UX-дизайна, прототипирования и совместной работы над проектами. Её популярность обусловлена простотой интерфейса, мощными инструментами и высокой скоростью выполнения задач. Одной из частых потребностей дизайнеров является обрезка изображений под определённую форму — чаще всего требуется круглая маска. Такой приём используется для аватарок, иконок профиля, миниатюр товаров и других элементов интерфейса.
Круглая форма изображения выглядит аккуратно, современно и визуально привлекает внимание. В отличие от прямоугольных или угловатых изображений, круги воспринимаются как более дружелюбные и органичные. Особенно это важно в социальных приложениях, где важна человеческая составляющая. Однако новички часто сталкиваются с трудностями: не знают, как правильно применить маску, теряются между различными инструментами или допускают ошибки масштабирования.

Основной способ: как сделать фото в круге через маску

Самый эффективный и профессиональный способ — использование маски на основе векторного слоя. Этот метод позволяет сохранить исходное изображение без потерь и быстро изменять форму при необходимости.

1. Создайте новый фрейм или выберите существующий, в который будете добавлять изображение.
2. Инструментом Ellipse (O) нарисуйте идеальный круг. Удерживайте клавишу Shift, чтобы получить правильную форму без искажений.
3. Выделите и круг, и фрейм, затем нажмите правой кнопкой мыши и выберите Create Mask или используйте сочетание Ctrl+Alt+M (Cmd+Option+M на Mac).
4. Перетащите изображение внутрь фрейма. Оно автоматически будет обрезано по форме круга.

Если вы работаете с аватарками, рекомендуется задать точные размеры круга — например, 40×40 пикселей для компактных интерфейсов или 80×80 для карточек пользователей. Это обеспечит единообразие в макете.

Как проверить корректность маски

После создания маски важно убедиться, что она работает как ожидается:

• Убедитесь, что маска — это векторный объект (не растровое изображение).
• Проверьте, что маска находится на том же уровне, что и содержимое, и не вложена внутрь другого фрейма случайно.
• Попробуйте изменить положение изображения внутри фрейма — оно должно перемещаться, но не выходить за пределы круга.

Почему использовать маски, а не обрезку

Некоторые пользователи пытаются заранее обрезать изображение в графическом редакторе, загрузить уже круглое фото и вставить его в Figma. Такой подход имеет несколько серьёзных недостатков.
Во-первых, если изображение уже обрезано, вы теряете гибкость. При изменении дизайна — например, увеличении размера аватарки — может потребоваться другая композиция. Если голова пользователя была обрезана по краю, при масштабировании получится неловкий результат.
Во-вторых, маски в Figma работают на уровне слоёв, а не модифицируют исходный файл. Это значит, что одно и то же изображение можно использовать в разных формах: круг, овал, скруглённый прямоугольник — без необходимости хранить множество версий.

Преимущества масок перед предварительной обрезкой

Ошибки, которые допускают новички

Даже простая операция может вызвать проблемы, если не соблюдать базовые правила работы с масками в Figma.
Первая распространённая ошибка — попытка использовать группу (Group) вместо фрейма. Маски в Figma работают только внутри фреймов. Если вы сгруппируете круг и изображение, функция Create Mask будет недоступна.
Вторая ошибка — неправильный порядок слоёв. Маска должна быть нижним элементом в стеке фрейма. Если изображение находится под кругом, маска не сработает. Правильно: круг (внизу), изображение (сверху).

Третья ошибка — использование растрового изображения как маски. Figma не позволяет использовать PNG или JPG в качестве маски. Только векторные фигуры: прямоугольники, эллипсы, линии, Pen-пути.

Как исправить некорректную маску

Если маска не работает:

• Убедитесь, что вы работаете во фрейме, а не в группе.
• Проверьте порядок слоёв: маска должна быть ниже контента.
• Удалите маску (выделите фрейм → кликните по значку маски в правой панели → Remove Mask) и создайте заново.
• Попробуйте пересоздать круг с помощью Ellipse (O), удерживая Shift.

Дополнительные техники создания круглых изображений

Помимо классической маски, есть альтернативные способы, которые полезны в специфических случаях.
Один из них — использование компонентов с масками. Вы можете создать шаблон аватарки: круглая маска + плейсхолдер изображения. Затем превратить это в компонент и использовать в разных местах макета. При этом каждый экземпляр можно заменять изображением через drag-and-drop.
Другой подход — маскирование через Auto Layout. Если вы создаёте список пользователей, можно поместить несколько круглых аватарок в горизонтальный или вертикальный Auto Layout. Это упрощает выравнивание и адаптацию под разные устройства.

Создание маски через плагины

Figma поддерживает сторонние плагины, которые ускоряют рутинные задачи. Например, плагин Mask to Frame позволяет одним кликом превратить любой объект в маску. Другой — Avatar Generator — создаёт реалистичные аватарки с масками за секунды.

Советы по дизайну круглых аватарок

Круглая форма — это не просто технический приём, а элемент визуальной коммуникации. Чтобы аватарки выглядели профессионально, следуйте этим рекомендациям.
Выбирайте изображения с центрированным лицом. Если человек снят сбоку или далеко, в круге будет видна только часть головы. Идеальное фото — анфас, крупный план, хорошее освещение.
Добавляйте отступы. Не делайте маску вплотную к границам аватарки. Лучше оставить небольшой padding — 2–4 пикселя — особенно если аватарка имеет обводку или тень.

Цвет фона под маской

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

• Добавьте сплошной цветной слой под маской (например, серый или белый).
• Используйте градиенты для эффекта «заглушки».
• В системах с тёмной темой — светлый фон под аватаркой улучшает читаемость.

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

Круглая маска — это не просто эстетический выбор, а функциональный элемент интерфейса. Она помогает направить внимание пользователя на главное — лицо или объект. В условиях перегруженного экрана круг выделяется среди угловатых блоков.
При создании масок важно соблюдать баланс между технической точностью и визуальной гармонией. Изображение должно быть не просто обрезано, а композиционно сбалансировано внутри формы.
Автоматизация процесса через компоненты и стили ускоряет работу команды. Рекомендуется создать библиотеку аватарок с разными размерами, состояниями (активный, неактивный) и вариантами масок (круг, овал, скруглённый квадрат).

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

Заключение

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

• Всегда используйте фрейм и векторный круг для маски.
• Не применяйте группы — маски не работают внутри них.
• Оставляйте возможность редактировать положение изображения после маскирования.
• Создавайте компоненты для повторяющихся элементов, таких как аватарки.
• Проверяйте экспорт — убедитесь, что маска корректно отображается в финальном файле.