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

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

Что такое вычитание фигур в Figma

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

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

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

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

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

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

Альтернативные способы вызова операции

• Клавиатурное сочетание: Windows — Ctrl + Alt + -, macOS — Cmd + Option + -.
• Контекстное меню: Правый клик по выделенным объектам → «Boolean» → «Subtract».
• Панель Properties: В разделе «Operations» (если открыта) выберите «Subtract» из выпадающего списка.

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

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

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

Даже опытные дизайнеры допускают типичные ошибки при работе с Boolean Operations. Вот основные из них:

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

Если вы сначала выделите «вычитаемую» фигуру, а потом целевую — Figma может применить операцию неверно. Результатом станет не вычитание, а объединение или ничего.

Ошибка 2: Использование групп без раскрытия

Если вы объединили несколько фигур в группу и пытаетесь вычесть из неё другую — операция не сработает. Figma не позволяет применять Boolean Operations к группам напрямую.

Решение: выделите группу → правый клик → «Ungroup» → теперь вы можете работать с отдельными формами.

Ошибка 3: Работа с текстом как с вектором

Текст — это не векторная форма по умолчанию. Попытка вычесть круг из текста приведёт к ошибке. Чтобы это работало, сначала преобразуйте текст в контур: выделите текст → правый клик → «Convert to Vector».

Ошибка 4: Непонимание, что результат — одна форма

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

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

Вычитание — это только начало. Сочетая его с другими Boolean Operations, вы создаёте практически любые формы.

Комбинация «Subtract» + «Intersect»

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

Использование с масками и компонентами

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

Операции с несколькими объектами

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

Практические кейсы: где применяется вычитание

Вычитание фигур — это не академическая функция. Она активно используется в реальных проектах:

• Иконки и значки: Создание иконок с вырезами — например, значок «закрыть» с крестом, вырезанным из круга.
• Кнопки и карточки: Кнопки с углублениями, эффектами «вдавленности» или вырезами под иконки.
• Логотипы: Многие современные логотипы (например, Spotify, Slack) используют вычитание для создания узнаваемых форм.
• UI-элементы интерфейсов: Вырезы в фонах, прозрачные области в модальных окнах, скруглённые вырезы под аватары.
• Анимации и микровзаимодействия: Вычитание позволяет создавать анимации «раскрытия» или «вырезания» без рисования ключевых кадров.

Представьте, что вы проектируете приложение для заметок. Вам нужно, чтобы при нажатии на заметку появлялся эффект «вырезания» — как будто из бумаги вырезают кусочек. С помощью вычитания и анимации маски вы можете реализовать это за пару минут, без анимации в After Effects.

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

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

Он также отмечает важность документирования: «Каждый сложный элемент, созданный через Boolean Operations, я помечаю комментарием в панели слоёв — “Subtract: Circle from Rectangle”. Это спасает коллег, когда они вносят правки через месяц».

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

Заключение

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

• Всегда проверяйте порядок слоёв: целевая фигура должна быть ниже вычитаемой.
• Преобразуйте текст в вектор перед вычитанием — иначе операция не сработает.
• Создавайте копии исходников перед применением Boolean Operations — это спасёт вас от ошибок.
• Комбинируйте вычитание с другими операциями для создания сложных, но точных форм.
• Используйте вычитание для создания компонентов — это ускоряет масштабирование интерфейсов.