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

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

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

Многие новички путают понятия «группировка» и «объединение». На первый взгляд, оба действия позволяют работать с несколькими объектами как с единым целым, но технически они выполняют совершенно разные функции.
Группировка (Ctrl/Cmd + G) — это логическое объединение объектов. Фигуры остаются независимыми, сохраняют свои стили, размеры и положение. Вы можете перемещать, масштабировать или скрывать всю группу, но редактирование формы требует входа внутрь группы. Это удобно для компонентов, иконок или блоков интерфейса, где важно сохранить внутреннюю структуру.
Объединение же — это физическое изменение геометрии. Оно возможно только через булевы операции и приводит к созданию одной новой фигуры из нескольких. После объединения вы теряете возможность редактировать исходные контуры по отдельности (если не используете варианты с Vector Network).
Представьте: вы рисуете значок «плюс» — два пересекающихся прямоугольника. Если вы просто сгруппируете их, при изменении одного из них форма останется прежней. Но если примените операцию «Объединить», получится единая сложная фигура, которую можно будет заливать одним цветом, применять один outline и редактировать как единый путь.

Булевы операции: как объединить фигуры в Figma

Булевы операции — основной способ объединения фигур в Figma. Они находятся в верхнем тулбаре при выделенных двух и более фигурах и включают четыре типа:

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

Для объединения используйте первую — Объединить. Например, чтобы создать облако сообщения из прямоугольника и треугольника-указателя, нарисуйте оба элемента, выделите их (порядок важен: указатель должен быть выше), затем нажмите «Объединить». Результат — одна цельная фигура.
Важно: после применения булевой операции объект становится vector. Вы можете редактировать его точки с помощью инструмента «Редактировать контур» (Edit Object), но исходные фигуры больше нельзя изменить отдельно — они «схлопнулись» в один путь.
Если вам нужно временно отменить объединение, используйте Ctrl/Cmd + Z. После сохранения файла восстановить отдельные фигуры без истории невозможно — поэтому эксперты рекомендуют дублировать слои перед операцией.

Пошаговый алгоритм объединения фигур

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

Когда булевы операции не работают: возможные причины

Иногда кнопка «Объединить» неактивна. Причины могут быть следующими:

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

Продвинутые методы: Path, Outline Stroke, Flatten

Помимо стандартных булевых операций, Figma предлагает мощные инструменты для глубокого контроля над формами.
Vector Network — технология, лежащая в основе всех векторных операций в Figma. В отличие от традиционных векторных редакторов (например, Illustrator), где пути строятся последовательно, в Figma точки могут соединяться в произвольном порядке. Это позволяет создавать сложные формы без необходимости постоянного объединения.
Например, вы можете нарисовать несколько линий, соединить их общими точками, и Figma автоматически интерпретирует их как одну фигуру. Это особенно полезно при создании иконок или абстрактных элементов.
Outline Stroke — ещё один способ «объединения» в широком смысле. Когда вы применяете обводку к фигуре, она остаётся контуром. Чтобы превратить её в заливку (то есть в реальную геометрию), используйте «Outline Stroke». Это создаёт новый вектор, который можно комбинировать с другими фигурами.
Например, у вас есть круг с толстой обводкой — вы хотите сделать из него кольцо, которое можно объединить с другим элементом. Просто примените «Outline Stroke», и обводка станет самостоятельной фигурой.
Flatten — менее известная, но очень полезная операция. Она «схлапывает» несколько слоёв (включая изображения, текст, фигуры) в один растровый объект. Это не векторное объединение, но иногда необходимо для экспорта или импорта в другие системы.
Однако будьте осторожны: после Flatten вы теряете возможность редактировать текст или векторы. Используйте только в крайних случаях.

Фреймы и группы: когда использовать?

Хотя фреймы и группы не объединяют фигуры физически, они играют ключевую роль в логической организации.
Группы (Group) — легковесный способ собрать объекты вместе. Они не имеют свойств вроде padding или auto-layout, но удобны для временного объединения. Группы не влияют на компоновку макета.
Фреймы (Frame) — это контейнеры с поведением. Они могут иметь размеры, отступы, скролл, а также поддерживать Auto Layout — ключевую функцию Figma для адаптивного дизайна.
Если вы объединяете элементы для прототипирования, анимаций или адаптивных компонентов — используйте фреймы. Если просто хотите перемещать несколько фигур — достаточно группы.

Auto Layout: продвинутое «объединение» с динамикой

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

Типичные ошибки и как их избежать

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

• Забывают дублировать слои — после Union нет кнопки «разъединить». Дублируйте перед операцией (Cmd+D).
• Пытаются объединить несовместимые объекты — текст, изображения, компоненты. Конвертируйте в векторы заранее.
• Игнорируют порядок слоёв — при Subtract и Intersect важен z-порядок. Верхний объект вычитается из нижнего.
• Слишком часто используют Flatten — это убивает редактируемость. Избегайте, если не экспортируете в PNG.
• Не используют Boolean Operations в компонентах — можно создавать варианты с разными формами, используя instance swapping.

Как исправить ошибку после объединения

Если вы случайно объединили не те фигуры:

1. Нажмите Cmd+Z (или Ctrl+Z) — самый быстрый способ.
2. Если история недоступна — найдите дубликат в другом слое или странице.
3. Используйте плагин «Undo Boolean» (если установлен).
4. Перерисуйте фигуру — иногда быстрее, чем искать альтернативы.

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

Профессионалы подходят к объединению фигур системно. Вот проверенные практики:

• Используйте Boolean Operations для иконок — 90% иконок в Material или Feather Icons созданы через Union, Subtract и Intersect.
• Создавайте шаблоны с предварительно объединёнными формами — например, каплевидные диалоги, стрелки, сложные кнопки.
• Комбинируйте Union с Masking — например, объедините фигуры, а затем используйте маску для скрытия части контента.
• Автоматизируйте через плагины — плагины вроде «Vectorizer» или «Iconify» могут автоматически объединять и оптимизировать фигуры.

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

Заключение

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

• Используйте «Объединить» для создания сложных векторных форм из простых фигур.
• Всегда дублируйте слои перед булевыми операциями.
• Применяйте фреймы с Auto Layout для логического объединения интерактивных элементов.
• Конвертируйте текст и обводки в контуры перед объединением.
• Избегайте Flatten, если не требуется растровый экспорт.