Как сделать вычитание в фигме

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

Что такое вычитание в Figma и зачем оно нужно

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

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

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

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

Чтобы выполнить вычитание, следуйте простому алгоритму. Он работает одинаково на macOS и Windows.

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

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

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

— В панели Layers появляется один слой вместо двух. Он называется «Subtract».
— При выборе объекта вы видите не два отдельных контура, а один сложный путь.
— Если вы дважды кликните по результату, вы попадёте в режим редактирования точек — это подтверждает, что вы работаете с векторным путём.

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

Выделите объекты → щёлкните правой кнопкой мыши → выберите «Subtract» из раздела «Combine». Этот способ удобен, если вы привыкли работать с контекстными меню, а не с панелью свойств.

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

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

• Объекты не выделены вместе. Если вы выделяете только нижний объект, кнопка «Subtract» будет серой. Всегда проверяйте, что оба объекта выбраны.
• Один из объектов — растровый. Вычитание работает только с векторами. Если вы попытаетесь вычесть PNG или JPG — Figma не позволит это сделать. Преобразуйте растровые изображения в векторы с помощью «Vectorize» (если доступно) или перерисуйте их.
• Объекты не перекрываются. Если верхний объект находится рядом, а не наложенный, вычитание не сработает. Переместите его так, чтобы была хотя бы частичная наложенность.
• Неправильный порядок слоёв. Вычитает всегда верхний объект. Если вы хотите вырезать из большого круга маленький — круг должен быть сверху. Если наоборот — вы получите объединение, а не вычитание.
• Использование групп вместо объединения. Группировка (Ctrl + G) не удаляет части — она просто объединяет слои в папку. Вычитание — это именно операция с путями, а не с группами.

Продвинутые техники: вычитание нескольких объектов и сложные формы

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

Пример: создание иконки «закрыть» с двойным вычитанием

1. Нарисуйте квадрат — это основа.
2. Добавьте два прямоугольника под углом 45° — они будут образовывать крест.
3. Выделите все три объекта.
4. Нажмите «Subtract».

Результат — квадрат с вырезанным крестом внутри. Вы можете повторить этот процесс для создания анимационных эффектов, например, для кнопки «свернуть» или «закрыть».

Каскадное вычитание: поэтапное удаление

Если вам нужно вырезать несколько частей по очереди, делайте это последовательно:

— Вычтите первую форму → переименуйте результат (например, «Квадрат-вырез1»).
— Добавьте новую форму, наложите её поверх результата.
— Выделите оба и снова примените «Subtract».

Это позволяет контролировать каждый этап и легко возвращаться к промежуточным версиям.

Таблица: режимы объединения в Figma

Вычитание в Figma vs. другие инструменты: сравнение с Illustrator и Adobe XD

Многие дизайнеры переходят из Illustrator или Adobe XD в Figma и сталкиваются с различиями в работе с Boolean-операциями.

• Figma: вычитание выполняется мгновенно, результат — векторный путь, легко редактируется. Поддерживает каскадное применение и работает в реальном времени.
• Adobe Illustrator: более гибкие инструменты (Pathfinder), но требуют ручного управления «Expand» и «Unite». Процесс менее интуитивен для новичков.
• Adobe XD: поддерживает только Union и Subtract, но не Intersect и Exclude. Редактирование после объединения ограничено — вы не можете вернуться к исходным формам без отмены действия.

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

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

Дмитрий подчеркивает, что вычитание — это не просто «удаление», а метод систематизации. Он использует его в сочетании с компонентами и вариантами (Variants), чтобы создавать целые библиотеки иконок, которые легко обновляются. Если нужно изменить толщину обводки — меняете стиль одного компонента, и все экземпляры обновляются.

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

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

Заключение

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

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