Как в фигме разгруппировать компонент

В Figma разгруппировка компонента — это процесс, позволяющий редактировать отдельные элементы внутри группировки или экземпляра компонента. Основное правило: если вы работаете с экземпляром компонента (Instance), его нужно отвязать от основного компонента (Detach Instance), чтобы получить возможность изменять внутренние объекты. Если же речь идёт о простой группе (Group), достаточно использовать команду «Ungroup».

Что такое компонент и группа в Figma

Figma — мощный инструмент для совместной работы над дизайном интерфейсов. Одним из ключевых преимуществ платформы является система компонентов, которая позволяет создавать переиспользуемые элементы, такие как кнопки, карточки, навигационные панели и другие UI-блоки. Компонент — это мастер-объект, на основе которого создаются экземпляры. При изменении основного компонента все его экземпляры автоматически обновляются.
Группа — это просто объединение нескольких объектов (фигур, текстов, иконок и т.д.) в один слой. Группировка помогает организовать макет, упрощает перемещение и масштабирование элементов. В отличие от компонентов, группы не имеют связи между собой и не синхронизируются при изменениях.
При этом часто возникает путаница: пользователь видит блок, состоящий из нескольких элементов, и хочет его «разгруппировать», но не может — потому что перед ним не группа, а экземпляр компонента. Именно поэтому важно понимать, с чем вы работаете: с группой, компонентом или экземпляром.

Отделить от компонента или разгруппировать — в чём разница?

Многие начинающие дизайнеры путают два разных действия: «разгруппировать» и «отвязать от компонента». Хотя результат внешне может быть похож, технически это совершенно разные операции.
Разгруппировка (Ungroup) применяется к группам объектов. Она разъединяет составляющие элементы, позволяя работать с каждым из них отдельно. Например, если вы сгруппировали иконку и текст, команда Ungroup разделит их на независимые слои.
Отвязка от компонента (Detach Instance) — это процесс преобразования экземпляра в обычный набор слоёв, который больше не связан с мастер-компонентом. После отвязки вы можете менять цвет, размер, структуру и содержимое, не влияя на оригинальный компонент и другие экземпляры.

Когда использовать каждый способ?

• Используйте Ungroup, когда хотите редактировать отдельные элементы внутри уже существующей группы, например, изменить положение текста относительно иконки.
• Используйте Detach Instance, когда вам нужно кардинально изменить дизайн одного экземпляра, например, добавить новую иконку или изменить структуру карточки, не затрагивая другие места использования компонента.

Как отвязать экземпляр компонента в Figma

Процесс отвязки экземпляра прост, но требует точности. Вот пошаговая инструкция:

1. Выберите нужный экземпляр компонента на холсте с помощью инструмента Selection (V).
2. На панели свойств справа найдите кнопку Detach Instance. Она находится под названием компонента.
3. Нажмите на кнопку. Экземпляр перестанет быть связанным с мастер-компонентом.
4. Теперь вы можете дважды щёлкнуть по объекту, чтобы войти внутрь и редактировать отдельные слои.

Альтернативный способ — использование горячих клавиш. На Windows нажмите Ctrl+Alt+B, на macOS — Cmd+Option+B. Это быстрее и удобнее при активной работе.

Что происходит после отвязки?

• Слой становится обычной группой с именем, соответствующим оригинальному компоненту.
• Все внутренние элементы (текст, фигуры, иконки) можно редактировать без ограничений.
• Появляется возможность применять эффекты, изменять порядок слоёв, добавлять новые объекты.
• Если ранее использовались варианты компонентов (Component Properties), они исчезнут после отвязки.

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

Если вы работаете с обычной группой, а не с экземпляром компонента, разгруппировка выполняется проще. Вот как это сделать:

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

После разгруппировки вы можете:

• Перемещать каждый элемент отдельно.
• Изменять их свойства: цвет, размер, обводку.
• Применять анимации или эффекты в Prototyping.
• Удалять ненужные части без влияния на остальные.

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

Если вы случайно разгруппировали элементы или хотите восстановить структуру, выберите нужные слои и нажмите Ctrl+G (или Cmd+G на Mac). Также можно использовать кнопку Group на верхней панели.

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

Работа с компонентами в Figma кажется простой, но даже опытные дизайнеры допускают типичные ошибки. Вот самые частые из них:

• Попытка разгруппировать экземпляр как группу. Пользователь жмёт Ctrl+Shift+G, но ничего не происходит. Причина — это не группа, а экземпляр. Решение: использовать Detach Instance.
• Случайная отвязка компонента без необходимости. Иногда дизайнер отвязывает экземпляр, просто чтобы изменить цвет, хотя мог использовать overrides. Это ломает систему компонентов.
• Изменение отвязанного компонента вместо создания нового варианта. Вместо того чтобы добавить новый вариант в библиотеку, дизайнер отвязывает и правит вручную. Это снижает масштабируемость.
• Потеря контроля над слоями после разгруппировки. Особенно актуально для сложных компонентов с десятками вложенных объектов. Лучше предварительно дублировать слой перед разгруппировкой.

Как проверить тип объекта?

Прежде чем действовать, убедитесь, с чем вы работаете:

• Если в правом верхнем углу объекта есть иконка квадрата с галочкой — это экземпляр.
• Если в панели свойств есть кнопка “Detach Instance” — точно экземпляр.
• Если в списке слоёв объект помечен как [Instance] — тоже указание на компонент.
• Если объект просто называется “Group” и нет кнопки detach — можно смело разгруппировывать.

Экспертные советы по работе с компонентами

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

• Используйте Overrides вместо отвязки. Если нужно изменить текст, цвет или скрыть элемент — делайте это через override, не отвязывая экземпляр. Это сохраняет целостность системы.
• Создавайте варианты компонентов (Variants). Вместо множества отдельных компонентов объедините их в один с параметрами: size, state, icon visibility. Так проще управлять и меньше шансов ошибиться.
• Документируйте правила использования. В команде установите чёткие правила: когда можно отвязывать, а когда — нет. Например: «Отвязка разрешена только для уникальных случаев, которые не будут повторяться».
• Используйте плагины. Плагины вроде Component Manager или Instance Finder помогают быстро находить и анализировать использование компонентов в файле.

Когда стоит отвязывать экземпляр?

• Когда элемент используется только один раз и требует кардинального изменения.
• Когда нужно провести A/B-тестирование дизайна без влияния на основной компонент.
• Когда вы работаете над прототипом и экспериментируете с формой.
• Когда компонент устарел, и вы хотите создать на его основе новый.

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

Заключение

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

• Экземпляр компонента нельзя разгруппировать — его нужно сначала отвязать (Detach Instance).
• Горячие клавиши ускоряют работу: Ctrl+Alt+B (отвязать), Ctrl+Shift+G (разгруппировать).
• Отвязка разрывает связь с оригиналом — используйте её только при необходимости.
• Всегда проверяйте тип объекта перед редактированием.
• Сохраняйте системность: используйте варианты и overrides вместо массовой отвязки.