Как в фигме вырезать часть фигуры

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

Как работает вычитание фигур: основные принципы

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

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

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

Какие типы объектов подходят для вычитания

• Простые фигуры: прямоугольники, круги, звёзды, стрелки — все стандартные примитивы Figma поддерживают булевы операции.
• Контурные линии: если вы конвертировали обводку в заполнение (через «Outline stroke»), её тоже можно использовать как вычитаемый элемент.
• Группы и фреймы: группированные объекты можно использовать, но только если они предварительно объединены в один векторный контур.
• Импортированные SVG: при условии, что они загружены как вектор, а не как растровое изображение.

Пошаговая инструкция: как вырезать одну фигуру из другой

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

1. Создайте базовую фигуру — ту, из которой будете вырезать. Например, прямоугольник 200×100 px. Это будет «фон».
2. Нарисуйте вторую фигуру — ту, которая станет «дыркой». Например, круг диаметром 40 px. Разместите его точно там, где хотите сделать вырез.
3. Убедитесь, что вычитаемая фигура находится сверху. В панели слоёв она должна быть выше основной фигуры. Если нет — перетащите её вверх.
4. Выделите обе фигуры одновременно: зажмите Shift и кликните по каждой, или выделите рамкой.
5. На верхней панели найдите иконку «Boolean operations» — это четыре значка: Union, Subtract, Intersect, Exclude. Выберите «Subtract».
6. Результат: из прямоугольника будет вырезан круг. Останется один объект с прозрачным отверстием.

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

Альтернатива: использование Boolean Union для нескольких вырезаний

Если нужно вырезать несколько одинаковых элементов (например, ряд отверстий в панели), сгруппируйте вычитаемые фигуры через «Union» перед применением «Subtract».

• Нарисуйте несколько кругов.
• Выделите их все и нажмите «Union» — они станут одним объектом.
• Поместите объединённую группу поверх основной фигуры.
• Примените «Subtract».

Теперь из основной фигуры будут вырезаны все круги одновременно.

Расширенные методы: маскирование и составные фигуры

Булевы операции — не единственный способ «вырезать» в Figma. Иногда более гибким решением становится маскирование, особенно если вы работаете с изображениями или текстом.

Метод 1: Vector Mask (векторная маска)

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

1. Поместите изображение или текст на холст.
2. Создайте поверх него фигуру — например, звезду.
3. Выделите оба объекта (нижний — тот, который маскируем, верхний — маска).
4. Нажмите правой кнопкой → «Use as Mask» или Ctrl+Alt+M (Cmd+Option+M на Mac).

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

Метод 2: Dynamic Subtraction через Components и Variants

Если вы создаёте дизайн-систему, можно заранее подготовить компоненты с вырезами. Например, кнопка с отверстием для аватара.

• Создайте базовую кнопку.
• Добавьте вырез через «Subtract».
• Превратите в компонент (Create Component).
• Создайте вариант с вырезом и без — через свойства компонента.

Теперь в любом экземпляре можно переключаться между состояниями.

Типичные ошибки и как их избежать

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

Ошибка 1: Ничего не происходит после нажатия «Subtract»

• Причина: объекты не являются векторными. Например, один из них — растровое изображение или текст.
• Решение: преобразуйте текст в кривые (правой кнопкой → «Convert to Outline») или замените изображение на вектор.

Ошибка 2: Вырез получился не там, где ожидалось

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

Ошибка 3: После Subtract нельзя редактировать форму

• Причина: объект стал составным вектором.
• Решение: выберите объект и нажмите «Detach» (иконка разъединения на панели). Это вернёт исходные фигуры, но без автоматического восстановления позиций.

Практические кейсы использования

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

Кейс 1: Создание кнопки с вырезом под аватар

В мобильном приложении нужно сделать кнопку профиля, где вместо иконки — отверстие для изображения пользователя.

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

Кейс 2: Логотип с негативным пространством

Например, логотип типа «FedEx», где между буквами спрятана стрелка. В Figma это делается через точное вычитание.

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

Кейс 3: Интерфейс часов с циферблатом

Циферблат с вырезами под стрелки или отверстия под цифры.

• Создайте круг — основу циферблата.
• Нарисуйте маленькие прямоугольники для отметок.
• Объедините все отметки в один объект (Union).
• Вычтите их из круга — получится стильный циферблат.

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

Также он отмечает, что в современных проектах всё чаще используют комбинированный подход: булевы операции + маски + компоненты. Это даёт максимальную гибкость при минимальных затратах времени.

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

Заключение

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

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