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

Соединение фигур в Figma — это фундаментальный навык для дизайнеров, который позволяет создавать сложные, гибкие и масштабируемые интерфейсы без потери точности и производительности. Независимо от того, работаете ли вы над иконками, кнопками, сложными иллюстрациями или системами компонентов, умение корректно объединять, вычитать и пересекать формы напрямую влияет на качество конечного продукта. Многие начинающие дизайнеры сталкиваются с путаницей между операциями «Объединить», «Вычесть», «Пересечь» и «Исключить», что приводит к ошибкам в структуре объектов, неожиданным контурам и проблемам при экспорте. Однако, освоив эти инструменты, вы получите контроль над векторной геометрией, который открывает путь к профессиональным решениям.

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

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

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

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

Как объединить фигуры: пошаговая инструкция

Объединение (Union) — самая часто используемая операция. Она склеивает несколько фигур в одну целостную форму, удаляя внутренние пересечения. Особенно полезна при создании иконок, логотипов или сложных UI-элементов.

1. Создайте или импортируйте две или более векторных фигур (например, круг и прямоугольник).
2. Расположите их так, чтобы они частично перекрывались — это необходимо для корректного объединения.
3. Выделите все фигуры, удерживая клавишу Shift. Убедитесь, что все объекты выбраны — они будут выделены синей рамкой.
4. В верхней панели инструментов найдите иконки булевых операций (четыре квадрата с пересечениями).
5. Нажмите на кнопку «Объединить» (Union) — она выделена жирной линией и выглядит как два перекрывающихся квадрата с плюсом.
6. Проверьте результат: вместо двух отдельных фигур появилась одна, с гладким контуром.

После объединения исходные фигуры становятся неотредактируемыми — они превращаются в единый путь. Если вы хотите сохранить возможность редактировать отдельные части, используйте группировку (Ctrl+G) до операции или сделайте копию перед объединением.

Вычитание и пересечение: когда и зачем

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

1. Нарисуйте основную фигуру — например, прямоугольник.
2. Создайте вторую фигуру, которая будет вырезаться — например, круг.
3. Расположите круг так, чтобы он перекрывал часть прямоугольника.
4. Выделите обе фигуры, удерживая Shift.
5. Нажмите «Вычесть» (Subtract) — иконка с минусом между двумя квадратами.
6. Результат: прямоугольник с круглым отверстием.

Пересечение (Intersect) — менее очевидная, но мощная операция. Она оставляет только ту часть фигур, которая перекрывается. Идеально подходит для создания сложных симметричных форм, например, логотипов с пересекающимися кольцами или вензелями.

1. Нарисуйте два перекрывающихся круга.
2. Выделите оба.
3. Нажмите «Пересечь» (Intersect) — иконка с двумя перекрывающимися квадратами и точкой в центре.
4. Результат: линза — область, где круги пересекаются.

Операция «Исключить» — скрытый потенциал

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

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

1. Нарисуйте большой круг.
2. Сверху нарисуйте маленький круг, центрированный внутри большого.
3. Выделите оба, удерживая Shift.
4. Нажмите «Исключить» (Exclude) — иконка с двумя квадратами и вырезанным центром.
5. Результат: кольцо (аналогично вычитанию, но с обратным приоритетом).

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

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

• Попытка объединить растровые изображения. Figma не позволяет применять булевы операции к PNG или JPG. Решение: всегда используйте векторные формы или конвертируйте текст в контур.
• Фигуры в разных группах. Если одна фигура вложена в группу, а другая — нет, операция недоступна. Решение: выйдите из групп (дважды кликните на группу) или объедините группы перед операцией.
• Неправильный порядок выделения. Последний выделенный объект — «основа». При вычитании это может привести к неожиданному результату. Решение: всегда проверяйте порядок выделения — выделите объект, который должен быть «основой», первым.
• Слишком много пересечений. При объединении десятков фигур Figma может замедлиться. Решение: разбивайте сложные формы на этапы, объединяя по 3–5 объектов за раз.
• Отсутствие проверки контура. После операции иногда остаются «лишние» узлы или несмазанные края. Решение: всегда используйте режим «Показать узлы» (Ctrl+Shift+D) и проверяйте путь.

Практические кейсы: от иконок до сложных компонентов

Рассмотрим три реальных сценария, где булевы операции становятся незаменимыми.

Кейс 1: Иконка «Уведомление»
Создайте круг (основа), добавьте сверху маленький прямоугольник (антенна), объедините их. Затем вычтите два маленьких круга — это будут «окошки» для текста. Результат — единый векторный объект, который можно масштабировать без потери качества.

Кейс 2: Логотип с пересечением
Нарисуйте два перекрывающихся ромба. Примените «Пересечь» — получите центральную звезду. Теперь добавьте обводку и измените цвет. Вы получите сложный логотип, состоящий из одного векторного пути — идеально для SVG-экспорта.

Кейс 3: Компонент кнопки с тенью
Создайте прямоугольник, вычтите из него полукруг снизу (для плавного перехода), объедините с тонким горизонтальным прямоугольником (для подложки). Теперь вы можете сделать это одним компонентом, который масштабируется по высоте и ширине без искажений.

Экспертное мнение: как работают профессионалы

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

Также эксперты рекомендуют:
— Использовать «Показать узлы» (Cmd/Ctrl+Shift+D) для контроля геометрии;
— Применять «Упростить путь» после сложных операций, чтобы уменьшить количество узлов;
— Не объединять больше 5–7 фигур за раз — это снижает производительность Figma.

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

Заключение

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

• Всегда используйте векторные фигуры — растровые объекты не поддерживают булевы операции.
• Порядок выделения критичен: последняя выбранная фигура — «инструмент» для операции.
• Объединяйте по 3–5 фигур за раз, чтобы не перегружать Figma.
• Создавайте дубликаты перед финальными операциями — это спасёт вас от ошибок.
• Используйте булевы операции в компонентах — это основа масштабируемых дизайнерских систем.