Как обрезать по кругу в фигме

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

Метод маскирования: основа обрезки по кругу

Маскирование — это ключевой инструмент в Figma для скрытия части слоя, оставляя видимой только ту область, которая попадает под форму маски. В контексте обрезки по кругу маска представляет собой круглую фигуру или фрейм, через который «просвечивается» изображение. Остальная часть изображения остаётся невидимой, что создаёт эффект обрезки.
Figma поддерживает два типа масок: на основе фреймов и на основе фигур. Фреймы с включённой маской работают как контейнеры: любой объект, помещённый внутрь такого фрейма, будет обрезан по его границам. Если фрейм круглый — содержимое будет обрезано по кругу. Альтернативно, можно использовать отдельную фигуру в качестве маски, применив команду «Use as Mask».
Маски не изменяют исходное изображение. Это немодифицируемый подход, что особенно ценно на этапах прототипирования и правок. Вы можете в любой момент изменить размер маски, переместить изображение внутри неё или заменить его, не теряя качества.

Преимущества маскирования

• Быстрота: достаточно создать круг и вставить изображение внутрь.
• Гибкость: можно свободно двигать изображение внутри маски, не меняя её форму.
• Неснижаемость: оригинальное изображение остаётся в полном объёме, доступным для редактирования.
• Анимация и прототипирование: маски хорошо работают в интерактивных прототипах, где важно сохранить динамику.

Как создать круглый фрейм и применить маску

Создание круглого фрейма — самый интуитивный способ обрезки по кругу. Этот метод идеально подходит для новичков и активно используется в повседневной работе дизайнеров.
Начните с создания нового фрейма. Нажмите F или выберите инструмент Frame в панели слева. Затем зажмите Shift и нарисуйте квадратный фрейм — это обеспечит идеальные пропорции 1:1. После этого перейдите в правую панель свойств и найдите опцию «Corner Radius» (Радиус скругления). Установите значение, равное половине ширины фрейма. Например, для фрейма 100×100 установите радиус 50. Фрейм станет полностью круглым.
Теперь вставьте изображение внутрь фрейма. Просто перетащите его туда или вставьте через буфер обмена. По умолчанию содержимое фрейма будет обрезано по его границам. Убедитесь, что в правой панели активна опция «Mask contents» (Обрезать содержимое). Если она отключена — включите её.

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

После вставки изображения вы можете перемещать его внутри фрейма, чтобы выбрать нужную часть. Это особенно полезно при работе с портретами — вы можете точно выровнять лицо по центру. Для точной настройки используйте стрелки на клавиатуре или задайте координаты X и Y в панели свойств.
Если нужно изменить масштаб изображения, дважды щёлкните по нему — вы перейдёте в режим редактирования содержимого фрейма. Здесь можно увеличить или уменьшить изображение, удерживая Alt и колёсико мыши, или используя инструмент Zoom.

Использование фигур как маски: шаг за шагом

Кроме фреймов, в Figma можно использовать любые фигуры в качестве масок. Этот метод даёт больше контроля, особенно при работе с группами объектов или сложными композициями.
Создайте круг с помощью инструмента Ellipse (O). Опять же, удерживайте Shift, чтобы получить идеальный круг. Поместите изображение поверх круга в слое выше. Выделите оба объекта: сначала изображение, затем круг (порядок важен). Кликните правой кнопкой мыши и выберите «Use as Mask» или нажмите Ctrl+Alt+M (Windows) / Cmd+Option+M (macOS).
После применения маски круг станет невидимым, а изображение будет обрезано по его форме. Обратите внимание: теперь изображение становится «дочерним» по отношению к маске. Его можно перемещать, но нельзя редактировать независимо от маски без отмены операции.

Особенности работы с фигурой-маской

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

Булевы операции вместо масок: плюсы и минусы

Булевы операции — альтернатива маскированию. Они позволяют «вычесть», «объединить» или «пересечь» фигуры. В случае обрезки по кругу используется операция «Intersection» (Пересечение).
Чтобы применить булевы операции, создайте круг и наложите его на изображение. Затем преобразуйте изображение в векторный объект: кликните по нему правой кнопкой и выберите «Detach Image». Теперь вы можете использовать булевы инструменты. Выделите оба объекта и нажмите на значок «Intersect» в верхней панели.
Результат — новый векторный объект, представляющий пересечение круга и изображения. Он уже не является маской, а физически обрезанным элементом.

Работа с растровыми изображениями и пропорциями

При обрезке фотографий по кругу важно учитывать разрешение и соотношение сторон. Низкокачественные изображения могут стать пиксельными после увеличения. Рекомендуется использовать изображения с разрешением не ниже 2x от целевого размера.
Для аватарок 48×48 пикселей используйте изображения минимум 96×96. Это обеспечит чёткость на экранах Retina и при масштабировании. Также стоит помнить: круглая обрезка «съедает» до 21% площади квадратного изображения. Поэтому центральная часть должна быть наиболее информативной.

Автоматическое центрирование лиц

Figma не имеет встроенной функции распознавания лиц, но сторонние плагины, такие как Auto Layout for Avatars или Smart Crop, могут автоматически центрировать лица в круглых масках. Это экономит время при работе с большими наборами данных.

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

Figma предлагает богатый выбор плагинов, ускоряющих рутинные задачи. Для обрезки по кругу особенно полезны:

• Crop to Shape — позволяет мгновенно обрезать изображение по любой фигуре, включая круг.
• Avatar Maker — создаёт готовые компоненты аватарок с поддержкой круглой обрезки и иконок статуса.
• Masker — расширенный инструмент маскирования с предустановленными формами.

Установите плагин через раздел Plugins в меню Figma. После установки вызовите его через правую панель или контекстное меню. Большинство плагинов работают по принципу: выделите изображение и фигуру — нажмите «Apply». Готово.

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

Даже опытные дизайнеры допускают типичные ошибки при обрезке по кругу. Их легко избежать, если знать причины.

• Некруглая форма — возникает при использовании прямоугольника с высоким радиусом вместо идеального круга. Решение: всегда используйте инструмент Ellipse с зажатым Shift.
• Обрезка не работает — часто из-за неправильного порядка слоёв или отключённой опции маски. Убедитесь, что маска выше изображения и включена опция «Mask contents».
• Пиксельная картинка — следствие использования низкокачественного изображения. Всегда проверяйте разрешение перед вставкой.
• Невозможно редактировать изображение — после применения булевых операций. Лучше сначала продублировать слой, чтобы сохранить оригинал.

Чек-лист перед финальным экспортом

1. Проверьте форму: действительно ли она круглая (соотношение 1:1)?
2. Убедитесь, что центр изображения соответствует фокусу (например, лицу).
3. Проверьте качество: нет ли пикселизации при увеличении?
4. Если используется маска — преобразуйте в вектор для корректного экспорта в SVG.
5. Протестируйте в прототипе: правильно ли ведёт себя при взаимодействии?

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

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

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

Заключение

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

• Для быстрой обрезки используйте круглый фрейм с включённой опцией «Mask contents».
• Фигуры-маски дают больше гибкости, но требуют внимания к порядку слоёв.
• Булевы операции подходят для финального экспорта, но снижают редактируемость.
• Плагины ускоряют работу, но требуют тестирования на реальных проектах.
• Всегда проверяйте форму, качество и поведение элемента перед экспортом.