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

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

Что такое булевы операции в Figma

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

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

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

Как активируется операция вычитания

Чтобы использовать вычитание, необходимо:

• Иметь две или более перекрывающиеся фигуры;
• Выделить обе фигуры одновременно (удерживая Shift);
• Найти в правой панели свойств значок «Boolean» с выпадающим меню;
• Выбрать опцию «Subtract».

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

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

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

1. Создайте базовую фигуру. Используйте инструмент Rectangle, Ellipse или любой другой, чтобы нарисовать основную форму. Например, большой прямоугольник, который будет фоном.
2. Добавьте вторую фигуру сверху. Нарисуйте круг, квадрат или другую форму так, чтобы она частично или полностью перекрывала первую. Эта фигура станет «вырезом».
3. Убедитесь в правильном порядке слоёв. Во вкладке «Layers» (Слои) убедитесь, что верхняя фигура находится выше в стеке. Если нужно — используйте Ctrl+[ или Ctrl+] для изменения порядка.
4. Выделите обе фигуры. Удерживайте Shift и кликните по каждой фигуре, или нарисуйте рамку выделения вокруг них.
5. Примените операцию Subtract. В правой панели найдите раздел «Boolean» и выберите иконку в виде квадрата с минусом. Это активирует вычитание.
6. Проверьте результат. Теперь из нижней фигуры будет вырезана форма верхней. Обратите внимание: сама верхняя фигура исчезает, но её контур остаётся как часть нового объекта.

Пример: создание кнопки с вырезом

Допустим, вы проектируете интерфейс мобильного приложения и хотите создать кнопку с отверстием посередине (например, для эффекта «просмотра сквозь»).

• Нарисуйте прямоугольник размером 200×60 пикселей — это будет кнопка.
• Нарисуйте круг диаметром 40 пикселей и поместите его в центр прямоугольника.
• Выделите обе фигуры, начиная с круга (верхнего слоя).
• Примените Subtract.

Результат — прямоугольник с круглым вырезом. Такой элемент можно использовать как маску или декоративный элемент.

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

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

Когда использовать Detach и когда — нет

После применения булевой операции Figma объединяет фигуры в логическую группу. Вы можете отменить операцию, нажав Ctrl+Z, или отключить её, выбрав «Detach from boolean group». Однако будьте осторожны: отключение разрушает связь, и вы потеряете возможность быстро перенастроить вырез.

Продвинутые техники работы с вычитанием фигур

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

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

Figma позволяет вычитать сразу несколько фигур из одной базовой. Для этого:

• Создайте базовую фигуру (например, круг).
• Нарисуйте несколько маленьких фигур (круги, квадраты) поверх неё.
• Выделите все верхние фигуры + базовую (в этом порядке).
• Примените Subtract.

Результат — один объект с несколькими вырезами. Это полезно при создании решёток, иконок с дырками или текстур.

Комбинирование с масками

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

Анимация форм через Variants

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

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

Вычитание фигур — не просто теоретический инструмент. Он активно применяется в реальных проектах. Ниже — три кейса, где Subtract играет ключевую роль.

Создание логотипа с негативным пространством

Многие известные логотипы (например, FedEx или Amazon) используют негативное пространство. В Figma вы можете смоделировать такой эффект:

• Нарисуйте сплошную букву (например, «S»).
• Поверх неё добавьте тонкую полосу, которая будет «вырезать» часть буквы.
• Примените Subtract.

Теперь внутри буквы появится просвет, создающий дополнительный смысл.

Дизайн иконок

Иконки часто содержат внутренние вырезы: например, корзина с отверстиями или дом с окном. Вместо ручного рисования контуров проще использовать вычитание:

• Нарисуйте внешний контур иконки.
• Добавьте внутренние формы (окна, двери).
• Выделите всё и примените Subtract ко всем внутренним элементам.

Графические маски и UI-элементы

Вычитание помогает создавать уникальные формы для баннеров, кнопок и слайдеров. Например, кнопка в виде облака с вырезом под сообщение реализуется за пару кликов.

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

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

— Мария Соколова, арт-директор, 12 лет в digital-дизайне

Она также отмечает, что команды, освоившие булевы операции, быстрее создают дизайн-системы и реже сталкиваются с проблемами адаптации элементов под разные экраны.

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

Заключение

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

• Вычитание работает только между векторными объектами.
• Порядок слоёв определяет, что именно будет вычтено.
• Используйте Detach для редактирования, но сохраняйте копии оригиналов.
• Combine with masks and components for advanced effects.
• Practice on real projects like icons, logos, and UI elements.