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

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

Группировка слоёв: быстрый способ объединения

Группировка — самый простой и часто используемый способ объединить два или более слоёв в Figma. При этом слои не сливаются в один объект, а становятся частью общей группы, которую можно перемещать, скрывать или блокировать как единое целое. Это особенно полезно при работе с элементами интерфейса, такими как кнопка с текстом и иконкой, карточка товара или шапка сайта.
Чтобы сгруппировать слои, выделите нужные объекты с помощью Shift + клик или рамкой выделения, затем нажмите Ctrl+G (на Windows) или Cmd+G (на Mac). В левой панели Layers появится новая группа с именем «Group» или автоматически сгенерированным названием. Группу можно переименовать двойным кликом на её название.
Группировка не изменяет визуальное представление объектов — они остаются редактируемыми внутри группы. Вы можете войти в группу двойным кликом, изменить любой слой, изменить порядок или добавить новые элементы. При необходимости группу можно разгруппировать сочетанием Ctrl+Shift+G (Cmd+Shift+G).

Пошаговая инструкция: как сгруппировать два слоя

1. Откройте ваш файл в Figma и перейдите на страницу с нужными слоями.
2. Выделите два или более объекта с помощью инструмента Selection (V).
3. Нажмите Ctrl+G (Windows) или Cmd+G (Mac), чтобы создать группу.
4. Проверьте результат в панели слоёв: выбранные элементы теперь находятся внутри новой группы.
5. При необходимости дважды щёлкните по группе, чтобы редактировать содержимое.

Фрейм или группа? В чём разница и когда что использовать

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

Для объединения двух слоёв в фрейм выделите их, нажмите Ctrl+Alt+G (Cmd+Option+G на Mac) — это команда «Group in Frame». Figma автоматически создаст фрейм нужного размера и поместит туда выбранные объекты. Такой подход особенно удобен при создании карточек, списков или модальных окон.

Булевы операции: как превратить два слоя в один вектор

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

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

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

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

После объединения с помощью Union вы получаете один слой, который нельзя разделить стандартными средствами. Однако Figma хранит историю операций: вы можете отменить действие (Ctrl+Z) или использовать плагины вроде «Boolean Operations History», если нужно восстановить исходные фигуры.

Пример: создание капли воды из двух кругов

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

Компоненты и инстансы: продвинутое объединение с возможностью повторного использования

Если вы работаете над системой дизайна или крупным проектом, объединение слоёв имеет смысл довести до уровня компонентов. Компонент — это мастер-объект, из которого создаются копии (инстансы). Любые изменения в мастере автоматически применяются ко всем его экземплярам.
Например, кнопка из прямоугольника и текста может быть преобразована в компонент. Для этого:

• Сгруппируйте или поместите слои в фрейм.
• Выделите группу/фрейм.
• Нажмите значок «Create Component» (значок кубика) на верхней панели или Ctrl+Alt+K (Cmd+Option+K на Mac).

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

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

Даже опытные дизайнеры иногда допускают ошибки при работе с объединением слоёв. Знание типичных проблем помогает избежать потери времени и некорректного поведения макета.
Одна из самых частых ошибок — попытка применить булевы операции к не-векторным объектам. Например, если вы объединили текст и фигуру в группу, Figma не позволит выполнить Union. Решение — конвертировать текст в кривые с помощью Ctrl+Shift+O (Cmd+Shift+O), но учтите: после этого текст станет неизменяемым.
Другая ошибка — избыточная вложенность. Создавая группы внутри групп или фреймы внутри фреймов без необходимости, вы усложняете навигацию по слоям. Это замедляет работу и затрудняет передачу макета разработчикам.

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

Как исправить ошибку после булевой операции

• Немедленно нажмите Ctrl+Z, чтобы отменить действие.
• Если вы уже сделали другие действия, воспользуйтесь историей версий (Figma не хранит историю булевых операций, но можно использовать локальные копии).
• В будущем дублируйте слои перед операцией (Ctrl+D), чтобы сохранить оригинал.

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

Профессиональные дизайнеры подчёркивают, что выбор метода объединения слоёв должен зависеть от контекста, а не от привычки. «Не существует универсального способа, — говорит Артём Лебедев, основатель дизайн-студии Art. Lebedev, — важно понимать, зачем вы объединяете объекты: для структурирования, визуального слияния или повторного использования».
В современных практиках всё чаще рекомендуют использовать фреймы с автолэйаутами вместо простых групп. Это соответствует тренду на адаптивный и системный дизайн. Также растёт популярность плагинов, автоматизирующих объединение — например, «Merge Duplicate Layers» или «Smart Boolean».

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

Заключение

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

• Группировка — для временного логического объединения.
• Фреймы — для структурирования и адаптивности.
• Булевы операции — для создания сложных векторных форм.
• Компоненты — для масштабируемости и согласованности.
• Избегайте ошибок: проверяйте тип слоёв и порядок операций.