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

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

Основные шаги создания круглого изображения

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

Первый шаг — добавьте изображение на холст. Сделать это можно через перетаскивание файла, использование горячих клавиш (Ctrl+Alt+K / Cmd+Option+K) или импорт из библиотеки. Затем выберите инструмент «Ellipse» (O) и нарисуйте круг поверх изображения. Размер круга определяет финальный размер аватарки или элемента.

Далее необходимо объединить изображение и круг. Выделите оба объекта (удерживая Shift), кликните правой кнопкой мыши и выберите «Create Mask» (или воспользуйтесь сочетанием Ctrl+Alt+M / Cmd+Option+M). Изображение будет обрезано по форме круга. Убедитесь, что маска расположена выше изображения в стеке слоёв — Figma применяет маску только к нижележащему объекту.

Детали применения маски

После создания маски вы можете редактировать как саму маску (например, изменять её форму), так и содержимое под ней. Кликнув дважды по изображению, вы войдёте внутрь маски и сможете перемещать, масштабировать или заменять изображение. Это удобно при настройке центрирования или подборе нужного фрагмента.

Если вы случайно применили маску к неверному объекту, отмените действие (Ctrl+Z / Cmd+Z). Также можно удалить маску, выделив её и нажав «Delete», либо отключить временно, щёлкнув по значку маски в панели свойств. Отключение позволяет просматривать полную картинку без потери настроек.

Точное выравнивание и центрирование маски

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

Используйте встроенные инструменты выравнивания Figma. После создания маски выделите оба объекта (изображение и маску) и примените команду «Align Horizontal Centers» и «Align Vertical Centers» в верхней панели. Это автоматически центрирует изображение по обеим осям.

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

Использование constraints для автоматического центрирования

Figma позволяет задавать правила поведения элементов при изменении размеров — constraints. Применительно к маскам это особенно полезно. Установите constraint маски и изображения как «Center» по обеим осям. Тогда при любом изменении размеров родительского блока изображение останется по центру.

Constraints особенно важны при работе с компонентами, которые могут использоваться в разных размерах. Например, аватарка может быть 40×40 px в одном интерфейсе и 80×80 px в другом. Правильно настроенные constraints гарантируют, что масштаб и позиция изображения будут корректными в обоих случаях.

Работа с компонентами и автоматическими макетами

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

Начните с создания базового компонента. Нарисуйте круг, примените маску, добавьте изображение. Затем преобразуйте весь блок в компонент (выделите и нажмите Ctrl+Alt+K / Cmd+Option+K). Теперь этот компонент можно использовать в других файлах и проектах.

Для большей гибкости добавьте вариации компонента. Например, разные размеры: S (32px), M (48px), L (64px). Используйте свойства компонентов Figma, чтобы создать набор, который можно переключать через панель свойств.

Интеграция с автоматическими макетами

Автоматические макеты (Auto Layout) позволяют строить адаптивные интерфейсы. При добавлении круглых изображений в Auto Layout важно правильно настроить padding и spacing. Например, если аватарки выстроены в строку, задайте между ними отступ 8–12 px.

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

Сохранение пропорций и адаптивность

Один из ключевых аспектов работы с масками — сохранение пропорций изображения. Если изображение имеет формат 4:3, а маска — круг диаметром 50 px, важно, чтобы при масштабировании не было искажений или пустых областей.

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

Если вы работаете с разными типами изображений, создайте шаблон с инструкцией. Например, добавьте текстовый слой: «Загружайте квадратные изображения 1:1 для лучшего отображения». Это поможет другим дизайнерам и разработчикам.

Адаптивные компоненты с распознанными изображениями

Figma поддерживает динамические компоненты, где изображение можно заменять через instance properties. Это особенно полезно при создании карточек пользователей. Вы можете создать мастер-компонент с маской и позволить другим пользователям загружать свои изображения.

Для этого добавьте placeholder-изображение, примените маску, преобразуйте в компонент. Затем в панели свойств активируйте опцию «Allow Instance Swap» для изображения. Теперь при создании экземпляра можно будет заменить изображение одной кнопкой.

Альтернативные подходы к круглым изображениям

Хотя маска — самый надёжный способ, существуют и другие методы создания круглых изображений. Один из них — использование border radius на изображении. В Figma вы можете применить закругления к углам изображения, установив corner radius равный половине высоты (например, для 40×40 px — 20 px).

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

Ещё один вариант — использование плагинов. Например, «Avatar Frame» или «Mask to Circle» автоматизируют создание круглых аватарок. Они особенно полезны при массовой обработке изображений.

Типичные ошибки и как их избежать

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

Другая ошибка — игнорирование разрешения изображений. Низкокачественные фото при увеличении становятся пиксельными. Рекомендуется использовать изображения с разрешением не ниже 2x от целевого размера. Например, для аватарки 48 px — загружайте изображение минимум 96 px.

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

Проблемы с экспортом и совместимостью

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

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

Экспорт и совместимость

Figma позволяет экспортировать маскированные изображения в различных форматах: PNG, JPG, SVG, PDF. Для веба и мобильных приложений рекомендуется использовать PNG с прозрачностью. Это обеспечивает чёткие края и поддержку всех устройств.

При экспорте в 2x и 3x убедитесь, что маска и изображение масштабируются корректно. Иногда при увеличении могут появляться артефакты — проверяйте результат в увеличенном виде (400%).

Если вы передаёте макет разработчикам, укажите, что изображение должно быть обрезано по кругу на уровне кода. В CSS это делается через `border-radius: 50%`, в Android — через `CircleImageView`, в iOS — через `layer.cornerRadius`.

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

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

Заключение

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

• Всегда используйте маску (Create Mask), а не border radius для настоящих круглых изображений.
• Центрируйте изображение по маске с помощью инструментов выравнивания и constraints.
• Применяйте компоненты для переиспользования и поддержки дизайн-системы.
• Экспортируйте в PNG с прозрачностью для максимального качества.
• Учитывайте потребности разработчиков и доступность при проектировании.