Фигма как разобрать компонент

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

Что такое компонент в Figma и зачем его разбирать

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

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

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

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

Процесс разборки прост, но требует внимательности. Ниже — подробный алгоритм действий.

1. Выберите экземпляр компонента на холсте с помощью инструмента выбора (V).
2. Щёлкните правой кнопкой мыши по элементу и найдите в контекстном меню пункт «Разобрать экземпляр».
3. Или используйте горячие клавиши: Shift+Cmd+B (на Mac) или Shift+Ctrl+B (на Windows).
4. Убедитесь, что элемент стал обычным слоем. В правой панели свойств пропадёт значок компонента, а в дереве слоёв исчезнет символ «» рядом с названием.

После разборки вы можете свободно изменять любой атрибут: размер, цвет, текст, внутреннюю структуру. Например, если у вас была кнопка с иконкой, вы можете удалить иконку или изменить её положение.

Что происходит после разборки

После разборки экземпляр перестаёт быть динамическим. Он больше не реагирует на изменения в основном компоненте. Например, если вы позже добавите тень к оригиналу, разобранный элемент останется без неё.

Также важно: если компонент содержит вложенные экземпляры (например, иконка внутри кнопки — тоже компонент), они остаются связанными, пока не будут разобраны отдельно. То есть разборка основного элемента не затрагивает его внутренние компоненты автоматически.

Когда стоит разбирать компоненты, а когда — нет

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

• Разбирайте, если: нужен уникальный дизайн одного элемента (например, акцентная кнопка на лендинге); требуется изменить структуру (удалить часть слоёв); работаете с макетом, который больше не будет синхронизироваться с библиотекой.
• Не разбирайте, если: изменения нужны временно; вы работаете в команде и нарушаете дизайн-систему; планируете в будущем обновлять все элементы сразу.

Если вы сомневаетесь, рассмотрите альтернативы:

• Используйте переключаемые свойства (например, цвет, текст, видимость) через параметры компонентов.
• Создайте вариант внутри существующего компонента, если различия типовые (например, primary/secondary).
• Примените override — встроенные переопределения, доступные прямо в правой панели.

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

Новички часто совершают одни и те же ошибки, которые ведут к хаосу в проекте. Разберём самые распространённые.

Ошибка 1: Разборка вместо создания варианта

Многие дизайнеры разбирают компонент, чтобы изменить цвет или текст, хотя достаточно использовать override или добавить вариант. Это нарушает целостность дизайн-системы.

Ошибка 2: Массовая разборка при презентации

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

Ошибка 3: Отсутствие документации

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

Ошибка 4: Разборка в библиотеке

Случайная разборка мастер-компонента в библиотеке может сломать всю систему. Figma не позволяет разобрать сам оригинал, только экземпляры, но путаница всё равно возможна.

Продвинутые сценарии: вложенные компоненты и варианты

В реальных проектах компоненты редко бывают простыми. Часто они содержат вложенные экземпляры, параметры и условия. Рассмотрим, как работать с такими случаями.

Представьте кнопку, внутри которой иконка (тоже компонент) и текст. У такой кнопки может быть несколько состояний: активная, неактивная, загрузка. Если вы разберёте кнопку, иконка останётся экземпляром — вы сможете её заменить, но она по-прежнему будет связана со своей библиотекой.

Чтобы полностью отвязать и иконку, нужно:

1. Разобрать кнопку (Shift+Cmd+B).
2. Выделить вложенный экземпляр иконки.
3. Повторить разборку для неё.

Теперь оба элемента — полностью независимы.

Работа с параметрами

Если компонент использует параметры (например, Boolean для переключения видимости), разборка сбрасывает все значения. Вы получите статичную копию с текущим состоянием.

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

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

Она рекомендует внедрять чек-лист:

• Нужно изменить один экземпляр? → Использовать override.
• Нужно новое состояние? → Добавить вариант.
• Нужно радикальное отличие? → Создать новый компонент.
• Только если ничего не подходит → разобрать.

Такой подход снижает количество разобранных элементов на 60–80% и ускоряет работу над крупными проектами.

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

Заключение

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

• Разборка отвязывает экземпляр от мастера и делает его независимым.
• Используйте Shift+Cmd+B (Mac) или Shift+Ctrl+B (Windows) для быстрой разборки.
• Взвешивайте необходимость: чаще помогают параметры и варианты.
• Избегайте массовой разборки — это усложняет поддержку проекта.
• Храните оригиналы — на случай, если потребуется восстановить связь.