Как вырезать часть объекта в фигме

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

Что такое Boolean Operations в Figma

Boolean Operations — это математические операции над геометрическими формами, которые позволяют объединять, вычитать, пересекать и исключать области. В Figma они реализованы через четыре кнопки в верхней панели инструментов: Union (объединение), Subtract (вычитание), Intersect (пересечение) и Exclude (исключение). Каждая из них работает только с двумя или более выделенными векторными объектами. Важно: объекты должны быть в одном родительском контейнере, и хотя бы один из них должен быть замкнутым (например, прямоугольник, круг, многоугольник). Текст, изображения и группы без векторных контуров не участвуют в операциях.

Функция «Subtract» — именно та, которая нужна для вырезания. Она берёт верхний объект как «штамп» и удаляет его форму из нижнего. Результат — один новый векторный объект с изменённым контуром. Это не просто удаление слоя, а физическое изменение формы, что сохраняет возможность редактировать результат позже. В отличие от ручного удаления с помощью Pen Tool или Eraser, Boolean Operations не разрушают исходные объекты — они создают новый, объединённый элемент, который можно изменить, вернувшись к исходным формам.

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

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

Как проверить результат

• Выберите новый объект и посмотрите на панель Properties — он должен отображаться как один элемент, а не как группа.
• Нажмите Enter, чтобы войти в режим редактирования формы — вы увидите все узлы контура, включая те, что появились после вычитания.
• Если результат не тот, что ожидался — нажмите Ctrl+Z (Cmd+Z на Mac) и повторите операцию, убедившись, что порядок выделения правильный.

Порядок выделения имеет значение

В Figma важен порядок, в котором вы выбираете объекты. Последний выделенный объект становится «штампом», который вычитается. То есть, если вы сначала кликнули по кругу, потом по прямоугольнику — круг будет вырезан из прямоугольника. Если наоборот — прямоугольник вырежет круг. Чтобы избежать путаницы, всегда выделяйте сначала объект, который останется, а потом — тот, который будет вырезать.

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

Даже опытные дизайнеры допускают типичные ошибки при работе с Boolean Operations. Они не всегда очевидны, но приводят к потере времени и некачественным результатам.

Ошибка 1: Выделение не векторных объектов

• Попытка вырезать текст, изображение или группу без векторных контуров.
• Решение: преобразуйте текст в контуры (Right-click → Convert to Vector), а изображения — в векторные формы с помощью Image Trace (в Figma это делается вручную или с помощью плагинов).

Ошибка 2: Объекты не пересекаются

• Если «штамп» просто лежит рядом с основным объектом — операция не сработает.
• Решение: всегда проверяйте, что хотя бы одна точка «штампа» находится внутри контура основного объекта. Включите «Snap to Grid» и «Snap to Objects» для точного позиционирования.

Ошибка 3: Использование групп вместо объединения

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

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

• Как уже упоминалось, последний выделенный объект — это тот, что вычитается.
• Решение: перед применением операции обратите внимание на порядок в панели Layers — верхний в списке объектов будет «штампом».

Продвинутые техники вырезания

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

Множественное вычитание

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

Комбинирование с режимом Exclude

Если вам нужно не просто вырезать, а оставить только области, которые НЕ пересекаются — используйте «Exclude». Например, у вас есть два пересекающихся круга. Примените «Exclude» — получится луна (две отдельные формы). Это отличный способ создавать сложные иконки без ручного рисования.

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

Иногда вы не хотите разрушать исходную форму. В этом случае используйте маску: поместите объект, который нужно вырезать, поверх основного, выделите оба и нажмите Ctrl+Alt+M (Cmd+Option+M). Это создаст маску — не изменит форму, но скроет часть. Плюс: маску можно отключить в любой момент.

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

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

• Интерфейс приложения: вырезание круга из фона для создания эффекта «прозрачного окна» под аватар пользователя.
• Логотипы: создание сложных символов, например, буквы «О» с вырезанным внутренним контуром — всё это делается за один шаг.
• Карточки и модальные окна: вырезание углов для эффекта «скруглённых краёв с отверстием» — популярный тренд в Material Design 3.
• Иконки: вырезание деталей из базовой формы, чтобы избежать ручного рисования с Pen Tool.
• Декоративные элементы: вырезание геометрических узоров из фоновых блоков — например, в дизайне сайтов для моды или косметики.

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

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

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

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

Заключение

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

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