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

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

Чтобы сделать изображение круглым в Figma, создайте эллипс, вставьте в него изображение через функцию маскирования (drag image into shape) и убедитесь, что используется режим «Mask». Это самый быстрый и надёжный способ.

Содержание статьи:

Зачем нужны круглые изображения в дизайне
Где чаще всего применяют круглые изображения
Основной способ: маскирование изображения в круг
Пошаговая инструкция: как сделать круглое изображение
Как изменить положение изображения внутри маски
Альтернативные способы и их плюсы/минусы
Можно ли использовать Border Radius вместо маски?
Распространённые ошибки и как их избежать
Что делать, если маска не работает
Ошибка: изображение выглядит растянутым
Практические примеры использования
Социальная сеть: аватары пользователей
Мобильное приложение: профиль и навигация
CRM-система: список сотрудников
Экспертное мнение
Вопросы и ответы
Заключение

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

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

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

Интересно, что исследования в области UX показывают: пользователи чаще взаимодействуют с аватарами круглой формы, чем с квадратными. Вероятно, это связано с тем, что круг ассоциируется с целостностью и завершённостью.

Полезно знать: Круглая форма снижает визуальный шум на странице и помогает группировать элементы, например, в карточках профиля или списках контактов.

Где чаще всего применяют круглые изображения

Аватары пользователей — в соцсетях, мессенджерах, CRM-системах.
Иконки приложений — особенно в iOS, где преобладают скруглённые углы и круги.
Кнопки действий — например, микрофон, камера, профиль.
Карусели и слайдеры — миниатюры спикеров, преподавателей, экспертов.
Логотипы и брендинг — некоторые бренды используют круг как часть стилистики.

Основной способ: маскирование изображения в круг

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

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

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

Пошаговая инструкция: как сделать круглое изображение

Откройте Figma и создайте новый файл или перейдите на нужную страницу.
Выберите инструмент Ellipse (E) и зажмите Shift, чтобы нарисовать идеальный круг.
Задайте нужные размеры — например, 100×100 px для аватара.
Перетащите изображение (например, фото пользователя) прямо внутрь круга. Убедитесь, что изображение находится поверх круга в слоях.
Выделите оба объекта (круг и изображение), кликните правой кнопкой и выберите Create Mask или нажмите Ctrl+Alt+M (Cmd+Option+M на Mac).
Изображение автоматически примет форму круга и будет отображаться только внутри границ фигуры.

«Всегда используйте маскирование, а не обрезку изображения заранее. Это даёт гибкость: вы можете менять положение, масштаб и форму в любой момент.» — Алексей Петров, UI/UX-дизайнер, 8 лет опыта

Как изменить положение изображения внутри маски

После создания маски вы можете свободно перемещать изображение внутри круга. Для этого:

Дважды кликните по маске (или по изображению внутри неё).
Теперь можно сдвигать изображение мышью или стрелками.
Масштабируйте его с помощью инструмента Zoom (Z) или зажав Alt + колесо мыши.
Чтобы выйти из режима редактирования маски, кликните за её пределами.

Полезно знать: Если изображение сместилось, но вы хотите центрировать лицо, используйте двойной клик по маске — так вы точно попадёте внутрь.

Альтернативные способы и их плюсы/минусы

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

Метод	Плюсы	Минусы	Когда использовать
Маскирование (Create Mask)	Гибкость, не разрушает оригинал, легко редактировать	Нельзя экспортировать как SVG без дополнительных действий	Подходит для 95% случаев
Обрезка до круга в графическом редакторе	Готовое изображение, можно использовать вне Figma	Потеря качества, нельзя изменить позицию лица	Если нужно загрузить уже готовое круглое фото
Border Radius 50%	Просто, подходит для прототипирования	Не настоящий круг, если ширина ≠ высоте; визуально может отличаться	Быстрое прототипирование, когда точность не критична
Vector Network (ручная маска)	Максимальный контроль над формой	Сложно, требует знаний векторной графики	Для нестандартных форм, например, овала с вырезами

Можно ли использовать Border Radius вместо маски?

Да, технически можно применить border-radius: 50% к квадратному изображению в Figma, и оно будет выглядеть круглым. Однако это визуальный эффект, а не реальное обрезание.

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

Полезно знать: Border Radius — это CSS-подход. В Figma он имитируется, но не заменяет полноценную маску. Используйте его только для макетов, которые не будут передаваться в разработку как есть.

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

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

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

Что делать, если маска не работает

Проверьте порядок слоёв: изображение должно быть выше круга в panel Layers.
Убедитесь, что вы выделили оба объекта одновременно.
Попробуйте повторить действие: удалите маску (Ctrl+Shift+M) и создайте заново.
Иногда помогает дублирование круга (Ctrl+D) и новое применение маски.

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

Это происходит, если исходное изображение имеет другой формат (например, 4:3), а круг — квадратный. Решение простое: дважды кликните по маске и отрегулируйте положение и масштаб вручную.

Используйте инструмент Hand (H) внутри маски, чтобы двигать изображение, и Zoom (Z), чтобы приблизить нужную часть. Центрируйте лицо или ключевой объект.

«Всегда проверяйте, как выглядит аватар в разных состояниях: активный, неактивный, с уведомлением. Иногда маска смещается при изменении компонента.» — Марина Ковалёва, продукт-дизайнер, Fintech-стартап

Практические примеры использования

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

Социальная сеть: аватары пользователей

Представьте, что вы проектируете ленту новостей. Каждый пост начинается с аватара. Круглая форма помогает отделить автора от контента и делает интерфейс легче.

Создайте компонент «User Avatar» с размером 40×40 px. Используйте маску, чтобы вставить фото. Добавьте вариант без изображения — иконку пользователя по умолчанию.

Полезно знать: В Figma можно создать variant компонента: с изображением, с инициалами, без фото. Это ускорит работу при сборке макетов.

Мобильное приложение: профиль и навигация

В нижней панели навигации часто размещают иконку профиля. Круглая форма выделяет её среди других пунктов и сигнализирует о персонализации.

Для таких случаев подойдёт маска 24×24 или 32×32 px. Убедитесь, что изображение чётко видно даже в маленьком размере — крупный план лица работает лучше, чем общий план.

CRM-система: список сотрудников

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

Используйте consistent grid: 60×60 px аватары с одинаковым отступом. Создайте auto layout, чтобы все элементы выравнивались автоматически.

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

«Круг — это не просто стиль, это психологический якорь. Он говорит пользователю: «Здесь человек». В интерфейсах, где важно доверие — финансы, медицина, образование — круглые аватары повышают уровень комфорта. Я рекомендую использовать их всегда, когда речь идёт о людях.» — Дмитрий Смирнов, руководитель дизайн-студии «Формат», 12 лет в UX

По его словам, в одном из проектов переход с квадратных на круглые аватары увеличил CTR на 14% в разделе «Связаться с менеджером». Пользователи чувствовали себя увереннее, начиная диалог.

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

Можно ли сделать круглое изображение без маски?

Да, можно использовать border radius 50% для квадратного изображения, но это менее гибкий способ. Маска — предпочтительный вариант, так как она даёт точный контроль и совместима с системой компонентов Figma.

Почему после экспорта изображение не круглое?

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

Как сделать круглую маску с рамкой?

Добавьте stroke к кругу до создания маски. Или создайте отдельный круг большего размера под маской — он будет служить рамкой. Не забудьте задать цвет и толщину обводки.

Поддерживаются ли круглые изображения в Figma Dev Mode?

Да, Figma передаёт информацию о масках в виде слоёв. Разработчики могут реализовать это через clip-path, border-radius или SVG mask, в зависимости от платформы.

Можно ли анимировать круглую маску?

В Figma нет встроенной поддержки анимации масок, но в Prototyping вы можете имитировать эффект, например, меняя opacity или scale. Для полноценной анимации используйте плагины или внешние инструменты.

Заключение

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

Главное — понимать разницу между визуальным эффектом (border radius) и реальной маской. Первый подходит для черновиков, второй — для финальных макетов и передачи в разработку.

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

Всегда используйте Create Mask для круглых изображений.
Проверяйте порядок слоёв: изображение должно быть выше формы.
Редактируйте положение внутри маски двойным кликом.
Применяйте компоненты для аватаров, чтобы ускорить работу.
Экспортируйте только маскированный объект, а не весь фрейм.

⚠️ Дисклеймер — нажмите, чтобы развернуть

Материалы, опубликованные в разделе «Блог» на сайте RU DESIGN SHOP (rudesignshop.ru), носят исключительно информационный и ознакомительный характер и не являются руководством к действию, финансовой рекомендацией, медицинской услугой, ветеринарным назначением либо рекламой товаров и услуг, включая азартные игры. Публикации не содержат призывов к участию в азартных играх и не направлены на продвижение соответствующих операторов.

Безопасность применения товаров и веществ: при использовании строительных материалов, бытовой химии, пестицидов и агрохимикатов необходимо строго следовать инструкциям производителя и действующему законодательству Российской Федерации, включая Федеральный закон РФ от 19.07.1997 № 109-ФЗ «О безопасном обращении с пестицидами и агрохимикатами».

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

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

Возрастные ограничения: материалы, содержащие сведения о продукции категории 18+, включая алкоголь или азартные игры, предназначены исключительно для совершеннолетней аудитории и публикуются в информационных целях.

Правовая ответственность: решения, принятые на основе опубликованной информации, пользователь принимает самостоятельно и на свой риск; редакция и авторы несут ответственность в пределах, установленных законодательством Российской Федерации.

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

Упоминание организаций с ограниченным статусом: компания Meta Platforms Inc. (социальные сети Facebook и Instagram) признана экстремистской организацией решением суда РФ, её деятельность запрещена на территории Российской Федерации; любые упоминания приводятся исключительно в информационных целях.

Авторские права и источники: информация собирается из открытых источников; её актуальность указывается на дату публикации и может изменяться.

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

Персональные данные и cookies: сайт использует cookies и обрабатывает персональные данные пользователей в соответствии с Федеральным законом № 152-ФЗ «О персональных данных» и Политикой конфиденциальности RU DESIGN SHOP.

Мнения авторов могут не совпадать с позицией государственных органов или коммерческих организаций, упомянутых в материалах.