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

Удаление части фигуры в Figma — распространённая задача при работе с векторной графикой, будь то создание иконок, редактирование шейпов или подготовка дизайна интерфейсов. В отличие от простого удаления целого объекта, вырезание фрагмента требует понимания инструментов векторного редактирования: Pen Tool, Boolean Operations, Pathfinder и прямых манипуляций с узлами. Владение этими методами позволяет точно контролировать форму элементов, не нарушая их структуру.

Основы векторной графики в Figma

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

Понимание структуры векторных объектов — ключ к точному редактированию. Простые фигуры, такие как прямоугольники или круги, можно преобразовать в векторные пути (Vector Path), чтобы получить доступ к узлам. Это делается через контекстное меню: клик правой кнопкой → «Convert to Vector». После этого становится доступен инструмент Node Tool (в панели слева или клавиша A).

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

Ручное редактирование узлов: Node Tool в действии

Node Tool — один из самых мощных инструментов для тонкой настройки форм. Он позволяет добавлять, удалять и перемещать узлы, а также редактировать направляющие точки кривых Безье. Чтобы удалить часть фигуры вручную, нужно разомкнуть контур, удалив сегмент между двумя узлами.

Для этого:

1. Выделите фигуру и нажмите A (или выберите Node Tool в панели).
2. Щёлкните по контуру, чтобы увидеть узлы.
3. Выберите два соседних узла, которые ограничивают участок, который нужно удалить.
4. Нажмите Delete — сегмент между ними исчезнет, и фигура станет незамкнутой.

Если вы хотите сохранить замкнутую форму, но с вырезом, лучше не разрывать контур, а создать внутренний контур. Для этого добавьте новый набор узлов внутри основной фигуры, очертив нужную область. Затем примените операцию «Exclude» или «Subtract», чтобы «вырезать» эту зону.

Node Tool особенно эффективен при редактировании сложных кастомных форм, например, при создании каплевидных иконок или органических элементов. Однако он требует аккуратности: случайное удаление узла может исказить форму. Рекомендуется делать дубликат слоя перед началом редактирования.

Шаги для создания выреза через внутренний контур

• Преобразуйте фигуру в вектор (если ещё не сделано).
• Используйте Pen Tool (P), чтобы нарисовать форму выреза внутри основной фигуры.
• Выделите оба контура: внешний и внутренний.
• Нажмите на иконку «Subtract» в верхней панели или используйте сочетание Ctrl/Cmd + Minus.
• Готово: внутренняя часть будет удалена, образуя отверстие.

Булевые операции: Subtract, Union, Exclude и другие

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

Чтобы удалить часть фигуры, чаще всего используется Subtract. Например, если у вас есть прямоугольник и поверх него нарисован круг, операция «Subtract» превратит прямоугольник в форму с круглым вырезом. Важно: порядок слоёв имеет значение. Фигура, которую вы хотите использовать как «вырез», должна быть выше в стеке.

Если после операции результат не соответствует ожиданиям, можно отменить действие (Ctrl+Z) и поменять порядок слоёв. Также стоит помнить, что булевы операции создают составной объект (compound shape). Его можно разгруппировать (Ctrl+Shift+G), чтобы вернуться к исходным фигурам, но после этого операция теряется.

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

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

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

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

Чтобы создать маску:

1. Поместите фигуру, которую хотите обрезать, внутрь фрейма (Frame).
2. Нарисуйте другую фигуру (например, круг) поверх неё — это будет маска.
3. Выделите оба объекта и нажмите Ctrl+Alt+M или выберите «Use as Mask» в правой панели.
4. Теперь всё, что выходит за пределы маски, будет скрыто.

Маски удобны тем, что их можно редактировать в любой момент: изменить форму, переместить или удалить. При этом оригинальная фигура остаётся нетронутой. Это важно при A/B-тестировании дизайнов или анимациях, где форма меняется динамически.

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

Когда использовать маску вместо Subtract?

• Когда нужно быстро протестировать разные формы обрезки.
• При работе с растровыми изображениями или видео.
• Если планируется анимация: маску можно двигать, создавая эффект «раскрытия».
• Когда важна неизменность исходного объекта.

Продвинутые методы: Compound Paths и Combine As Mask

Для сложных задач Figma предлагает расширенные инструменты. Один из них — Compound Path (составной путь). Он позволяет создавать фигуры с внутренними вырезами без использования булевых операций. Это особенно актуально при экспорте в SVG, где важно сохранить чистую структуру.

Чтобы создать составной путь:

• Нарисуйте внешнюю и внутреннюю фигуры.
• Выделите обе и нажмите Ctrl+Alt+G или выберите в меню: Layer → Combine As → Compound Path.
• Внутренняя область автоматически станет «дыркой».

Compound Path работает по правилу чётности: области, находящиеся внутри нечётного числа контуров, видимы; чётные — скрыты. Это позволяет создавать многоуровневые вырезы, например, кольца с несколькими отверстиями.

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

Пример: создание логотипа с прозрачными элементами

• Нарисуйте основную форму логотипа.
• Добавьте несколько маленьких кругов внутри.
• Выделите всё и примените Combine As → Compound Path.
• Экспортируйте как SVG — вырезы сохранятся без лишних слоёв.

Типичные ошибки и как их избежать

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

• Неправильный порядок слоёв: при использовании Subtract верхняя фигура должна быть той, которую вы хотите «вырезать». Если перепутать — получится обратный эффект.
• Работа с текстом без конвертации: текст нельзя напрямую использовать в булевых операциях. Сначала его нужно преобразовать в вектор (Create Outlines).
• Забытая группировка: если фигура в группе, булевы операции могут не сработать. Разгруппируйте перед началом.
• Попытка редактировать маску как форму: маска — это не часть объекта. Её нужно редактировать отдельно.
• Отсутствие запасной копии: после булевой операции исходные объекты теряются (если не разгруппированы). Всегда дублируйте слои.

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

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

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

Он также советует использовать плагины, такие как BoolTool, который упрощает булевы операции: позволяет быстро переключаться между режимами, клонировать объекты перед вычитанием и даже выполнять операции с текстом.

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

Заключение

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

• Для точного выреза используйте операцию Subtract с правильно упорядоченными слоями.
• Node Tool подходит для ручного редактирования контуров, но требует аккуратности.
• Маски идеальны для временных решений и анимаций.
• Compound Path — лучший выбор для чистого SVG-экспорта.
• Всегда дублируйте объекты перед сложными операциями.