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

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

Чтобы соединить объекты в Figma, используйте Boolean Operations — Объединить, Вычесть, Пересечение и Исключение. Эти инструменты позволяют создавать сложные формы из простых фигур. Главное — помнить, что операции применяются к векторным объектам, и порядок выделения имеет значение.

Содержание статьи:

Что такое булевы операции в Figma
Как соединить фигуры: пошаговые инструкции
Когда использовать каждую операцию
Распространённые ошибки и как их избежать
Ошибка 1: Операция не применяется
Ошибка 2: Неправильный результат после Subtract
Ошибка 3: Невозможно отредактировать форму после объединения
Современные подходы: соединение через компоненты и фреймы
Когда использовать компоненты вместо булевых операций
Экспертное мнение
Вопросы и ответы
Заключение

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

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

Представьте, что у вас есть два круга, частично перекрывающие друг друга. Если применить Union, вы получите одну цельную форму, включающую оба круга. Subtract оставит только ту часть первого объекта, которая не покрывается вторым. Intersect оставит лишь область, где они пересекаются. Exclude — наоборот, удалит зону пересечения, сохранив остальное.

Полезно знать: Булевы операции работают только с векторными объектами. Если вы попытаетесь применить их к тексту, растровому изображению или группе с эффектами, Figma предложит преобразовать элемент в вектор.

Эти операции особенно полезны при создании иконок, сложных UI-элементов или кастомных форм. Например, кнопка с закруглёнными углами и вырезанным логотипом внутри — идеальный кейс для Subtract. По данным UX Collective, более 78% дизайнеров используют булевы операции ежедневно, особенно на этапах прототипирования.

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

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

Подготовьте объекты. Создайте две или более фигур (прямоугольник, круг, путь и т.д.). Убедитесь, что они частично или полностью перекрываются.
Выделите нужные объекты. Зажмите Shift и кликните по каждому. Порядок важен: первый выделенный объект считается «основным», второй — «модификатором».
Найдите панель свойств справа. В разделе «Boolean Operations» выберите нужный тип: Union, Subtract, Intersect или Exclude.
Оцените результат. Figma мгновенно применит операцию. Форма изменится, а в слое появится значок векторного объединения.

Когда использовать каждую операцию

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

«При работе с Subtract всегда следите за порядком выделения. Если выделить сначала круг, потом прямоугольник — вы вырежете круг из прямоугольника. Обратный порядок — и ничего не изменится, потому что круг не может «вычесть» из себя прямоугольник.» — Алексей Миронов, senior UI designer, опыт 9 лет

Также можно использовать сочетания клавиш:

Ctrl + Alt + U — Union
Ctrl + Alt + S — Subtract
Ctrl + Alt + I — Intersect
Ctrl + Alt + X — Exclude

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

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

Даже опытные дизайнеры сталкиваются с типичными проблемами при соединении объектов. Ниже — самые частые из них и пути решения.

Ошибка 1: Операция не применяется

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

Решение: преобразуйте объект в вектор. Для текста — выберите его и нажмите Ctrl+Shift+O (Create Outlines). Для группы — разгруппируйте (Ctrl+Shift+G), затем примените операцию к её векторным частям.

Ошибка 2: Неправильный результат после Subtract

Причина: неверный порядок выделения. Figma всегда вычитает последний выбранный объект из первого.

Решение: перед применением операции проверьте порядок. В панели слоёв верхний объект будет вычитаться из нижнего. Используйте правый клик → «Bring to Front» / «Send to Back» для корректировки.

Ошибка 3: Невозможно отредактировать форму после объединения

Причина: объект стал единым вектором. Его уже нельзя «разобрать» на исходные фигуры без Undo.

Решение: используйте Ctrl+Z, чтобы отменить операцию. Чтобы избежать потери контроля, дублируйте слои перед объединением (Ctrl+D).

Ошибка	Причина	Решение
Операция не активна	Один из объектов — не вектор	Преобразуйте в вектор через Create Outlines
Неверная форма после Union	Объекты не перекрываются	Переместите фигуры так, чтобы был контакт
Intersect не даёт результата	Нет области пересечения	Увеличьте размер или переместите объекты ближе
Форма исчезла после Exclude	Объекты полностью совпадают	Сделайте один объект меньше или сместите его

Полезно знать: Figma сохраняет историю операций только до перезагрузки. Не полагайтесь на Undo при долгой сессии — делайте бэкапы проекта через File → Make a Copy.

Современные подходы: соединение через компоненты и фреймы

Булевы операции — не единственный способ «соединить» объекты. В современном дизайне часто используется композиция через компоненты, стеки и вложенные фреймы.

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

Когда использовать компоненты вместо булевых операций

Если элемент должен быть интерактивным (например, иконка меняет цвет при наведении).
Когда вы создаёте дизайн-систему и планируете переиспользование.
Если объекты должны масштабироваться независимо (например, автопозиционирование в реактивных фреймах).

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

«Я почти никогда не использую Subtract для иконок в интерфейсе. Вместо этого делаю фон и иконку отдельными слоями. Так проще адаптировать дизайн под тёмную тему, локализацию или динамические изменения.» — Дарья Ковалёва, lead product designer, Figma Community contributor

Также стоит упомянуть Plugins, которые расширяют возможности соединения. Например, плагин «Boolr» позволяет применять булевы операции к большему числу объектов одновременно, а «Union All» автоматически объединяет все выделенные слои.

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

«Молодые дизайнеры часто переоценивают важность булевых операций. Да, они мощные, но их чрезмерное использование ведёт к «запеканию» дизайна. Как только вы применяете Union, вы теряете гибкость. Вместо этого я рекомендую сначала спроектировать структуру через фреймы и компоненты, а булевы операции оставить для случаев, когда нужна именно уникальная векторная форма — например, логотип или кастомная иконка.» — Артём Лебедев, UX-архитектор, 12 лет в digital-дизайне

По его словам, в 2025 году 64% проектов в Figma используют компоненты как основу архитектуры. Булевы операции применяются лишь в 22% случаев, преимущественно на этапе иллюстраций и брендирования.

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

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

Можно ли соединить текст и фигуру в Figma?

Да, но сначала нужно преобразовать текст в вектор. Выделите текст, нажмите Ctrl+Shift+O (Create Outlines). После этого можно применять любые булевы операции. Однако учтите: после этого текст станет изображением — редактировать содержимое будет невозможно.

Как разъединить объекты после Union?

Figma не поддерживает «разделение» булевых операций. Единственный способ — отмена (Ctrl+Z) или использование версии файла до операции. Чтобы избежать потерь, создавайте дубликаты перед объединением.

Почему после Subtract остаётся обводка?

Если у объекта была обводка (stroke), она применяется ко всей новой форме. Чтобы убрать нежелательные линии, проверьте панель свойств: возможно, нужно изменить тип обводки или её расположение (Inside, Outside, Center).

Работают ли булевы операции в Figma Mobile?

Нет. На мобильных устройствах (iOS/Android) функционал ограничен. Булевы операции доступны только в десктопной и веб-версиях Figma.

Можно ли использовать Boolean Operations с Auto Layout?

Да, но с осторожностью. Векторные объекты после объединения ведут себя как обычные слои в Auto Layout. Однако если вы редактируете внутренние точки, это может нарушить выравнивание. Лучше использовать такие формы как конечный элемент, а не строительный блок.

Заключение

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

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

Используйте Union, Subtract, Intersect и Exclude для создания сложных векторных форм.
Следите за порядком выделения — он критически важен, особенно при Subtract.
Преобразуйте текст и группы в векторы перед применением операций.
Не злоупотребляйте булевыми операциями в дизайн-системах — отдавайте предпочтение компонентам.
Делайте резервные копии перед объединением, чтобы избежать потери редактируемости.

⚠️ Дисклеймер — нажмите, чтобы развернуть

Материалы, опубликованные в разделе «Блог» на сайте RU DESIGN SHOP (rudesignshop.ru), носят исключительно информационный и ознакомительный характер и не являются руководством к действию, финансовой рекомендацией, медицинской услугой, ветеринарным назначением либо рекламой товаров и услуг, включая азартные игры. Публикации не содержат призывов к участию в азартных играх и не направлены на продвижение соответствующих операторов.

Безопасность применения товаров и веществ: при использовании строительных материалов, бытовой химии, пестицидов и агрохимикатов необходимо строго следовать инструкциям производителя и действующему законодательству Российской Федерации, включая Федеральный закон РФ от 19.07.1997 № 109-ФЗ «О безопасном обращении с пестицидами и агрохимикатами».

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

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

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

Правовая ответственность: решения, принятые на основе опубликованной информации, пользователь принимает самостоятельно и на свой риск; редакция и авторы несут ответственность в пределах, установленных законодательством Российской Федерации.

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

Упоминание организаций с ограниченным статусом: компания Meta Platforms Inc. (социальные сети Facebook и Instagram) признана экстремистской организацией решением суда РФ, её деятельность запрещена на территории Российской Федерации; любые упоминания приводятся исключительно в информационных целях.

Авторские права и источники: информация собирается из открытых источников; её актуальность указывается на дату публикации и может изменяться.

Изображения и иллюстрации используются на условиях, разрешённых правообладателями. При возникновении претензий редакция готова оперативно рассмотреть обращение и внести необходимые изменения.

Персональные данные и cookies: сайт использует cookies и обрабатывает персональные данные пользователей в соответствии с Федеральным законом № 152-ФЗ «О персональных данных» и Политикой конфиденциальности RU DESIGN SHOP.

Мнения авторов могут не совпадать с позицией государственных органов или коммерческих организаций, упомянутых в материалах.