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

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

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

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

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

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

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

Рисовать такие формы вручную - трудоемко и не всегда точно. Гораздо эффективнее использовать принцип "вырезания", где одна фигура выступает в роли резца, а другая - в роли материала. Этот подход не только экономит время, но и обеспечивает математическую точность контуров. В Figma этот процесс реализован интуитивно: вы просто располагаете объекты в нужном порядке и применяете логическую операцию.

Понимание механики вычитания открывает путь к созданию профессиональной векторной графики, где каждая линия остается идеально гладкой, а каждый изгиб - полностью контролируемым. Это фундаментальный навык, отличающий начинающего дизайнера от уверенного профессионала.

Создайте исходные фигуры

• Возьмите инструмент Ellipse (O) и нарисуйте круг. Зажмите Shift, чтобы круг был ровным.
• Теперь нарисуйте второй круг, который будет меньше первого. Это будет наша "формочка для вырезания".
• Расположите маленький круг поверх большого, точно в центре. Чтобы выровнять их, выделите оба круга и воспользуйтесь инструментами выравнивания по горизонтали и вертикали.

Выделите обе фигуры

• Кликните на большом круге, затем, зажав Shift, кликните на маленьком. Или просто выделите их обе рамкой (клик и перетаскивание курсора).

Примените операцию "Вычитание"

Есть три способа это сделать. Результат будет идентичным.

• Способ 1: Панель инструментов. На верхней панели инструментов нажмите на иконку с двумя квадратиками (она может выглядеть как один сплошной и один пунктирный квадрат). В выпадающем меню выберите Subtract.
• Способ 2: Горячие клавиши (Самый быстрый!). Просто нажмите Ctrl + E (на Windows) или Cmd + E (на Mac).
• Способ 3: Правой кнопкой мыши. Кликните правой кнопкой мыши по выделенным фигурам, в меню выберите Combine Shapes - Subtract.

Результат: Маленький круг исчез, а на его месте в большом круге появилась "дырка". Вы получили кольцо!

Работа с "Векторными сетями"

После выполнения булевых операций ваши фигуры превращаются в нечто большее, чем просто группа объектов - они становятся интеллектуальными "Векторными Сетями" (Vector Networks). Это ключевое отличие Figma от традиционных графических редакторов. Векторная сеть - это не просто набор точек, а связанная система контуров и узлов, сохраняющая логику построения.

Такая структура позволяет не просто перемещать объекты, а глубоко редактировать получившуюся форму на фундаментальном уровне. Вы можете возвращаться к любой точке контура, менять кривизну Безье, корректировать траекторию линий - и всё это без потери качества. Именно работа с векторными сетями отличает статичное вырезание от динамического моделирования формы.

Это ваш пропуск в мир advanced-редактирования, где каждая операция - не финальное действие, а всего лишь этап в бесконечном процессе трансформации. Освоив этот инструмент, вы получаете полный контроль над самой геометрией вашего дизайна. После применения любой булевой операции фигуры объединяются в один объект, который называется Vector Network (Векторная Сеть). Это очень важное понятие.

Что это значит для вас?

• Вы можете редактировать получившуюся сложную фигуру так же, как и любую другую векторную фигуру.
• Для этого выберите инструмент Pen (P) или Direct Selection (A) и кликните на вашу вырезанную фигуру.

Вы увидите все точки и контуры, из которых она состоит. Вы можете:

• Перемещать эти точки.
• Изменять кривые Безье с помощью "усиков".
• Удалять ненужные точки.

Это позволяет тонко настраивать форму даже после вырезания.

Практические примеры и приемы

Теория булевых операций становится по-настоящему мощной только когда применяется к реальным дизайнерским задачам. Именно практическое применение превращает абстрактный инструмент в надежного помощника. Рассмотрим создание иконки облака: вместо кропотливого рисования волнистых линий вы комбинируете эллипсы и прямоугольник, а затем вырезаете отверстие для эффекта глубины.

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

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

Создание сложной иконки

Допустим, вам нужен значок "облако".

1. Нарисуйте несколько кругов и один прямоугольник, сложив их в форму облака.
2. Выделите все фигуры.
3. Примените Объединение (Union), чтобы склеить их в одно целое.
4. Теперь нарисуйте маленький кружок, который вы хотите вырезать для "дырки" в облаке.
5. Выделите облако и этот кружок и примените Вычитание (Subtract).

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

Вы хотите сделать блок, у которого скруглен только левый верхний угол, а из правого нижнего вырезан треугольник.

1. Нарисуйте прямоугольник.
2. В панели свойств справа настройте скругление только для левого верхнего угла (нажмите на значок "разъединить" возле радиуса углов).
3. Нарисуйте треугольник (инструмент Pen) в правом нижнем углу.
4. Выделите прямоугольник и треугольник и примените Вычитание (Ctrl или Cmd + E).

Важные нюансы и проблемы 

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

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

Исследуем тонкости наследования визуальных стилей и раскроем мощный потенциал инструментов прямого выделения для пост-редактирования. Знание этих принципов - это то, что отличает новичка, который борется с программой, от эксперта, который заставляет ее работать на свой замысел без лишних усилий и с полным контролем над результатом.

1. Иерархия при вычитании: Какая фигура из какой вырезается? Figma всегда вычитает верхние фигуры из нижней. Если результат вас не устроил, используйте панель слоев (Layers) справа, чтобы изменить порядок слоев, или кнопки Bring Forward / Send Backward на панели инструментов.
2. Разгруппировка. Если вы передумали, вы можете "отменить" булеву операцию. Выделите получившуюся фигуру и нажмите правой кнопкой - Ungroup Selection (Shift + Ctrl или Cmd + G). Фигуры станут снова независимыми, но, что важно, они могут потерять свои исходные свойства (например, заливку).
3. Редактирование исходных фигур. После объединения в Vector Network вы все еще можете редактировать исходные контуры. Просто выделите фигуру инструментом Direct Selection (A) и перемещайте точки того контура, который нужно изменить (например, увеличьте размер вырезанной дырки).
4. Невидимые фигуры. При операции "Вычитание" верхняя фигура (та, которую вырезают) становится невидимой, но ее контур остается частью векторной сети. Это нормально.
5. Заливка и обводка. Результирующая фигура унаследует свойства заливки и обводки от самой нижней фигуры в стеке.

Вывод

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

Аспект	Описание	Ключевой инструмент и горячие клавиши
Основной процесс	Последовательное создание и наложение фигур с последующим объединением.	Рисуем фигуры. Выделяем их. Применяем операцию.
Операция "Вычитание"	Верхняя фигура вырезается из нижней.	Кнопка Subtract на панели или Ctrl или Cmd + E
Иерархия слоев	Важен порядок: верхняя фигура вырезается из нижней.	Панель Layers для изменения порядка.
Редактирование результата	Получившаяся фигура становится векторной сетью, которую можно тонко настраивать.	Direct Selection (A) или Pen Tool (P)
Отмена операции	Разделение сложной фигуры обратно на исходные компоненты.	Ungroup (Shift + Ctrl или Cmd + G)
Наследование стилей	Результирующая фигура принимает заливку и обводку от нижней фигуры в стеке.	Панель Design (справа)

 

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