Boolean-операции в Figma: как собирать сложные формы и не терять слои
Иконки, кнопки со скруглёнными вырезами, составные бейджи — всё это собирается из простых фигур.
Boolean-операции превращают набор пересекающихся фигур в один объект по одному из четырёх правил.
Четыре операции
Документация перечисляет четыре boolean-операции:
- Union — объединяет выбранные фигуры в одну;
- Subtract — вычитает верхние фигуры из нижней;
- Intersect — оставляет только область пересечения;
- Exclude — оставляет всё, кроме пересечения.
Названия совпадают с логикой Pathfinder в Illustrator, но работают иначе: результат остаётся редактируемым внутри Figma.
Как применить
- Нарисуйте две или больше фигуры с перекрытием.
- Выделите их все — рамкой или
Shift-кликами. - Нажмите кнопку операции на верхней панели инструментов.
Порядок важен для Subtract: вычитаются верхние слои из самого нижнего.
Практика: если вычитание сработало наоборот, поменяйте порядок слоёв в панели Layers и повторите.
Почему результат не «схлопывается»
После операции в панели слоёв появляется группа с иконкой операции.
Внутри остаются исходные фигуры: их можно выделить, подвинуть, изменить размер — итоговая форма пересчитается.
Практика: это и есть главное преимущество перед Illustrator, где после Pathfinder часто приходится отменять действие, чтобы поправить исходник.
Практический пример: иконка поиска
Задача: лупа с «дыркой» в стекле.
- Нарисуйте круг — стекло.
- Нарисуйте прямоугольник со скруглением под ручку.
- Union для двух фигур — получаем силуэт лупы.
- Нарисуйте круг меньшего радиуса по центру стекла.
- Subtract — получаем отверстие.
Если после Subtract исчезла не та часть, значит внутренний круг оказался ниже по стеку. Поднимите его и повторите.
Практический пример: кнопка с вырезом
Задача: прямоугольник с полукруглым вырезом по правому краю.
- Прямоугольник основания.
- Круг, центр которого лежит на правой границе.
- Subtract.
Практика: держите круг выделенным и двигайте стрелками — вырез меняется на глазах. Это быстрее, чем пересобирать форму заново.
Порядок слоёв
В Figma порядок в панели Layers определяет, кто кого вычитает.
Практика: если фигур больше двух, сначала соберите их в группу в нужном порядке, потом применяйте операцию. Иначе легко получить вычитание не из того слоя.
Intersect и Exclude
Intersect полезен, когда нужно получить область на пересечении двух фигур: например, линзу или сегмент.
Exclude даёт «дырявый» силуэт: остаётся всё, кроме общей части. Это быстрый способ собрать кольцо из двух окружностей.
Практика: кольцо через Exclude остаётся живым — внутренний круг можно сместить, и толщина кольца изменится.
Boolean и маски
Разница принципиальна, и её часто путают.
Boolean меняет саму геометрию: объект действительно становится другой формы.
Маска ничего не меняет, а прячет часть содержимого. Внутри маски можно двигать картинку, и обрезка следует за формой.
Практика: если предполагается, что содержимое будет двигаться внутри формы, — это маска, а не boolean.
Boolean и компоненты
Boolean-группа может быть частью компонента.
Практика: собирайте иконку как отдельный компонент с boolean-группой внутри, а в интерфейсе используйте экземпляры. Тогда при изменении размера контейнера форма остаётся корректной, если заданы правильные constraints.
Осторожно с переопределениями: правка дочерней фигуры внутри экземпляра ломает связь с основным компонентом.
Когда boolean не нужен
Простая обрезка. Достаточно маски.
Скругления. Радиус задаётся в свойствах фигуры.
Иконки из библиотеки. Не пересобирайте — используйте готовый компонент, иначе получите расхождение с дизайн-системой.
Производительность
Boolean-группы недороги, но файлы, где каждая иконка собрана из десяти фигур, открываются медленнее.
Практика: готовые иконки лучше хранить как компоненты, а не держать в макете десятки групп с вложенными фигурами.
Частые ошибки
Вычитание не в ту сторону. Проверьте порядок слоёв.
Ожидание неразрушающего результата от маски. Это другой инструмент.
Сборка иконки в макете, а не в компоненте. Правки расходятся по файлу.
Лишние фигуры внутри группы. Форма считается непредсказуемо.
Забыть про выравнивание. Центр фигур лучше совмещать до операции.
Работа с текстом
Текстовый слой можно включить в boolean-операцию, если предварительно превратить его в векторные контуры.
Практика: для логотипов и бейджей это удобно — буквы становятся частью единой формы. Но обратного пути нет: исходный текст восстановить не получится, поэтому работайте на копии слоя.
Если буквы должны оставаться текстом, используйте маску: она обрежет содержимое по форме, не меняя ни текст, ни его свойства.
Выравнивание до операции
Большинство «странных» результатов появляется из-за того, что фигуры не были выровнены.
Практика: перед Union и Subtract выставьте центры по горизонтали или вертикали через панель выравнивания. Это делает форму симметричной, а поведение при изменении размера — предсказуемым.
Отдельно проверьте, что у фигур одинаковый радиус скругления, если он есть: разные радиусы дают заметные «ступеньки» на стыке.
Подготовка к передаче
Иконки, собранные boolean-группами, лучше сразу превращать в компоненты с понятными именами.
Практика: назовите группу операции осмысленно — например, «иконка/поиск/union». Разработчик в Dev Mode увидит структуру и сможет воспроизвести форму кодом или экспортировать SVG без лишних уточнений.
Лишние скрытые фигуры внутри группы стоит удалить: они не видны на холсте, но попадают в экспорт и увеличивают вес файла.
Экспорт в SVG
Готовую boolean-группу можно экспортировать как SVG прямо из Figma.
Практика: перед экспортом проверьте, что у формы нет обводки, которую вы не собирались выводить, и что масштаб совпадает с сеткой. Иконка, нарисованная на полупиксельных координатах, после экспорта даёт размытые края на экранах с обычной плотностью.
Если SVG применяется в вебе, лишние группы внутри файла лучше убрать — на глаз разницы нет, а разметка становится заметно короче.
FAQ
Сколько boolean-операций в Figma?
Четыре: Union, Subtract, Intersect, Exclude.
Что вычитает Subtract?
Верхние слои из нижнего.
Можно ли потом поправить форму?
Да, дочерние фигуры остаются внутри группы.
Чем маска отличается от boolean?
Маска скрывает часть содержимого, boolean меняет геометрию.
Где кнопки операций?
На верхней панели инструментов при выделении нескольких фигур.