Работа с объектами в Figma — это не просто перетаскивание фигур по холсту. Это система управления визуальной иерархией, которая определяет, насколько быстро вы создаёте макеты и насколько легко их поддерживать. Начинающие дизайнеры часто сталкиваются с хаосом в слоях, теряют элементы в структуре и тратят часы на простые правки. Умение правильно объединять объекты — это фундаментальный навык, который отличает организованный профессиональный подход от любительского беспорядка. В этой статье я покажу, как использовать группировку, компоненты, фреймы и Boolean операции так, чтобы ваши проекты работали как швейцарские часы ⚙️
Основные способы объединения объектов в Figma
Figma предлагает несколько инструментов для объединения объектов, и каждый решает конкретную задачу. Понимание различий между ними — это то, что превращает новичка в уверенного пользователя интерфейса. Рассмотрим четыре ключевых метода, которые составляют основу работы с объектами.
Группировка (Group) — самый простой способ объединить несколько элементов в единую структуру. Выделите объекты и нажмите Ctrl + G (Windows) или Cmd + G (Mac). Группа позволяет перемещать элементы вместе и организовывать иерархию слоёв без изменения их свойств.
Фреймы (Frames) — это контейнеры с мощными возможностями Auto Layout, которые структурируют содержимое и определяют его поведение. Фреймы незаменимы при создании адаптивных интерфейсов, так как позволяют задавать правила расположения дочерних элементов.
Компоненты (Components) — это переиспользуемые элементы дизайна, которые обновляются одновременно во всех местах применения. Создание компонента из повторяющихся объектов экономит время и обеспечивает консистентность проекта.
Boolean операции — инструмент для объединения фигур на геометрическом уровне. Union, Subtract, Intersect и Exclude позволяют создавать сложные формы из простых примитивов, что критично для иконок и кастомных графических элементов.
| Метод | Назначение | Горячая клавиша | Редактируемость |
| Группировка | Организация элементов | Ctrl/Cmd + G | Полная |
| Фреймы | Структурирование с Auto Layout | Ctrl/Cmd + Alt + G | Полная + правила |
| Компоненты | Переиспользование элементов | Ctrl/Cmd + Alt + K | Через экземпляры |
| Boolean операции | Геометрическое объединение | Нет | Ограниченная |
Выбор правильного метода зависит от контекста: группировка для быстрой организации, фреймы для адаптивных блоков, компоненты для системных элементов, Boolean операции для создания форм. Понимание этих различий позволяет строить масштабируемые дизайн-системы, а не просто коллекции картинок.
Алексей Морозов, UI/UX дизайнер
Год назад я работал над лендингом с 15 идентичными карточками услуг. Как идиот, я копировал их вручную и правил текст в каждой. Клиент попросил изменить иконки — я потратил два часа на правки. Коллега посмотрел на файл и спросил: "Ты что, компоненты не используешь?" Я тогда даже не понимал разницы между группой и компонентом. Следующий проект я уже строил правильно: мастер-компонент карточки и 15 экземпляров. Правка заняла 30 секунд. Это был момент, когда я понял: инструменты Figma — не просто функции, это философия работы 🎯
Группировка элементов для удобной организации макета
Группировка — это первый инструмент, который осваивают новички, и последний, который действительно понимают профессионалы. Это не просто способ "склеить" объекты вместе, а методология организации визуальной структуры проекта. Грамотная группировка превращает панель слоёв из свалки в читаемую иерархию.
Чтобы создать группу, выделите несколько объектов и нажмите Ctrl + G (Windows) или Cmd + G (Mac). Группа появится в панели слоёв как контейнер, содержащий выбранные элементы. Важно: группа не создаёт собственных границ — её размер определяется содержимым. Это отличает её от фрейма, который имеет фиксированные или настраиваемые размеры.
Правила эффективной группировки
1️⃣ Логическая целостность
Группируйте элементы, которые концептуально связаны: текст с иконкой, заголовок с описанием
2️⃣ Именование групп
Всегда переименовывайте группы описательно: "Header / Navigation" вместо "Group 47"
3️⃣ Вложенность
Создавайте иерархию: группа кнопок внутри группы навигации внутри группы хедера
Практический пример: представьте карточку товара. Она содержит изображение, заголовок, цену, рейтинг и кнопку. Новичок создаст пять отдельных объектов и будет мучиться с их перемещением. Профессионал сгруппирует текстовую информацию (заголовок + цена + рейтинг) в группу "Info", затем объединит её с изображением и кнопкой в группу "Product Card". Результат: один клик перемещает всю карточку, структура понятна, правки не вызывают хаоса.
Разгруппировка выполняется комбинацией Ctrl + Shift + G (Windows) или Cmd + Shift + G (Mac). Используйте её, когда нужно изменить структуру или извлечь элементы из группы. Частая ошибка — создание избыточных вложенных групп без необходимости, что усложняет навигацию по слоям.
- Группируйте интерактивные элементы отдельно: кнопки, ссылки, формы — чтобы быстро находить их при настройке прототипирования
- Используйте префиксы в именах: "btn_", "icon_", "text_" для мгновенной идентификации типа элемента
- Не группируйте то, что должно быть компонентом: если элемент повторяется, создайте компонент, а не дублируйте группы
- Применяйте маски внутри групп: для обрезки изображений по форме используйте Clip Content в настройках группы
Группировка не влияет на Auto Layout и не создаёт constraints — это её ограничение. Когда вам нужна адаптивность или фиксированные размеры, переходите к использованию фреймов. Группа — это организационный инструмент, а не структурный контейнер с правилами поведения.
Создание компонентов для повторяющихся элементов дизайна
Компоненты — это сердце дизайн-системы в Figma. Это не просто копии объектов, а связанные экземпляры, которые наследуют изменения от мастер-компонента. Один раз настроил — везде обновилось. Отказ от использования компонентов в проектах любого масштаба — это профессиональное самоубийство ⚠️
Чтобы создать компонент, выделите объект или группу и нажмите Ctrl + Alt + K (Windows) или Cmd + Option + K (Mac). В панели слоёв появится фиолетовый значок компонента. Теперь каждая копия этого элемента (экземпляр) будет автоматически получать изменения, внесённые в мастер-компонент.
Анатомия компонента
🎨 Мастер-компонент
Главный объект, который определяет структуру и базовые свойства всех экземпляров
📦 Экземпляр (Instance)
Связанная копия, которая наследует изменения структуры, но может иметь уникальный контент
⚡ Варианты (Variants)
Состояния компонента (normal, hover, disabled), объединённые в один компонентный набор
Варианты компонентов — это то, что делает Figma действительно мощной. Вместо создания отдельных компонентов для каждого состояния кнопки (default, hover, pressed, disabled), объедините их в компонентный набор. Выделите несколько компонентов и нажмите на значок плюса в правой панели свойств, затем выберите "Combine as variants". Теперь у вас есть единый компонент с переключаемыми состояниями через свойства.
| Тип элемента | Нужен компонент? | Причина |
| Кнопки | ✅ Обязательно | Множество экземпляров, разные состояния |
| Иконки | ✅ Обязательно | Повторное использование, единый стиль |
| Карточки товаров | ✅ Обязательно | Идентичная структура, разный контент |
| Формы ввода | ✅ Обязательно | Консистентность, валидация состояний |
| Уникальные иллюстрации | ❌ Не нужен | Используются однократно |
| Разовые декоративные элементы | ❌ Не нужен | Нет повторного применения |
Переопределения (overrides) позволяют изменять содержимое экземпляров без потери связи с мастер-компонентом. Вы можете менять текст, заменять вложенные компоненты (например, иконку в кнопке), изменять видимость слоёв. При этом структурные изменения в мастер-компоненте (добавление элемента, изменение размера) автоматически применятся ко всем экземплярам.
Мария Степанова, продуктовый дизайнер
На старте карьеры я игнорировала компоненты — казалось, проще скопировать кнопку вручную. Проект вырос до 80 экранов, клиент попросил изменить радиус скругления всех кнопок с 8px на 12px. Я провела в Figma 4 часа, обновляя каждую кнопку вручную и пропуская половину. После этого я научилась создавать компонентную базу перед началом работы. Следующий аналогичный запрос занял 15 секунд: один клик в мастер-компоненте, и 200+ экземпляров обновились мгновенно. Это был урок на всю жизнь 💡
Организация компонентов критична для крупных проектов. Создайте отдельную страницу "Components" или "Design System" и размещайте там все мастер-компоненты. Используйте слеши в именах для создания структуры: "Button / Primary / Default", "Button / Primary / Hover" — это автоматически создаст иерархию в Assets Panel.
- Создавайте компоненты из атомарных элементов: сначала иконка-компонент, затем кнопка-компонент, содержащая иконку
- Используйте свойства компонентов: создавайте переключатели для показа/скрытия элементов (например, кнопка с иконкой и без)
- Документируйте компоненты: добавляйте описания в панели свойств, чтобы другие дизайнеры понимали назначение
- Публикуйте библиотеки: если работаете в команде, публикуйте компоненты как библиотеку для использования в других файлах
Отсоединение экземпляра от мастер-компонента (Detach instance) превращает его в обычную группу. Используйте эту функцию только когда нужно радикально изменить структуру конкретного экземпляра, понимая, что он больше не будет получать обновления. В 90% случаев правильнее создать новый вариант компонента, чем отсоединять экземпляр.
Использование фреймов для структурирования объектов
Фреймы (Frames) — это эволюционировавшая версия артбордов из других редакторов, но с гораздо большими возможностями. Это контейнеры, которые не только группируют объекты, но и определяют их поведение через Auto Layout, constraints и clip content. Фреймы — это основа адаптивного дизайна в Figma 📐
Создать фрейм можно тремя способами: нажать F и нарисовать область, выбрать готовый пресет из правой панели (iPhone, Desktop и т.д.) или выделить объекты и нажать Ctrl + Alt + G (Windows) или Cmd + Option + G (Mac) для создания фрейма вокруг них. Последний способ особенно полезен при рефакторинге существующих макетов.
Ключевое отличие фрейма от группы — constraints (ограничения). Они определяют, как дочерние элементы ведут себя при изменении размера родительского фрейма. Элемент может быть привязан к левому краю (Left), правому (Right), центру (Center) или растягиваться (Scale). Это критично для создания адаптивных интерфейсов, которые корректно выглядят на разных размерах экранов.
Auto Layout: революция в структурировании
↔️ Автоматическое расположение
Элементы выстраиваются в ряд или столбец с заданными отступами, никакой ручной подгонки
📏 Адаптивный размер
Фрейм автоматически подстраивается под содержимое или заполняет доступное пространство
🔄 Динамическое добавление
Добавьте элемент — всё перестроится автоматически, без ручной корректировки позиций
Auto Layout превращает фрейм в интеллектуальный контейнер. Выделите фрейм и нажмите Shift + A для активации Auto Layout. Теперь при добавлении новых элементов внутрь они автоматически выстроятся с заданными отступами. Измените текст в кнопке — кнопка автоматически расширится. Удалите элемент из списка — остальные сдвинутся, заполняя пробел. Это то, как должен работать дизайн-инструмент.
Вложенные фреймы с Auto Layout создают сложные адаптивные структуры. Например: фрейм "Card" содержит вертикальный Auto Layout. Внутри него фрейм "Header" с горизонтальным Auto Layout (аватар + имя), фрейм "Content" с текстом и фрейм "Actions" с кнопками в горизонтальном ряду. Результат: карточка адаптируется к любому содержимому, кнопки всегда выровнены, отступы консистентны.
- Используйте Padding для внутренних отступов: это расстояние от границ фрейма до содержимого, задаётся в настройках Auto Layout
- Настраивайте Gap для интервалов между элементами: единый spacing упрощает поддержку визуальной согласованности
- Применяйте Hug contents для кнопок и тегов: фрейм будет подстраиваться под размер текста
- Выбирайте Fill container для растягиваемых элементов: например, текстовое поле должно занимать всю ширину формы
- Комбинируйте Absolute positioning для исключений: если элемент должен игнорировать Auto Layout (например, badge поверх аватара)
Clip content — свойство фрейма, которое обрезает содержимое по границам контейнера. Активируйте его, когда создаёте карусели, карточки с изображениями или любые области с фиксированными размерами. Без этой опции дочерние элементы могут выходить за пределы фрейма, нарушая композицию.
Фреймы поддерживают Layout Grid — систему модульных сеток для выравнивания элементов. Добавьте Grid через правую панель свойств фрейма: колоночные сетки для десктопа, базовые линии для текста, центральные направляющие для мобильных интерфейсов. Сетка не влияет на поведение элементов, но помогает размещать их с математической точностью.
Вложенные фреймы создают изолированные контексты для constraints и Auto Layout. Дочерний фрейм не наследует Auto Layout родителя автоматически — это даёт гибкость для создания сложных композиций. Важно понимать иерархию: изменение настроек родительского фрейма влияет на расположение дочерних фреймов, но не на их внутреннюю структуру.
Boolean операции: пересечение, вычитание и объединение фигур
Boolean операции — это геометрические трансформации, которые позволяют создавать сложные формы из простых примитивов. Это математика векторной графики, превращённая в интуитивный инструмент. Для иконок, логотипов и кастомных UI-элементов Boolean операции незаменимы 🔺
Figma предлагает четыре типа Boolean операций, доступных в панели инструментов после выделения двух или более фигур:
- Union (Объединение): создаёт единую форму из всех выделенных объектов, объединяя их области
- Subtract (Вычитание): вырезает верхние объекты из нижнего, создавая отверстия или вырезы
- Intersect (Пересечение): оставляет только области, где объекты перекрываются
- Exclude (Исключение): убирает области перекрытия, оставляя только непересекающиеся части
| Операция | Описание | Типичное применение |
| Union | Объединяет все формы в одну | Слияние букв в логотипе, упрощение многослойных форм |
| Subtract | Верхний объект вырезается из нижнего | Создание отверстий, иконки с вырезами |
| Intersect | Остаётся только пересечение | Маски, сложные органические формы |
| Exclude | Удаляет области перекрытия | Ажурные паттерны, декоративные элементы |
Практический пример: создание иконки уведомления. Нарисуйте круг (основа колокольчика) и прямоугольник со скруглёнными углами (язычок). Примените Union для объединения. Затем нарисуйте маленький круг в правом верхнем углу для индикатора количества. Если нужно вырезать отверстие в основной форме, используйте Subtract. Результат: сложная иконка из трёх простых фигур и двух Boolean операций.
Этапы работы с Boolean операциями
1. Подготовка форм
Создайте базовые примитивы (круги, прямоугольники, многоугольники) и расположите их в нужной конфигурации
2. Выбор операции
Выделите объекты и выберите соответствующую Boolean операцию из верхней панели инструментов
3. Редактирование результата
Boolean группа остаётся редактируемой: можно изменять исходные формы, их позицию и даже тип операции
4. Flatten (опционально)
Для финализации превратите Boolean группу в единую векторную форму через Flatten Selection
Важная особенность Boolean операций в Figma — они неразрушающие. Результат операции создаёт Boolean группу, внутри которой сохраняются исходные формы. Вы можете войти в эту группу двойным кликом и редактировать отдельные элементы, изменять их размер, позицию или даже тип Boolean операции. Это даёт огромную гибкость при итерации дизайна.
Flatten Selection (Ctrl + E на Windows или Cmd + E на Mac) превращает Boolean группу в единую векторную форму с объединёнными точками. Используйте Flatten когда дизайн финализирован и вам нужно уменьшить сложность структуры файла или экспортировать форму как единый SVG. Учтите: после Flatten редактирование отдельных исходных фигур становится невозможным.
- Порядок объектов критичен для Subtract и Exclude: верхние объекты в стеке слоёв определяют области вычитания
- Комбинируйте операции последовательно: сначала Union для объединения группы фигур, затем Subtract для создания вырезов
- Используйте Boolean операции для масок: Intersect создаёт эффект маскирования без использования Clip Content
- Оптимизируйте производительность: сложные Boolean группы с десятками форм могут замедлять рендеринг — упрощайте или делайте Flatten
- Создавайте компоненты из Boolean форм: иконки после Boolean операций можно превращать в компоненты для переиспользования
Boolean операции поддерживают работу с обводками (Strokes) — результирующая форма может иметь собственную обводку, независимую от исходных фигур. Это полезно при создании иконок с единой толщиной линии после объединения нескольких элементов разной формы. Настраивайте параметры обводки в правой панели свойств после применения операции.
Сложные иконки часто требуют комбинации нескольких типов операций. Например: создайте иконку папки — прямоугольник со скруглёнными углами для основы, маленький прямоугольник сверху для выступа (Union), затем два круга для создания выреза ручки (Subtract). Экспериментируйте с порядком операций: иногда два Subtract дают лучший результат, чем один Exclude.
Ограничения Boolean операций: они работают только с векторными фигурами, не с текстом, изображениями или сложными группами. Чтобы применить Boolean операцию к тексту, сначала конвертируйте его в кривые через Ctrl + Shift + O (Windows) или Cmd + Shift + O (Mac). Учитывайте, что после этого текст перестанет быть редактируемым как текстовый слой.
Инструменты объединения объектов в Figma — это не изолированные функции, а взаимосвязанная система управления структурой дизайна. Группировка обеспечивает организацию, компоненты гарантируют консистентность, фреймы создают адаптивность, Boolean операции формируют геометрию. Мастерство не в знании каждой кнопки, а в понимании, когда применять каждый инструмент. Профессиональный дизайнер не думает "как это сделать" — он думает "какой метод оптимален для этой задачи". Начните применять эти принципы в следующем проекте: создайте базовую систему компонентов, структурируйте макеты фреймами с Auto Layout, организуйте слои логическими группами. Через месяц вы откроете свои старые файлы и ужаснётесь, как работали раньше 🚀
