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

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

Что такое операция «Вычесть» в Figma?

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

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

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

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

1. Создайте две фигуры: большую (базовую) и меньшую (вырезающую). Например, прямоугольник и круг.
2. Разместите вырезающую фигуру (круг) точно на том месте, где нужно удалить часть базовой (прямоугольника). Используйте инструменты выравнивания (Align) для точности.
3. Выберите сначала базовую фигуру — ту, из которой будет вырезаться. Кликните по ней один раз.
4. Зажмите Shift и кликните по вырезающей фигуре — теперь обе фигуры выделены, но базовая остаётся активной (выделена синей рамкой).
5. Перейдите в панель свойств справа, найдите раздел «Boolean» и нажмите кнопку «Subtract» (иконка: два квадрата, один из которых вырезается из другого).
6. Проверьте результат: вырезанная область исчезла, а оставшаяся часть стала единым объектом. Теперь вы можете изменять её размер, цвет, добавлять тени — всё будет применяться к целому.

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

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

Ошибка 1: Неправильный порядок выбора

Если вы сначала выбрали вырезающую фигуру, а потом базовую, Figma может применить операцию к неверному объекту, или вообще не дать выбрать «Subtract». Решение: всегда выбирайте базовую фигуру первой. Активный объект (выделенный синей рамкой) — тот, из которого вычитают.

Ошибка 2: Вычитание из группы

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

Ошибка 3: Прозрачность и стили теряются

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

Ошибка 4: Неожиданный результат при перекрывающихся фигурах

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

Продвинутые техники: вычитание нескольких фигур, слои и группы

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

Вычитание нескольких фигур одновременно

Чтобы вырезать из базовой фигуры несколько отверстий, объедините вырезающие формы в одну:

1. Выберите все вырезающие фигуры (например, три круга).
2. Нажмите Union — они станут одним объектом.
3. Теперь выберите базовую фигуру, затем — объединённую вырезающую.
4. Примените Subtract.

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

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

Если вы используете компоненты (например, для иконок), вычитание можно применить к экземплярам. Но будьте осторожны: если вы вычтете фигуру из экземпляра, он перестанет быть связанным с основным компонентом. Лучшая практика: создавайте шаблон компонента с уже вырезанными формами, а не изменяйте экземпляры вручную.

Вычитание с использованием масок

Если вам нужно временное вычитание (например, для прототипирования), используйте маскирование (Mask). Выделите базовую фигуру, затем вырезающую, и нажмите Cmd/Ctrl + Alt + M. Это не изменяет вектор, а лишь скрывает часть. Отлично подходит для A/B тестов и демонстраций, но не для финального дизайна.

Вычитание vs. Объединение vs. Пересечение: сравнение операций

Чтобы глубже понять, как работает вычитание, полезно сравнить его с другими булевыми операциями. Каждая из них решает свою задачу.

Помните: все эти операции работают только с векторами. Использование их в сочетании позволяет создавать практически любые формы без ручного рисования. Например, сложный логотип может быть собран из 5–7 простых фигур с помощью 2–3 булевых операций.

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

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

Алексей Петров, UX-дизайнер с 8-летним опытом, рассказывает: «Я проектирую систему иконок для корпоративного приложения. Все иконки должны быть векторными, масштабируемыми и одинаково выглядеть на экранах с разным DPI. Если я буду использовать маски или растровые эффекты — в итоге я получу несогласованность. Вычитание даёт мне гарантию: форма будет одинаковой на iPhone 15 и на 4K-мониторе.»

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

Для сложных задач он применяет скрипты Figma — например, плагин «Boolean Operations Pro», который позволяет выполнять операции над несколькими слоями одновременно. Но даже с плагинами он подчёркивает: «Базовые операции должны быть интуитивны. Если вы не можете сделать вычитание вручную — вы не контролируете свой дизайн».

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

Заключение

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

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