Как разъединить в фигме

В Figma разъединить объекты можно с помощью команды «Detach Instance» (для компонентов) или «Ungroup» (для групп). Основное правило — использовать правильный инструмент в зависимости от типа объединения: группы распускаются через Ctrl+Shift+G (Cmd+Shift+G на Mac), а экземпляры компонентов — через пункт контекстного меню или панель свойств. Главное — понимать разницу между группировкой и использованием компонентов, чтобы не нарушить систему дизайна.

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

Группировка vs компоненты: ключевые различия

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

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

Разъединение этих двух типов требует разных подходов. Если вы работаете с группой, достаточно её разгруппировать. Если перед вами экземпляр компонента — нужно выполнить операцию «отделения», чтобы получить независимый объект, который можно редактировать без риска повлиять на другие части проекта.

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

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

Процесс разгруппировки прост:

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

После разгруппировки вы можете свободно редактировать каждый элемент: менять размер, цвет, положение, добавлять эффекты. При этом важно помнить, что если вы случайно разгруппировали важный блок, всегда можно отменить действие сочетанием Ctrl+Z.

Когда разгруппировка недостаточна

Иногда после разгруппировки вы замечаете, что объекты всё ещё связаны — например, при редактировании одного элемента меняется другой на другой странице. Это означает, что перед вами не просто группа, а экземпляр компонента, содержащий внутренние группы. В таком случае сначала нужно отделить экземпляр, а уже потом разгруппировать его содержимое.

Как отделить экземпляр компонента

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

Чтобы отделить экземпляр:

• Выберите экземпляр на холсте.
• Щёлкните правой кнопкой мыши и найдите пункт «Detach Instance» («Отделить экземпляр»).
• Или воспользуйтесь панелью свойств справа — там будет кнопка с иконкой цепи, обозначающая связь с компонентом.
• После отделения объект перестаёт быть экземпляром и превращается в обычную группу или набор фигур.

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

Дополнительные возможности при работе с экземплярами

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

Но если вы хотите изменить структуру — например, убрать иконку или изменить расположение блоков — без «Detach Instance» не обойтись.

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

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

• Ошибка: попытка редактировать экземпляр без отделения. Результат — изменения не применяются или появляется сообщение «This is an instance». Решение — всегда проверять, является ли объект экземпляром, и при необходимости использовать «Detach Instance».
• Ошибка: разгруппировка вместо отделения. Разгруппировка не разрывает связь с компонентом. Вы можете разгруппировать экземпляр, но он останется привязанным к оригиналу. Решение — сначала отделить, потом разгруппировать.
• Ошибка: потеря связи после преждевременного отделения. Иногда дизайнеры отсоединяют экземпляр слишком рано, теряя возможность получать обновления. Рекомендация — отсоединяйте только тогда, когда уверены, что изменения должны быть постоянными и уникальными.

Проверочный чек-лист перед редактированием

1. Является ли объект группой? (иконка папки в слоях)
2. Является ли объект экземпляром? (серый квадрат в иконке)
3. Могу ли я добиться нужного результата через переопределения?
4. Нужно ли сохранять связь с оригиналом?
5. Готов ли я к тому, что изменения станут необратимыми?

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

По его словам, лучшая практика — использовать варианты компонентов (Component Variants) вместо множества отдельных экземпляров. Например, вместо того чтобы отделять кнопку и менять её цвет, лучше создать вариант с состоянием «disabled» или «success». Это сохраняет целостность системы и упрощает масштабирование.

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

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

Заключение

Работа с объектами в Figma требует чёткого понимания структуры: чем отличается группа от компонента, и какие действия допустимы в каждом случае. Разъединение — не просто техническая операция, а часть стратегии управления дизайн-системой. Неправильное использование «Detach» или «Ungroup» может привести к дублированию, потере согласованности и увеличению времени на поддержку проекта.

• Группы разъединяются через «Разгруппировать» (Ctrl+Shift+G).
• Экземпляры компонентов требуют «Отделить экземпляр» перед редактированием.
• Разгруппировка не разрывает связь с компонентом — только detach это делает.
• Используйте переопределения и варианты вместо отделения, где возможно.
• Отделяйте экземпляры только при необходимости создания уникальных элементов.