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

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

Что такое булевы операции в Figma и зачем они нужны

Булевы операции — это математические действия над векторными формами, позволяющие объединять, вычитать, пересекать и исключать области. В Figma их реализуют через четыре основных инструмента: «Объединить» (Union), «Вычитание» (Subtract), «Пересечь» (Intersect) и «Исключить» (Exclude). Именно вычитание — ключевой метод для вырезания. Оно работает по принципу: «основная форма минус форма-вырезатель». Результат — новая векторная фигура, которая сохраняет все свойства оригинала: стили, тени, градиенты, анимации.

Представьте, что вам нужно создать кнопку с вырезанным подсветом в виде круга. Если вы просто наложите круг поверх и скроете его — это будет визуальный обман. Слои останутся, файл станет тяжелее, а при экспорте возможны артефакты. Правильный подход — вычесть круг из основной формы. Результат — единый векторный объект, который легко масштабируется, адаптируется под разные экраны и не «ломается» при изменении размеров.

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

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

Вырезание в Figma — это не «удалить», а «создать новую форму». Вот точный алгоритм:

1. Создайте две фигуры: основную (ту, из которой будет вырезаться) и вырезатель (ту, которая определит форму удаления). Например, прямоугольник и круг.
2. Расположите вырезатель так, чтобы он перекрывал ту часть основной фигуры, которую нужно удалить. Убедитесь, что вырезатель полностью лежит на основной форме — частичное перекрытие приведёт к неполной операции.
3. Выберите обе фигуры, удерживая Shift. Порядок выбора важен: сначала — основная форма, потом — вырезатель. Figma использует последний выбранный объект как инструмент вычитания.
4. Нажмите Ctrl + Alt + — (Windows) или Cmd + Option + — (Mac). Альтернативно — откройте панель свойств справа, найдите раздел «Boolean Operations» и выберите «Subtract».
5. Проверьте результат: исходные фигуры исчезнут, на их месте появится одна новая форма с вырезанной областью. Если вы видите два слоя — операция не сработала.

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

Как проверить, что вырезание прошло успешно

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

Работа с несколькими вырезателями

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

1. Создайте три круга, расположив их там, где нужны отверстия.
2. Объедините их в одну группу: выделите все три → Ctrl/Cmd + G.
3. Выделите основную форму и группу вырезателей (в этом порядке).
4. Примените вычитание.

Результат — одна фигура с тремя вырезанными отверстиями. Это значительно эффективнее, чем создавать три отдельных объекта.

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

Даже опытные дизайнеры допускают ошибки, которые портят дизайн-системы и увеличивают время на правки. Вот самые распространённые:

• Неправильный порядок выбора объектов. Как уже упоминалось, Figma вычитает из последнего выбранного. Если вы сначала выбрали вырезатель, а потом основную форму — результат будет обратным. Решение: всегда выбирайте сначала основную форму, потом — вырезатель.
• Использование растровых изображений. Попытка вырезать PNG или JPG через булевы операции не даст результата. Изображения не поддерживают векторные операции. Решение: конвертируйте в вектор через «Convert to Vector» или используйте маски.
• Неудачное расположение. Если вырезатель частично выходит за границы основной формы, Figma вырежет только перекрывающуюся область. Это может привести к непредсказуемым результатам. Решение: всегда используйте «Snap to Grid» и «Smart Guides» для точного позиционирования.
• Забыть объединить перед вырезанием. Если вы хотите вырезать из нескольких фигур сразу — сначала объедините их в один объект (Union), и только потом вычитайте. Иначе вы получите несколько отдельных результатов.

Особенно критична ошибка с «непрозрачными» вырезателями. Некоторые пользователи думают, что если вырезатель имеет прозрачную заливку — он не сработает. Это неверно. Прозрачность не влияет на операцию — важна только геометрия.

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

Вырезание не ограничивается простыми формами. Figma позволяет использовать его с продвинутыми элементами.

Вырезание из градиентов

Если вы хотите создать эффект «вырезанного градиента» — например, логотип с прозрачными отверстиями внутри градиентной заливки — действуйте так:

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

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

Вырезание текста

Текст — особый случай. Он не является векторной формой по умолчанию. Чтобы вырезать из текста или с помощью текста:

1. Выделите текстовый слой.
2. Правой кнопкой → «Convert to Vector».
3. Теперь текст превратился в набор векторных контуров.
4. Выделите его и основную форму, примените вычитание.

Теперь вы можете вырезать форму, например, из круга, используя букву «А» как вырезатель — и получить эффект «вырезанного шрифта». Отлично подходит для логотипов и стилевых элементов.

Вырезание из групп и компонентов

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

Сравнение методов: вычитание, маски и ручное редактирование

Когда использовать вычитание, а когда — маски или ручное редактирование? Ниже — чёткое сравнение.

Экспертное мнение: как дизайнеры используют вырезание в реальных проектах

Анастасия Павлова, главный дизайнер в компании, разрабатывающей B2B-интерфейсы для банков, использует вырезание как основной инструмент для создания иконок и элементов интерфейса. «Мы работаем с 50+ компонентами в одной системе. Каждый элемент должен быть одинаково масштабируемым. Если я использую маску для вырезания угла у кнопки — при изменении размера угол «размазывается». А если я вырезаю его через Boolean — он остаётся чётким даже на 16px. Это критично для мобильных интерфейсов».

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

Другой пример — создание «окон» в интерфейсе: вырезание нескольких кругов из прямоугольника даёт эффект «пикселей» или «отверстий» для визуального интереса. Это особенно популярно в футерах, разделителях и микроанимациях.

Часто задаваемые вопросы

Заключение

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

Практикуйте вычитание не как разовую операцию, а как стандартную часть рабочего процесса. Создавайте шаблоны: например, готовые «вырезатели» для кнопок, иконок, разделителей — и используйте их как компоненты. Это сэкономит вам часы на повторяющиеся задачи.

• Используйте вычитание (Subtract) через Ctrl/Cmd + Alt + — для точного вырезания.
• Всегда выбирайте основную форму первой, вырезатель — второй.
• Преобразуйте текст и изображения в вектор перед вырезанием.
• Избегайте масок для системных компонентов — они не масштабируются как векторы.
• Создавайте шаблоны вырезателей для повторяющихся задач — это ускоряет работу в разы.