Detach instance в Figma: что меняется и когда это оправдано
Экземпляр компонента связан с мастером: меняете мастер — меняются все копии. Иногда эта связь мешает. Тогда экземпляр отвязывают, и он превращается в обычный фрейм. Разберём, как это делается и какие последствия стоит учитывать заранее.
Где находится команда
Три пути к одному действию. Первый: щёлкнуть правой кнопкой по экземпляру на холсте или в панели слоёв и выбрать Detach instance.
Второй: выделить экземпляр и открыть меню экземпляра в правой панели — там тоже есть пункт Detach instance.
Третий, самый быстрый: сочетание клавиш. На macOS это Option+Command+B, на Windows — Control+Alt+B.
Что происходит при отвязке
Figma превращает экземпляр в обычный фрейм. Слои и свойства сохраняются: всё, что вы успели переопределить, остаётся на месте.
Связь с мастером исчезает. Дальнейшие изменения компонента больше не влияют на этот объект.
Внешне объект почти не меняется. Но рамка выделения перестаёт быть фиолетовой, а в панели слоёв исчезает значок ромба, который обозначает экземпляр.
Что нельзя отвязать
Мастер-компонент отвязать нельзя. Команда просто не появится в меню, если выбран основной компонент, а не его экземпляр.
Это частая причина вопроса «почему у меня нет Detach». Решение такое: создайте экземпляр, отвяжите его, а мастер удалите, если он больше не нужен. Полученный фрейм останется на холсте и будет вести себя как обычный слой.
Зачем это нужно
Первая причина: нужны изменения, которые не поддерживаются свойствами компонента. Например, переставить внутренние слои, добавить уникальный элемент, изменить структуру вложенности.
Вторая: нужен отдельный объект, который лишь похож на компонент, но живёт своей жизнью. Скажем, рекламный баннер по мотивам кнопки.
Третья: из экземпляра делают новый мастер. Отвязывают, правят и снова превращают во компонент — сочетанием Control+Alt+K или Command+Option+K.
Что теряется
Главное — автоматические обновления. Если в библиотеке изменят отступы или цвет, отвязанный фрейм об этом не узнает.
Второе — связь с Design System Analytics в организациях Figma: такие инструменты считают, сколько экземпляров отвязано, и по этим цифрам видно, где компонент не подходит к задачам.
Третье — возможность быстро заменить экземпляр на другой через Instance swap. После отвязки это уже обычный фрейм.
О свойствах компонентов — в статье о свойствах компонентов.
Оверрайды остаются
Переопределения, сделанные до отвязки, сохраняются. Это важно: если вы настроили текст, иконку, размеры, всё это останется в фрейме.
Но связи между оверрайдом и свойством больше нет. Значение просто становится обычным свойством слоя.
Вложенные экземпляры
Если внутри экземпляра были другие экземпляры, они тоже станут фреймами. Иногда это неожиданно: дизайнер отвязывает одну кнопку, а внутри неё «рассыпается» иконка, которая была отдельным компонентом.
Проверьте структуру до отвязки, чтобы понимать, что именно потеряет связь.
Практика: баннер на основе кнопки
Скопируйте кнопку на отдельный фрейм, отвяжите её и переделайте под баннер. Мастер останется в библиотеке и продолжит жить своей жизнью, а баннер не будет ломаться при обновлении кнопки.
Практика: новый вариант
Если нужен сильно отличающийся вариант, иногда проще отвязать экземпляр, доработать его и создать новый компонент. Но сначала проверьте, не решается ли задача через вариант или свойство: это дешевле в поддержке.
О вариантах — в статье о вариантах компонентов.
Практика: правка чужой библиотеки
В чужом файле компоненты могут быть недоступны для правки. Отвязка экземпляра — законный способ сделать локальную версию.
Но такая копия перестанет получать исправления. Если библиотека обновится, вам придётся сравнивать вручную.
О библиотеках — в статье о библиотеке компонентов.
Когда лучше не отвязывать
Если нужное изменение поддерживается свойствами, лучше использовать их. Если не хватает варианта — добавить вариант в мастер. Если не хватает вложенности — пересобрать компонент.
Отвязка — крайняя мера. Каждый отвязанный экземпляр — это кусочек интерфейса, который больше не обновляется вместе со всеми.
Как отменить
Сразу после действия работает обычная отмена: Command+Z или Control+Z.
Если прошло время, обратного действия нет. Можно собрать компонент заново, но оверрайды и связи придётся восстанавливать вручную.
Где ломается
Не появляется команда. Выбран мастер, а не экземпляр.
Пропали обновления. Так и должно быть: связь разорвана.
Изменилась структура. Вложенные экземпляры тоже отвязались.
Не работает сочетание клавиш. Фокус не на холсте или выделен другой объект.
Хочу вернуть как было. Отмена работает только сразу.
Как это отражается на передаче в разработку
Для разработчика отвязанный фрейм выглядит как обычный слой: он не связан с компонентом в коде и не подсвечивается как часть библиотеки. Если в проекте принято генерировать код по компонентам, такой объект придётся описывать вручную. Поэтому перед отвязкой стоит спросить себя, не создаёте ли вы лишнюю работу на другом конце процесса.
Договорённость в команде
Полезно заранее решить, кто имеет право отвязывать экземпляры и в каких случаях. Например: можно, если задача не решается свойствами, и нельзя, если это просто «быстрее поправить руками». Второе правило сохраняет библиотеку живой, а первое оставляет свободу для нестандартных задач. Если отвязок становится много, это сигнал, что компонент нужно доработать, а не что дизайнеры ленивы.
Коротко
Detach instance превращает экземпляр в обычный фрейм, сохраняя слои и переопределения, но разрывая связь с мастером. Команда доступна из контекстного меню, из меню экземпляра и по сочетанию клавиш. Мастер отвязать нельзя: сначала нужен экземпляр. После отвязки объект перестаёт получать обновления библиотеки, поэтому прибегать к ней стоит только тогда, когда свойства компонента не покрывают задачу.
FAQ
Как отвязать экземпляр?
Правой кнопкой → Detach instance или Option+Command+B / Control+Alt+B.
Можно ли отвязать мастер?
Нет, только экземпляр.
Сохранятся ли переопределения?
Да, они остаются в виде обычных свойств.
Чем это грозит дизайн-системе?
Объект перестаёт обновляться вместе с компонентом.
Как сделать из экземпляра новый компонент?
Отвязать, доработать и нажать Control+Alt+K.