Figma как обрезать фигуру

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

Методы обрезки фигур в Figma: обзор подходов

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

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

Булевы операции, в свою очередь, позволяют комбинировать фигуры математически: объединять, вычитать, пересекать. Они особенно полезны при создании сложных векторных форм, логотипов или UI-элементов. Операция «Subtract» позволяет буквально «вырезать» одну фигуру из другой, что и даёт эффект обрезки.

Выбор между этими двумя методами зависит от задачи:

• Нужна динамическая маска для изображения? Используйте Create Mask.
• Создаёте логотип или значок? Примените Boolean Operations.
• Работаете с текстурой или видео? Только маскирование.

Когда использовать маски, а когда — булевы операции?

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

Маскирование как основной способ обрезки

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

1. Добавить изображение или фигуру, которую нужно обрезать.
2. Нарисовать поверх неё фигуру, которая будет служить маской (например, круг).
3. Выделить оба объекта (удерживайте Shift или используйте рамку выделения).
4. Нажать Ctrl/Cmd + 7 или выбрать в верхнем меню Create Mask.

После этого нижний слой станет видимым только в пределах верхнего. Если вы измените форму маски, содержимое автоматически адаптируется. Это особенно удобно при A/B-тестировании форм аватаров: квадратные, круглые, овальные — всё можно быстро переключать.

Пошаговый пример: обрезка фото под круг

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

• Импортируйте изображение в Figma (перетащите файл или вставьте ссылку).
• Инструментом Oval (O) нарисуйте круг нужного размера.
• Разместите круг точно поверх фото.
• Выделите оба объекта — сначала изображение, затем круг (порядок важен: маска должна быть сверху).
• Нажмите Cmd + 7 (Mac) или Ctrl + 7 (Windows).

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

Работа с несколькими слоями и группами

Figma позволяет использовать маски для целых групп объектов. Это полезно, например, при создании карточки с фоновым изображением, текстом и иконками, где нужно закруглить все углы. Просто сгруппируйте все элементы (Ctrl/Cmd + G), нарисуйте поверх форму маски и примените Create Mask.

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

Булевые операции для точного контроля формы

Если маскирование — это «скрытие», то булевы операции — это «формообразование». Они позволяют создавать новые векторные фигуры путём комбинации существующих. В Figma доступны четыре основные операции:

• Union — объединение фигур.
• Subtract — вычитание одной фигуры из другой.
• Intersect — оставление только пересекающейся области.
• Exclude — исключение пересечения (симметричная разность).

Именно операция Subtract наиболее близка к понятию «обрезка». Представьте, что у вас есть прямоугольник, и вы хотите вырезать из него круглый вырез. Нарисуйте круг поверх прямоугольника, выделите оба, выберите Subtract — и получите новую фигуру с отверстием.

Как выполнить вычитание фигуры

Шаги для использования Subtract:

1. Нарисуйте базовую фигуру (например, прямоугольник).
2. Поверх неё добавьте фигуру-вырез (круг, звезда и т.п.).
3. Выделите оба объекта (важно: сначала — вычитаемое, потом — основа).
4. На панели инструментов нажмите кнопку Subtract или используйте контекстное меню.

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

Сочетание операций для сложных форм

Реальные проекты редко ограничиваются одной операцией. Часто требуется комбинировать несколько действий. Например, вы создаёте иконку «профиль»: круг с вырезанным глазом и ртом. Порядок действий:

• Создайте большой круг (голова).
• Добавьте два маленьких круга (глаза) и объедините их через Union.
• Вычтите глаза из головы: Subtract.
• Добавьте овал для рта, вычтите его аналогично.

Такой подход позволяет строить сложные иконки, логотипы и UI-компоненты с минимальным количеством слоёв.

Советы по эффективной работе с обрезкой

Чтобы работа с обрезкой в Figma была максимально эффективной, следуйте этим практикам:

• Используйте именованные слои. Переименовывайте маски и фигуры (например, «Photo Mask», «Cutout Circle»), чтобы не запутаться в большом файле.
• Работайте с режимом Outline (Ctrl + ). Он помогает видеть структуру слоёв и проверять, правильно ли применена маска.
• Сохраняйте оригиналы. Перед применением булевых операций продублируйте слои (Ctrl/Cmd + D) — это защитит от ошибок.
• Комбинируйте маски и операции. Например, используйте маску для изображения, а булевы операции — для иконок вокруг него.

Также важно понимать ограничения:

• Маски не поддерживаются при экспорте SVG в некоторых случаях (если маска — текст).
• Булевы операции не работают с растровыми изображениями — только с векторами.
• Вложенные маски (маска внутри маски) не поддерживаются.

Чек-лист: проверка перед публикацией

Перед тем как отправить макет команде разработчиков, убедитесь:

• Все маски корректно отображаются на разных устройствах.
• Формы с булевыми операциями экспортируются без артефактов.
• Слои организованы логично и подписаны.
• Не осталось случайных невидимых масок или лишних фигур.

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

Алексей отмечает, что лучшие практики включают использование компонентов с масками. Например, создать компонент «Avatar» с маской-кругом, а в инстансах просто менять изображение. Это обеспечивает согласованность и ускоряет работу.

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

Заключение

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

• Для обрезки изображений используйте маскирование (Cmd/Ctrl + 7).
• Для создания сложных форм применяйте булевы операции, особенно Subtract.
• Маски — неразрушающие, булевы операции — изменяют векторный путь.
• Всегда проверяйте порядок слоёв: маска должна быть сверху.
• Сохраняйте оригиналы перед применением операций.