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

Вы работаете в Figma и столкнулись с необходимостью объединить два объекта — например, прямоугольник и круг — в единый векторный путь, чтобы создать сложную форму, упростить группировку или подготовить элемент для экспорта. Это частая задача у дизайнеров интерфейсов, иллюстраторов и UI/UX-специалистов. Неправильное объединение может привести к потере стилей, сбоям в автоматических макетах или некорректному экспорту в SVG. Понимание механизма объединения — ключ к точному и гибкому дизайну.

Что такое объединение в Figma и зачем оно нужно

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

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

В современном UI-дизайне объединение — не просто функция, а стандарт. По данным исследования Figma State of Design 2025, 87% профессиональных дизайнеров используют объединение как базовую операцию при создании векторных элементов. Это позволяет сохранять чистоту структуры файла, ускорять работу с компонентами и обеспечивать совместимость с разработчиками, которые работают с SVG-кодом.

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

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

1. Откройте файл в Figma и убедитесь, что оба объекта находятся на одном слое (не в разных фреймах или компонентах).
2. Выберите оба объекта: зажмите Shift и кликните по каждому, или проведите рамкой вокруг них.
3. Убедитесь, что объекты перекрываются хотя бы частично. Если они не соприкасаются, Figma не позволит объединить их — операция будет недоступна.
4. В правой панели свойств найдите раздел Boolean operations (Булевы операции).
5. Нажмите кнопку Union (объединение) — она выглядит как два перекрывающихся квадрата.
6. Альтернативно: используйте горячую клавишу Cmd + J (Mac) или Ctrl + J (Windows/Linux).

После объединения вы увидите, что объекты стали одним целым. Теперь вы можете изменять их форму через режим редактирования точек (Double-click или нажмите V → Enter), добавлять скругления, перемещать точки и корректировать контур вручную.

Объединение vs. Группировка: в чём разница

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

Группировка — ваш друг, когда вы хотите сохранить логическую структуру (например, кнопка с иконкой и подписью). Объединение — ваш союзник, когда нужно получить единый, чистый векторный объект. Используйте их в паре: сначала объедините формы, затем сгруппируйте с текстом.

Частые ошибки при объединении и как их избежать

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

• Ошибка 1: Объекты не перекрываются — Figma не позволит объединить непересекающиеся формы. Решение: немного сдвиньте объекты, чтобы они частично наложились. Даже 1 пиксель пересечения достаточно.
• Ошибка 2: Выделен текст без конвертации — текст нельзя объединить, пока он не превращён в контур. Решение: щёлкните правой кнопкой → Convert to Outline.
• Ошибка 3: Потеря стиля после объединения — Figma берёт стиль последнего выделенного объекта. Решение: перед объединением выделите объект с нужным цветом или градиентом последним.
• Ошибка 4: Объединение с прозрачными объектами — если один из объектов имеет нулевую заливку, он может «исчезнуть» в результате. Решение: временно задайте заливку, выполните объединение, затем верните прозрачность.
• Ошибка 5: Попытка объединить сложные компоненты — если объекты входят в компоненты, объединение может быть заблокировано. Решение: разверните компоненты (Override → Detach) или объединяйте их внутри компонента до публикации.

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

Продвинутые техники: вычитание, пересечение, исключение

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

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

Эти операции работают точно так же, как Union: выделяете объекты → выбираете операцию в панели свойств. Для быстрого доступа используйте горячие клавиши:
— Cmd + Alt + J — Subtract
— Cmd + Shift + J — Intersect
— Cmd + Option + J — Exclude (на Mac), Ctrl + Alt + J — на Windows

Реальные кейсы: когда объединение спасает проект

Рассмотрим три реальных сценария, где объединение становится критически важным.

Кейс 1: Иконка «Плюс» с кругом
Вы проектируете кнопку «Добавить». Нужна круглая кнопка с плюсом внутри. Если вы просто наложите линии плюса на круг — при экспорте SVG вы получите 5 отдельных элементов. Это увеличит размер файла, усложнит стилизацию и затруднит адаптацию. Объедините круг и линии плюса — получите один SVG-путь, который легко масштабируется и стилизуется.

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

Кейс 3: Дизайн для системных компонентов
Когда вы создаёте дизайн-систему, каждый компонент должен быть предсказуем. Объединённые формы — это единственный способ гарантировать, что разработчик получит один SVG-файл, а не 7. Это снижает количество багов в реализации и ускоряет релиз.

Экспертное мнение: как дизайнеры используют объединение в профессиональной работе

Екатерина подчёркивает, что объединение — это не просто техника, а методология. Она рекомендует:

— Всегда объединять формы до добавления стилей — так вы избежите конфликтов.
— Использовать имена слоёв вроде «Icon_Heart_Union» — это упрощает поиск в больших файлах.
— Не объединять элементы, которые могут меняться независимо (например, текст и иконку). Группируйте их.

Такой подход снижает количество правок в 5 раз и делает дизайн-систему масштабируемой.

Часто задаваемые вопросы

Заключение

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

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

• Объединяйте только векторные объекты, которые перекрываются.
• Используйте Cmd/Ctrl + J для быстрого объединения.
• Преобразуйте текст в контур перед объединением.
• Не путайте объединение с группировкой — они решают разные задачи.
• Сохраняйте исходные формы в отдельных слоях для возможности отката.