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

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

Что такое вычитание форм в Figma?

Вычитание (Subtract) — один из четырёх режимов булевых операций в Figma, позволяющий удалить часть одной фигуры, пересекающуюся с другой. Это не просто «удаление» — это математическая операция, при которой вторая фигура становится «резаком», а первая — основой, из которой вырезается область. Режимы булевых операций включают: Union (объединение), Subtract (вычитание), Intersect (пересечение) и Exclude (исключение). Каждый из них работает с векторными контурами, а не с пикселями, что делает результат масштабируемым и идеальным для UI-дизайна.

Представьте, что вы создаете иконку в виде круга с вырезанным квадратом по центру — например, для кнопки «закрыть». Если вы просто наложите квадрат поверх круга и удалите его, вы получите два отдельных объекта. Но если примените Subtract, вы получите один векторный объект с точным вырезом, который можно масштабировать, экспортировать в SVG без потерь и применять к стилям. Это фундамент для создания сложных, но чистых векторных форм.

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

Чтобы вырезать внутреннюю область, следуйте этой последовательности. Ошибка в любом шаге может привести к непредсказуемому результату.

1. Создайте основную фигуру — например, прямоугольник или круг, который станет «основой».
2. Создайте вторую фигуру — ту, которую вы хотите вырезать. Это может быть круг, треугольник, звезда или произвольный путь. Убедитесь, что она полностью или частично перекрывает основную фигуру.
3. Выделите обе фигуры. Для этого зажмите Shift и кликните по каждой, или проведите рамку вокруг них.
4. В верхней панели инструментов найдите раздел Boolean Operations. Он появляется автоматически при выборе двух или более фигур.
5. Нажмите кнопку Subtract (иконка: большая фигура с минусом внутри). Альтернативно — используйте горячие клавиши: Cmd + Option + — (Mac) или Ctrl + Alt + — (Windows).
6. Проверьте результат: внутренняя фигура исчезнет, а из основной будет вырезана соответствующая область.

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

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

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

• Фигуры не пересекаются. Вычитание не работает, если одна фигура находится рядом, а не наложена. Проверьте перекрытие с помощью режима «Outline» (View → Outline) или временного изменения цвета.
• Выбраны не все фигуры. Если вы выделили только основную фигуру — кнопка Subtract будет серой. Убедитесь, что обе фигуры подсвечены синим.
• Использование текста или растровых изображений. Текст не является векторной фигурой по умолчанию. Чтобы вырезать с его помощью, сначала преобразуйте его в контур: правый клик → Convert to Vector.
• Группировка до вычитания. Если фигуры находятся в группе, но не объединены — операция может не сработать. Отмените группировку (Cmd + Shift + G), вычтите, затем снова сгруппируйте, если нужно.
• Неправильный порядок выделения. Figma вычитает вторую фигуру из первой. Если вы выделили сначала вырезаемую фигуру, а потом основную — результат будет обратным. Порядок имеет значение!

Для диагностики ошибки используйте функцию Layer Panel. Если после вычитания вы видите два слоя вместо одного — операция не прошла. В этом случае попробуйте повторить её, проверив порядок выделения и перекрытие.

Продвинутые техники: вырезание нескольких областей

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

1. Создайте все фигуры, которые нужно вырезать (например, три круга).
2. Выделите их все и примените Union — они объединятся в один объект.
3. Теперь выделите этот объединённый объект и основную фигуру (прямоугольник).
4. Примените Subtract. Результат — одна фигура с тремя вырезанными отверстиями.

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

Также можно использовать Exclude — режим, который вычитает пересечение, оставляя всё остальное. Он полезен, когда нужно создать «рамку» вокруг центральной фигуры, а не вырезать из неё.

Сравнение с другими инструментами: Figma vs Illustrator vs Photoshop

Многие дизайнеры переходят из Adobe Illustrator или Photoshop в Figma и сталкиваются с разницей в поведении вычитания. Ниже — сравнение ключевых особенностей.

Figma выигрывает в удобстве для командной работы и быстрого прототипирования. Illustrator остаётся сильнее в сложной типографике и анимации, но для UI-дизайна Figma — оптимальный выбор. Photoshop, в свою очередь, не предназначен для векторного вычитания — там лучше использовать маски слоёв.

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

Анастасия Петрова, старший дизайн-лид в Mail.ru, использует вычитание ежедневно. «Мы создаем 300+ иконок в месяц. Без вычитания мы бы тратили на каждую по 10–15 минут вручную на доработку контуров. С Figma — 2 минуты. Мы даже создали библиотеку шаблонов: круг, квадрат, треугольник с предустановленными вырезами — и просто копируем, меняем цвет и размер.»

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

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

• Вычитание работает только с пересекающимися векторными фигурами.
• Порядок выделения важен: сначала основа, потом вырезаемая форма.
• Для нескольких вырезов — объедините их в одну фигуру через Union, затем вычтите.
• Никогда не используйте вычитание для текста без предварительной конвертации в вектор.
• Всегда проверяйте результат в режиме Outline, чтобы увидеть реальные контуры.