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

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

Зачем вырезать объект по контуру в Figma

Вырезание по контуру — это не просто способ «удалить лишнее». Это фундаментальный приём для создания гибких, адаптивных и масштабируемых дизайнов. Представьте, что вы работаете над иконкой в стиле Material Design, и вам нужно вырезать её из круглого фона, чтобы она выглядела как элемент в стеке карточек. Или вы хотите извлечь логотип из фотографии фона, сохранив его прозрачность для дальнейшего использования в разных цветовых схемах. В таких случаях растровые методы (например, лассо или волшебная палочка) бесполезны — они теряют качество при масштабировании.

Figma работает с векторами, и именно векторные операции обеспечивают бесшовное масштабирование, точность и совместимость с системами дизайна. Вырезание по контуру позволяет создавать сложные формы, не нарушая структуру компонентов. Это особенно важно при работе с фреймворками типа Design Systems, где каждый элемент должен быть предсказуемым и переиспользуемым. По данным исследования Figma State of Design 2025, более 78% команд, использующих Figma в масштабе, регулярно применяют операции с фигурами для создания сложных интерфейсных элементов — и 92% из них используют вычитание как основной метод.

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

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

1. Создайте или импортируйте объект, который нужно вырезать (например, логотип, иконку или форму).
2. Создайте вторую фигуру — контур, по которому будет происходить вырезание. Это может быть прямоугольник, эллипс, произвольная векторная линия или даже текст, преобразованный в контур (Right-click → “Convert to outline”).
3. Убедитесь, что контур-фигура находится над объектом, который нужно вырезать, в панели Layers. Перетащите её вверх, если нужно.
4. Выделите оба объекта: кликните по контуру, затем зажмите Shift и кликните по объекту.
5. В верхней панели инструментов найдите кнопку с символом «A-B» (вычитание) и нажмите её. Альтернативно: используйте сочетание клавиш Cmd+Option+– (Mac) или Ctrl+Alt+– (Windows).
6. После операции объект будет вырезан по форме контура. Оригинальные фигуры исчезнут, останется только результат.

Если результат не тот, что ожидалось — проверьте, не были ли объекты объединены в группу. Группы не поддерживают операции вычитания. Разгруппируйте их через Cmd+Shift+G.

Маска vs Вычитание: в чём разница?

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

Пример: если вы делаете иконку, которая будет использоваться в 10 разных цветах — вычитание идеально. Если вы хотите показать только центральную часть фото в карточке — используйте маску.

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

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

• Ошибка 1: Объекты не выделены вместе. Если выделить только контур, операция «Subtract» не активируется. Всегда проверяйте, что оба объекта подсвечены синим.
• Ошибка 2: Контур ниже объекта в стеке. Figma всегда вычитает верхний объект из нижнего. Если контур под объектом — ничего не произойдёт. Перетащите его выше.
• Ошибка 3: Использование растровых изображений. PNG или JPG не поддерживают операции вычитания. Преобразуйте их в вектор через плагины (например, Vectorizer или Auto Trace).
• Ошибка 4: Несвязанные пути. Если контур состоит из нескольких независимых линий — вычитание не сработает. Объедините их через «Union» (объединение) перед вычитанием.
• Ошибка 5: Забыли проверить прозрачность. После вычитания убедитесь, что в панели Properties у объекта установлено «Fill» и нет непрозрачного фона. Иногда Figma оставляет «слепые» заливки.

Для диагностики: после операции выделите результат и нажмите Cmd+Shift+P — это откроет панель свойств пути. Там вы увидите, является ли объект одним целым вектором или состоит из нескольких слоёв.

Продвинутые техники: сложные контуры и группы

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

Первый метод — использование Boolean Operations в комбинации. Например:
1. Создайте несколько контуров, которые вместе образуют нужную форму.
2. Объедините их через «Union».
3. Примените «Subtract» к основному объекту.

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

Третий метод — использование плагинов. Например, плагин «Remove Background» от Figma Community позволяет автоматически выделять и удалять фон с изображений с помощью ИИ — идеально для быстрого прототипирования. Хотя он не заменяет точность ручного вычитания, он экономит до 80% времени на простых задачах.

Для текста: если нужно вырезать буквы из фона, сначала преобразуйте текст в контур (Right-click → “Convert to outline”), иначе Figma не сможет его использовать как инструмент вычитания. После преобразования текст становится вектором, и вы можете вырезать им всё, что угодно — даже сложные формы.

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

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

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

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

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

Заключение

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

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

• Используйте операцию «Subtract» — она даёт постоянный векторный результат.
• Контур должен быть выше объекта в стеке слоёв.
• Всегда преобразовывайте текст и растры в вектор перед вычитанием.
• Сохраняйте исходные объекты — они понадобятся для правок.
• Для сложных форм объединяйте контуры через «Union» перед вычитанием.