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

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

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

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

Начните с создания идеального круга. Выберите инструмент «Ellipse» (E) и, удерживая клавишу Shift, нарисуйте круг. Это важно — Shift фиксирует пропорции 1:1, предотвращая превращение эллипса в овал.

Далее перейдите к загрузке изображения. Перетащите его из проводника или используйте команду «File → Place Image». Поместите изображение поверх созданного круга. Теперь выделите оба объекта: сначала круг, затем изображение (или наоборот — порядок важен).

Щёлкните правой кнопкой мыши и выберите «Use as Mask» (или нажмите Ctrl+Alt+M). Изображение автоматически обрежется по форме круга. При этом сам круг становится контейнером-маской, а изображение — содержимым.

Если изображение выглядит растянутым или обрезанным не по центру, просто дважды щёлкните по нему внутри маски и отрегулируйте положение. Figma покажет рамку с маркерами — двигайте её до нужного вида.

Пошаговая инструкция

1. Нарисуйте круг с помощью инструмента Ellipse (E), удерживая Shift.
2. Загрузите изображение и разместите его поверх круга.
3. Выделите оба объекта (круг и изображение).
4. Нажмите Ctrl+Alt+M (или кликните ПКМ → Use as Mask).
5. Дважды щёлкните по изображению и отцентрируйте его вручную.

Фреймы vs фигуры: что лучше использовать?

Многие дизайнеры задаются вопросом: что предпочтительнее — использовать обычный фрейм или геометрическую фигуру в качестве маски? Ответ зависит от задачи.

Фреймы (Frames) — это контейнеры, которые могут содержать несколько слоёв. Если вы создаёте карточку пользователя с фото, именем и статусом, удобнее использовать круглый фрейм. Чтобы сделать фрейм круглым, сначала примените к нему свойство маски: в панели правой боковой панели найдите раздел «Mask» и активируйте опцию «Mask contents».

Затем, чтобы фрейм визуально выглядел круглым, задайте ему радиус скругления углов (Corner Radius). Установите значение, равное половине высоты или ширины фрейма. Например, для фрейма 100×100 px установите Corner Radius = 50 px. Это создаст идеальный круг.

Однако у фигур есть преимущество: они легче по весу и проще в управлении. Если вам нужно только одно изображение в круге — лучше использовать фигуру. Фреймы оправданы, когда вы строите сложные компоненты: аватарки с бейджами, иконками онлайн-статуса или тенью.

Профессиональные советы и хитрости

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

Первое правило — используйте качественные изображения с высоким разрешением. Даже если аватар в интерфейсе маленький (например, 40×40 px), исходник должен быть не менее 200×200 px. Это обеспечит чёткость при увеличении или экспорте.

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

Третий лайфхак — использование плагинов. Например, плагин «Circular Crop» позволяет одним кликом обрезать изображение по кругу. Он особенно полезен при массовой обработке аватарок.

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

Как быстро дублировать и обновлять аватарки

• Создайте первый круглый аватар и превратите его в компонент (Component).
• Для новых пользователей используйте Instance — просто замените изображение через правую панель.
• Если базовое изображение изменится, все экземпляры обновятся автоматически.

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

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

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

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

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

Что делать, если изображение «плывёт» при экспорте?

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

Продвинутые техники: автотипизация, компоненты, плагины

Когда вы освоили базу, можно переходить к автоматизации.

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

Компоненты с вариантами позволяют создать систему аватарок: маленькие, средние, большие, с онлайн-статусом, с бейджами. Используйте Boolean Operations, чтобы добавить маленькую иконку в угол маски — например, зелёный кружок для онлайн-статуса.

Плагины значительно ускоряют работу:

• «User Avatar Generator» — создаёт случайные аватары на основе имени.
• «Image Circle Crop» — автоматически обрезает выделенное изображение по кругу.
• «Content Reel» — позволяет быстро переключать изображения в масках для демонстрации.

Также стоит обратить внимание на переменные (Variables), появившиеся в Figma. Вы можете связать изображение в маске с переменной, а затем управлять ими через Prototype или Dev Mode. Это полезно при создании динамических прототипов.

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

Он также отмечает, что многие команды недооценивают важность согласованности: «Если у вас 48×48 px аватарки, все они должны быть одного стиля: одинаковое расстояние до края, единый тип рамки, одинаковый уровень яркости. Figma позволяет это контролировать через компоненты и библиотеки стилей.»

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

Заключение

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

• Всегда используйте маску (Use as Mask), а не скругление углов для изображений.
• Для простых случаев — фигура + маска, для сложных — фрейм с Auto Layout.
• Центрируйте ключевые объекты на изображении перед маскированием.
• Применяйте компоненты и плагины для ускорения работы.
• Экспортируйте с прозрачным фоном, если нужен чистый круг.