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

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

Зачем делать изображения круглыми в дизайне

Круглые изображения — это не просто тренд, а проверенная практика в UX/UI-дизайне. Согласно исследованиям NNGroup, пользователи быстрее распознают и запоминают круглые аватары, чем квадратные или прямоугольные, особенно в социальных интерфейсах. Это связано с тем, что человеческий мозг ассоциирует круг с дружелюбием, безопасностью и целостностью. В мобильных приложениях, таких как Instagram, Telegram или LinkedIn, круглые аватары становятся стандартом — и это не случайно. Они лучше вписываются в компактные интерфейсы, не отвлекают от текста и создают визуальную гармонию с закруглёнными кнопками и карточками. Кроме того, круглые формы легко адаптируются под разные размеры экранов, что критично для responsive-дизайна.

Представьте, что вы создаёте профиль пользователя в приложении. Если аватар будет квадратным с жёсткими углами, он будет «выпирать» из общего стиля, особенно если все остальные элементы — с закруглёнными краями. Круг — это естественный выбор для визуального баланса. И хотя Figma позволяет работать с любыми формами, именно круглые изображения требуют особого подхода, чтобы избежать искажений, обрезания по краям или потери качества.

Способ 1: Использование Clip Content (самый простой)

Этот метод — самый быстрый и рекомендуемый для большинства случаев. Он идеально подходит для новичков и для тех, кто хочет сделать круглую картинку за 5 секунд.

1. Перетащите изображение в рабочую область Figma.
2. Выделите изображение, щёлкнув по нему один раз.
3. В правой панели свойств найдите раздел “Constraints” и затем — опцию “Clip content”.
4. Включите эту опцию, кликнув по переключателю.
5. Теперь, используя маркеры изменения размера, удерживайте клавишу Shift и уменьшайте изображение до круга — Figma автоматически сохранит пропорции.
6. Когда форма станет идеальным кругом, изображение автоматически обрежется по его границам.

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

Способ 2: Маскирование с помощью фигуры круга

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

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

Маскирование особенно полезно, если вы работаете с анимациями, интерактивными прототипами или когда нужно применить фильтры (например, тень или размытие) только к видимой части изображения. В отличие от «Clip content», маска позволяет сохранить изображение как отдельный слой, который можно перетаскивать, масштабировать или применять к нему эффекты, не нарушая маскирующего контура.

Способ 3: Boolean операции (для продвинутых)

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

1. Создайте круг (как в предыдущих способах).
2. Скопируйте ваше изображение и вставьте его как векторный объект (через File → Import или Ctrl+V). *Важно: изображение должно быть в формате PNG с прозрачным фоном.*
3. Выделите изображение и круг.
4. Перейдите в панель “Boolean operations” (в верхней панели инструментов).
5. Выберите “Intersect” (пересечение).

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

Однако будьте осторожны: после применения Boolean-операции вы теряете возможность редактировать исходное изображение. Если вам нужно сохранить его для будущих правок — лучше использовать маскирование или «Clip content».

Частые ошибки и как их избежать

Даже опытные дизайнеры допускают типичные ошибки при работе с круглыми изображениями. Вот основные из них:

• Изображение искажается — это происходит, когда вы тянете за углы без удержания Shift. Всегда удерживайте Shift при изменении размера круга, чтобы сохранить пропорции.
• Круг не обрезает изображение — если вы не включили «Clip content» или не применили маску, изображение просто накладывается поверх фигуры, а не обрезается.
• Низкое качество после экспорта — если вы экспортируете круглую картинку в PNG, убедитесь, что в настройках экспорта указано “Scale: 2x” или “3x” для высокодетализированных устройств.
• Фон виден вокруг круга — если изображение имеет белый фон, он будет виден даже после обрезки. Решение: используйте PNG с прозрачным фоном или добавьте круглый фон-слой под изображение.
• Не работает на группах — если изображение находится в группе, «Clip content» может не примениться. Разгруппируйте элементы, примените маску, затем снова сгруппируйте.

Чтобы избежать проблем, создайте шаблон: сделайте круг 100×100px, поместите в него изображение с разрешением не менее 200×200px, включите «Clip content» — и используйте этот шаблон как базовый элемент для всех аватаров в проекте.

Профессиональные советы от дизайнеров

Вот что говорят эксперты, которые работают с Figma ежедневно:

Также рекомендуется использовать Auto Layout для круглых элементов. Создайте компонент с кругом, внутри которого находится изображение с включённым «Clip content». Затем включите Auto Layout для контейнера — и вы сможете менять размер аватара, и он будет автоматически сохранять форму и пропорции. Это особенно полезно при создании списков пользователей или карточек.

Часто задаваемые вопросы

Заключение

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

Помните: качество круглого изображения начинается не с того, как вы его обрезаете, а с того, какое изображение вы загружаете. Всегда используйте PNG с прозрачным фоном, достаточным разрешением и без артефактов. Создавайте компоненты, используйте Auto Layout и сохраняйте шаблоны в библиотеке — это сэкономит вам часы работы на будущих проектах.

• Используйте «Clip content» для быстрой и безопасной обрезки изображений в круг.
• Для сложных композиций применяйте маскирование — оно сохраняет гибкость редактирования.
• Всегда работайте с PNG-изображениями, а не JPG, чтобы избежать белых краёв.
• Создавайте компоненты с предустановленными масками — это ускорит работу в команде.
• Проверяйте качество на разных масштабах: исходное изображение должно быть в 2–3 раза крупнее итогового круга.