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

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

Основные понятия: маскировка и фигурная обрезка

Figma не имеет прямого инструмента «обрезать по фигуре», как в Photoshop или Illustrator. Вместо этого она использует концепцию маскирования и булевых операций. Маскирование позволяет скрыть часть слоя (изображения, текста, фигуры), оставив видимым только то, что находится под определённой формой. Булевы операции — это способ объединять, вычитать или пересекать фигуры, чтобы создавать новые формы.

Маски в Figma работают по принципу «что сверху, то и маска». Если вы поместите изображение внутрь фигуры, а затем примените маску, будет видна только та часть изображения, которая попадает в границы верхнего слоя. Это особенно полезно при работе с аватарами, карточками продуктов, баннерами и другими элементами, где требуется нетиповая форма.

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

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

Выбор между маской и булевой операцией зависит от типа объекта и цели:

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

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

Как обрезать изображение по фигуре с помощью масок

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

1. Добавьте изображение на холст с помощью инструмента Image (I) или перетащите файл.
2. Нарисуйте фигуру (например, круг, многоугольник или путь), которая будет служить формой обрезки.
3. Переместите изображение так, чтобы нужная часть попадала в область будущей маски.
4. Выделите оба объекта: сначала изображение, потом фигуру (или наоборот — порядок важен).
5. Щёлкните правой кнопкой мыши и выберите Create Mask (или нажмите Ctrl+Alt+M).

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

Работа с текстом и вложенными масками

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

• Напишите текст.
• Преобразуйте его в фигуру (Ctrl+Shift+O).
• Поместите изображение поверх текста.
• Создайте маску, используя текст как форму.

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

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

Создание сложных форм через булевы операции

Булевы операции — мощный инструмент для создания уникальных форм. Они доступны в панели инструментов в верхнем меню при выделении нескольких фигур. Основные операции:

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

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

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

Сочетание масок и булевых операций

На практике дизайнеры часто комбинируют оба метода. Например:

• Создаёте сложную форму с помощью булевых операций.
• Добавляете изображение.
• Используете эту форму как маску для изображения.

Такой подход позволяет добиться высокой детализации и креативности. Например, в дизайн-системе можно создать компонент «профиль с кастомной рамкой», который будет адаптивно отображать фото пользователей в нестандартной форме.

Практические советы и типичные ошибки

Новички часто сталкиваются с проблемами при обрезке по фигуре. Вот самые частые ошибки и как их избежать.

Ошибка 1: Маска не работает

Причина — неправильный порядок слоёв. Маска должна быть сверху в группе. Если изображение выше фигуры, Create Mask будет недоступно или не сработает.

Решение: Перетащите маску вверх в панели Layers или используйте команду «Bring to Front».

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

После создания маски изображение становится «внутренним» слоем. Прямое редактирование невозможно без входа в группу.

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

Ошибка 3: Булевы операции не применяются к изображениям

Figma не позволяет применять Union, Subtract и другие операции к изображениям напрямую. Только к векторным объектам.

Решение: Используйте маски для изображений. Для векторных иконок и форм — булевы операции.

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

• Используйте Auto Layout при создании компонентов с масками — это упрощает масштабирование.
• Называйте слои понятно: например, «Фото + Маска» или «Иконка (вырез)».
• Создавайте компоненты из часто используемых форм — например, «Овальная маска» или «Кнопка с вырезом».
• Экспортируйте маскированные объекты как SVG, если нужна векторная точность.

Автоматизация и полезные плагины

Figma активно развивается за счёт экосистемы плагинов. Некоторые из них значительно упрощают процесс обрезки по фигуре.

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

Также можно использовать Figma API для автоматизации массовой обработки — например, применение одинаковой маски ко всем аватарам в карточках.

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

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

— Екатерина Морозова, старший UX/UI-дизайнер, 10 лет опыта, автор курсов по Figma

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

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

Заключение

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

• Используйте маски для изображений и текста, булевы операции — для векторов.
• Следите за порядком слоёв: маска всегда должна быть сверху.
• Плагины вроде Clipped и Boolr ускоряют работу.
• Маски не портят качество изображения — они лишь управляют видимостью.
• Комбинируйте маски с Auto Layout и компонентами для масштабируемости.