Как сделать переключение кнопок в instance — figma?

Question

[Katy93]

Прохожу уроки по фигма, не могу разобраться как сделать так чтобы можно было переключать instance, между компанентами в figma? вот пример анимированной гифки gif-файл. Если присмотреться сбоку есть знак в форме паузы как на проигрывателе.

Понятно, что автор как-то упаковал слои, но в статье не написано как это было сделано. Я перепробовала много разных вариантов но не смогла найти решение. Как это сделать?

Comments

[Rustam Bainazarov]

Справа есть панель с instance. Нужно выбрать корневой слой компонента.

«Знак паузы» — это визуальная иконка слоя, для которого был применен autolayout с горизонтальным направлением. Есть перевёрнутая «пауза» для вертикального autolayout.

[Katy93]

Я сделала почти как у автора на "гифки", выделяю frame2, а instance все равно не появляется сбоку где можно менять кнопки.

Answer 1

[Ольга Катанугина]

Здравствуйте!
Сделаем так:
1. создаем кнопку, называем ее buttons/first и превращаем ее в компонент
2. создаем еще одну кнопку, отличную от предыдущей, и называем ее buttons/second и превращаем ее в компонент
3. у нас 2 компонента. Из ЛЮБОГО делаем копию (экземпляр) и смотрим - у этого объекта в правой панельке появился выбор: first или second
Разделитель / (косая черта) помог figme распознать однотипные элементы и объединить их как бы в один класс buttons. Кстати, если не нравится разделитель / , то можно использовать, например, тире (-)