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

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

Создание круговой маски: пошаговая инструкция

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

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

1. Импортируйте изображение в Figma с помощью перетаскивания или через меню File → Place Image.
2. Выберите инструмент Ellipse (E) и нарисуйте круг нужного размера поверх изображения.
3. Выделите сначала изображение, затем зажмите Shift и выберите круг. Порядок важен: последним должен быть выделен круг.
4. Нажмите правой кнопкой мыши и выберите «Create Mask» (или используйте сочетание Ctrl+Alt+M / Cmd+Option+M).

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

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

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

Если нужно изменить размер самого круга, выйдите из режима редактирования маски (нажмите Esc или кликните за пределами) и выберите маску. Затем отредактируйте её габариты с помощью рамки или в панели справа. Изображение автоматически адаптируется под новые пропорции.

Альтернативные способы вставить фото в круг

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

Метод 1: Использование свойства Corner Radius

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

• Импортируйте изображение.
• Убедитесь, что оно имеет квадратные пропорции (например, 100×100 px).
• В правой панели найдите параметр Corner Radius.
• Введите значение, равное половине ширины (например, 50 для изображения 100×100 px).

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

Метод 2: Применение маски через Boolean Operations

Figma поддерживает логические операции (boolean), но они работают только с векторными фигурами. Тем не менее, можно использовать хитрость: объединить изображение с кругом через маску, не используя стандартную команду.

• Создайте круг.
• Добавьте изображение поверх.
• Сгруппируйте их (Ctrl+G).
• Примените маску, как в основном методе.

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

Метод 3: Использование плагинов

Для ускорения работы существуют плагины, автоматизирующие процесс. Например, »Image Circle» или »Mask Me» позволяют одним кликом превращать изображения в круглые.

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

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

Ошибка 1: Изображение не обрезается

Частая причина — неправильный порядок выделения. При создании маски последним должен быть выбран объект-маска (в нашем случае — круг). Если выделить сначала круг, а потом изображение, маска не сработает.

Ошибка 2: Круг получился овальным

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

Ошибка 3: Невозможно редактировать изображение внутри маски

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

Ошибка 4: При экспорте появляется белый фон

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

• Выберите маску.
• В правой панели найдите раздел Export.
• Нажмите «+» и выберите формат PNG.
• Убедитесь, что включена опция «Transparent background».

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

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

Соблюдайте единые размеры

В одном проекте все аватарки или иконки должны иметь одинаковые размеры. Это создаёт порядок и профессиональный вид. Используйте библиотеку компонентов, чтобы стандартизировать размеры: например, 32×32, 48×48, 64×64 px.

Обращайте внимание на центровку

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

Добавляйте эффекты аккуратно

Тени, обводки и градиенты могут улучшить восприятие, но переусердствовать нельзя. Лучше начать с минимализма:

• Тонкая обводка (1–2 px) для отделения от фона.
• Лёгкая тень (X: 0, Y: 2, Blur: 4) для объёма.
• Hover-эффект: увеличение на 5% или смена тени.

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

Мы поговорили с Екатериной Мироновой, старшим UI-дизайнером в международной студии BrandUp, имеющей более 8 лет опыта в работе с Figma.

«За годы практики я заметила, что новички часто усложняют простые задачи. Вместо того чтобы использовать встроенную маску, они ищут сложные обходные пути. Но Figma делает круглые изображения максимально просто. Главное — понять логику масок и порядок слоёв.»

Она также отметила важность системного подхода:

«Я рекомендую создавать символы (Components) для всех типов круглых изображений. Например, “Avatar/S”, “User Photo/M”. Это ускоряет работу и гарантирует единообразие. Плюс вы можете настроить варианты: с онлайн-статусом, с рамкой, с badge-уведомлением.»

Екатерина подчеркнула, что даже такой простой элемент, как круглое фото, влияет на восприятие продукта: «Округлые формы воспринимаются как более дружелюбные. В B2C-интерфейсах они работают лучше, чем угловатые аватарки.»

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

Заключение

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

Главное — понять логику масок: маска всегда должна быть сверху, порядок выделения важен, а редактирование содержимого происходит внутри. Альтернативные методы, такие как corner radius или плагины, полезны в определённых сценариях, но базовый подход остаётся самым универсальным.

• Используйте Create Mask для точного обрезания фото по кругу.
• Соблюдайте порядок слоёв: изображение под кругом, круг выделен последним.
• Для квадратных изображений можно использовать Corner Radius.
• Экспортируйте с прозрачностью, чтобы избежать белых углов.
• Создавайте компоненты для повторного использования и командной работы.