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

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

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

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

Основной метод: маскирование

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

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

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

Пошагово: как обрезать картинку в круг

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

1. Создайте новый файл или откройте существующий проект. Убедитесь, что у вас есть свободное рабочее пространство для размещения нового элемента.
2. Выберите инструмент «Эллипс» (E). Нажмите E на клавиатуре или выберите его в верхнем меню. Зажмите Shift и перетащите курсор, чтобы нарисовать идеальный круг.
3. Настройте размер круга. В правой панели Inspector укажите нужные значения ширины и высоты. Например, 100×100 px для стандартного аватара.
4. Вставьте изображение. Перетащите файл из проводника или используйте команду «File → Place Image». Изображение появится поверх круга.
5. Переместите изображение внутрь круга. Выделите оба слоя (круг и картинку), щёлкните правой кнопкой и выберите «Group Selection» (или Ctrl+G). Теперь картинка находится в одной группе с фигурой.
6. Примените маску. Снова щёлкните правой кнопкой мыши по группе и выберите «Use as Mask». Круг станет маской, а изображение — её содержимым.
7. Отрегулируйте положение изображения. Внутри группы вы можете двигать картинку, чтобы нужная часть оказалась в центре круга.

Как проверить, что маска работает

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

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

Дополнительные настройки и эффекты

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

Один из самых востребованных эффектов — обводка. Чтобы добавить рамку вокруг круглого аватара, создайте ещё один эллипс чуть большего размера и поместите его под маскированную группу. Настройте цвет и толщину обводки в панели Inspector. Альтернативно, вы можете использовать эффект «Stroke» прямо на маске, но учтите, что он будет обрезаться вместе с содержимым.

Тени и размытие также можно применять к маскированным группам. Добавьте эффект «Drop Shadow» в разделе «Effects» — тень будет соответствовать форме круга. Это создаёт ощущение глубины и помогает элементу выделиться на фоне.

Использование компонентов

Если вы часто используете круглые аватары, создайте из них компонент. Выделите готовую маскированную группу и нажмите «Create Component» (Ctrl+Alt+K). Теперь вы можете вставлять этот компонент в другие фреймы и заменять изображение через свойства инстанса.

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

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

Первая ошибка — попытка использовать растровое изображение в качестве маски. Figma не поддерживает растровые маски, поэтому, если вы перетащите PNG-файл и попробуете применить к нему «Use as Mask», ничего не произойдёт. Решение: всегда используйте векторные фигуры (эллипс, прямоугольник, путь) в качестве маски.

Вторая распространённая ошибка — неправильный порядок слоёв. Маска должна быть выше по стеку, чем содержимое. Если картинка находится выше круга, маскирование не сработает. Используйте команды «Bring to Front» или «Send to Back» для корректировки порядка.

Проблемы с экспортами

Иногда после экспорта круглая картинка оказывается квадратной. Это происходит, если вы экспортируете не саму маскированную группу, а весь фрейм. Решение: выделите только группу с маской и используйте экспорт именно этого слоя. Также убедитесь, что в настройках экспорта выбран правильный формат (например, PNG с прозрачным фоном).

Советы по работе с аватарами и иконками

Круглые изображения чаще всего используются для аватаров пользователей. Чтобы они выглядели профессионально, соблюдайте несколько простых правил.

Во-первых, используйте качественные изображения. Даже при маскировании низкокачественная фотография будет выглядеть плохо. Оптимальное разрешение — не менее чем в 2–3 раза больше, чем отображаемый размер. Например, для аватара 100×100 px используйте изображение минимум 200×200 px.

Во-вторых, продумайте поведение аватара при разных состояниях. Создайте компонент с вариантами: онлайн, оффлайн, в режиме «не беспокоить». Это можно сделать через свойства компонента в Figma.

Экспорт результата

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

Выделите маскированную группу, перейдите в правую панель и найдите раздел «Export». Нажмите «+» и выберите нужные параметры:

• Формат: PNG (с прозрачностью) или JPG (если фон не важен).
• Размер: 1x, 2x или 3x для адаптации под разные экраны.
• Область: «Selection» — чтобы экспортировать только нужный элемент.

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

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

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

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

Заключение

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

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