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

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

Основы группировки объектов

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

Для группировки достаточно выделить два или более объекта с помощью Shift+клик или рамки выделения, затем нажать Ctrl+G (Cmd+G на Mac). В правом верхнем углу появится значок группы, а в панели слоёв объекты окажутся внутри папки с именем «Group».

• Вы можете переименовать группу в панели слоёв для лучшей организации.
• Двойной клик по группе позволяет редактировать её содержимое без расгруппировки.
• Чтобы выйти из режима редактирования, нажмите Esc или кликните за пределами группы.

Группировка особенно полезна при работе с интерфейсами: кнопками, карточками, шапками сайтов. Например, если кнопка состоит из прямоугольника, текста и иконки, объединение в группу позволяет легко копировать, перемещать и масштабировать её как единый элемент.

Как разгруппировать объекты

Если нужно внести изменения в отдельные элементы, группу можно быстро разгруппировать. Выделите группу и нажмите Ctrl+Shift+G (Cmd+Shift+G на Mac), или выберите в меню «Arrange → Ungroup». Все объекты вернутся в исходное состояние, сохранив свои свойства и положение.

1. Выделите группу.
2. Используйте горячие клавиши или контекстное меню.
3. Работайте с каждым объектом отдельно.

Булевы операции: как создавать сложные фигуры

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

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

Чтобы выполнить булеву операцию:

• Выберите минимум две фигуры.
• Убедитесь, что они перекрываются (кроме Union).
• Нажмите нужную иконку в панели сверху.
• Figma автоматически объединит контуры в один векторный объект.

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

Типы булевых операций и их применение

Каждая булева операция решает свою задачу. Разберём их подробно с примерами использования.

Пример: создание иконки конверта

Представьте, что вы проектируете иконку email. Нужен прямоугольник с треугольным клапаном. Как это сделать?

1. Нарисуйте прямоугольник — это корпус письма.
2. Добавьте треугольник поверх — это будет клапан.
3. Выделите оба объекта.
4. Нажмите «Объединить» (Union).

Теперь это единая фигура, которую можно масштабировать, заливать цветом и экспортировать как SVG.

Важно: порядок объектов при вычитании

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

Комбинирование против группировки: в чём разница?

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

Группировка — это логическое объединение. Фигуры остаются независимыми, но управляются как один блок. Булевы операции — физическое слияние контуров. Результат — новый векторный путь.

• После группировки вы можете дважды кликнуть и изменить каждый элемент отдельно.
• После булевой операции объект становится единым вектором. Чтобы редактировать части, нужно использовать «Detach» или «Release from compound path».
• Группы можно анимировать в Figma Prototypes как единый блок. Булевы формы — нет, если не вложены в фрейм.

Выбор между ними зависит от задачи:

• Нужно быстро переместить иконку с текстом? Используйте группировку.
• Создаёте логотип с уникальной формой? Применяйте Union.
• Делаете маску или вырез? Тогда Subtract или Intersect.

Альтернатива: использование фреймов

Иногда вместо группировки лучше использовать фреймы. Фрейм — это контейнер с ограничениями по размеру, который можно использовать как группу, но с дополнительными возможностями: скроллинг, padding, auto-layout.

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

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

Ошибка 1: Неактивные кнопки булевых операций

Вы выделили фигуры, но кнопки Union, Subtract и другие неактивны. Причина — среди выбранных объектов есть текст, растровое изображение или компонент.

Булевы операции работают только с векторными фигурами. Чтобы исправить:

• Преобразуйте текст в кривые: выделите текст и нажмите Ctrl+Shift+O (Cmd+Shift+O).
• Убедитесь, что все объекты — это shape, а не image или text.
• Если используется компонент — сделайте его экземпляр editable или разорвите связь (Detach Instance).

Ошибка 2: Невозможно редактировать части после Union

После объединения вы не можете изменить отдельные элементы. Это нормально: Union создаёт один векторный путь.

Чтобы вернуть возможность редактирования:

• Нажмите правой кнопкой на объект → «Detach Vector Network».
• Или используйте «Release from compound path» в панели свойств.

Теперь вы можете редактировать каждый контур отдельно, но они больше не будут объединены.

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

Вы хотели вырезать круг из квадрата, но получили обратный эффект. Причина — неправильный порядок выделения.

Решение:

• Сначала выделите фон (квадрат), затем вычитаемый объект (круг).
• Или измените порядок через «Arrange → Bring to Front / Send to Back».

Ошибка 4: Группа не реагирует на auto-layout

Вы добавили авто-расположение к группе, но оно не работает. Дело в том, что обычные группы не поддерживают auto-layout.

Решение:

• Преобразуйте группу в фрейм: выделите группу и нажмите «Frame» (F) или Ctrl+Alt+G.
• Теперь можно включить auto-layout и настроить отступы, выравнивание и направление.

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

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

Также эксперт отмечает важность именования. «Называйте группы и векторы осмысленно. Вместо “Group 3” пишите “Button with icon”. Это ускоряет работу команды и снижает количество ошибок при передаче макетов.»

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

Заключение

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

• Группировка (Ctrl+G) — для удобства управления несколькими элементами.
• Булевы операции — для создания сложных векторных форм.
• Порядок выделения влияет на результат, особенно при Subtract.
• Только векторные объекты могут участвовать в булевых операциях.
• Фреймы предпочтительнее групп при использовании auto-layout.