Как в фигме вырезать один объект из другого

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

Основы работы с векторами в Figma

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

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

Преобразование текста в вектор происходит через команду «Convert to Vector» (Ctrl+Shift+O / Cmd+Shift+O). После этого текст теряет возможность редактироваться как шрифт, но становится полноценным векторным объектом. То же самое касается групп: если внутри группы несколько фигур, их нужно объединить в один векторный путь.

Когда использовать вычитание?

Операция «Subtract» особенно полезна при создании:

• Иконок с вырезанными внутренними областями (например, стрелка, рамка, значок Wi-Fi);
• Логотипов со сложной геометрией;
• UI-элементов, таких как кнопки с отверстиями, таббары с вырезами под камеру;
• Маскированных эффектов, когда одна форма служит «выемкой» для другой.

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

Как вырезать один объект из другого: пошаговый процесс

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

1. Создайте два объекта: нижний — тот, из которого будет происходить вырезание (например, большой прямоугольник), верхний — форма-выемка (например, круг).
2. Убедитесь, что оба объекта находятся на одном уровне иерархии (в одном фрейме или на холсте).
3. Выберите оба объекта: зажмите Shift и кликните по каждому, начиная с верхнего.
4. На панели сверху найдите иконку с надписью «Boolean operations» и выберите «Subtract».
5. Figma удалит часть нижнего объекта там, где он пересекается с верхним.

Пример: создание рамки с закруглёнными углами

Представьте, что вам нужно сделать рамку с закруглёнными углами, но не просто контур, а заливку с прозрачным центром. Вот как это сделать:

• Нарисуйте большой прямоугольник с закруглёнными углами — это будет основа.
• Внутри него нарисуйте меньший прямоугольник, также с закруглениями, но поменьше.
• Выделите оба прямоугольника (сначала малый, затем большой, или наоборот — главное, чтобы они были выбраны вместе).
• Нажмите «Subtract».
• Результат — рамка, созданная путём вычитания внутренней формы.

Обратите внимание: после операции объект становится одним векторным путём. Вы можете редактировать его точки с помощью инструмента «Pen Tool» или «Vector Network», но уже не сможете изменять параметры как отдельные фигуры.

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

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

Советы по сохранению гибкости дизайна

Если вы планируете часто изменять форму выреза, лучше не применять вычитание сразу. Вместо этого используйте альтернативные подходы:

• Работайте с копиями: перед операцией дублируйте слои (Ctrl+D).
• Используйте маски: поместите верхнюю фигуру в качестве маски для нижнего слоя. Это не изменяет геометрию, но визуально создаёт эффект выреза.
• Сохраняйте исходные объекты в скрытых слоях — на случай, если понадобится повторная настройка.

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

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

1. Использование масок вместо вычитания

Маскирование — это не изменение формы, а скрытие части содержимого. Чтобы создать маску:

• Поместите объект-маску выше того, что нужно обрезать.
• Выделите оба слоя.
• Нажмите Ctrl+Alt+M (Cmd+Option+M) или щёлкните правой кнопкой → «Use as Mask».

Преимущества: маска остаётся редактируемой, вы можете менять её размер, положение, добавлять анимацию. Недостаток: при экспорте маска работает только в рамках Figma, а в коде потребуется CSS-маска.

2. Комбинирование нескольких операций

Figma позволяет объединять до 200 векторных объектов в одну булеву операцию. Например, можно вырезать сразу несколько кругов из прямоугольника:

• Нарисуйте прямоугольник.
• Добавьте несколько кругов поверх.
• Выделите все круги, объедините их через «Union».
• Затем выберите объединённые круги и прямоугольник, примените «Subtract».

Такой подход эффективен при создании решёток, решений с множеством отверстий или декоративных узоров.

3. Работа с компонентами и вариантами

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

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

Анна Смирнова, ведущий UX-дизайнер в крупном продуктовом стартапе, делится своим опытом:

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

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

Заключение

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

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