Why can't instance swap call on variants?

I don’t think there is a workaround yet, maybe with recently announced props bubbling you would get what you need, but right now it is kind of against of how Figma guys designed the system.

IMHO icons deserve to be a separate component, not a part of a single component set. How do you manage large icon set? They are not discoverable, scrolling endless list to pick a variant is a nightmare. Figma itself recommends to have each icon as a separate component.

Personally I use variants for various sizes and styles, so it is kind of the same glyph but with different flavors. It it works perfectly with new component props, I can use search to find an icon using assets panel or swap menu

Okay, I hear what you’re saying and I do agree with some of what you’re saying about icons.

I think my button example was the best suited for this topic. So I’ll put aside icons for the moment, and take an actual situation I’m currently working with.
I’m creating components for designers on my team to be able to create tables. I have a cell component in which i’m nesting some content components (various different types of content: values, tags, status, button, text, etc). These content components could be grouped together as variants. However if I do that then I can’t instance swap them from my cell component, they all have to be individual components.
It’s not necessarily a huge deal, but I do think managing variants is easier than a bunch of individual components.
I hope this becomes available quickly.

Well, there is a plug-in for that anyway - Selection Variants | Figma Community

I also ran into the same problem. I am currently designing a table component. This is built up out of a mother component controlling the size, borders, color scheme. Within this component I use a child component. I am going to use the child component for various content types. A label, checkbox, badges, avatars etc.

Now I"m only able to switch components instances available from the component list.

I still miss the property to switch/ change a variant of an instance in the component properties panel. The only way you can do it now is to select the instance it self (the child) within the mother component or use a plugin.

I’ve just ran into this exact problem! I can’t understand why we can’t select variants from the Instance swap property?

In my example, we have a search bar (iPhone & iPad) in our Navigation bar with various states and it makes the component so much simpler to have all the variants at the top level. Rather than having to select that nested component and change it from there.

I found this plugin by @Gleb and @richardguerre which i think resolves what you’re running into. Ideally this should just be what Figma lets you do anyway, but in the meantime use this. 😃

Just ran into this too, guys - what a miss from Figma. I think I’ve found a solution…

The work-around is to create separate Instance Swap properties for each of the different variants. Then set the variant you need to display by default in each instance. It’s clunky but works. The end-user (aka designer) will only see the the instance swap option for that variant.

Confused? Sorry this is hard to explain…

hi @Michael_Williams1,
Thanks for pitching in. I’m not entirely sure I understand you’re work around 🤔 feels like it’s just complexifying things even more but i might be wrong

Same issue has been posted here. And can be voted on.

Please implement this. Thank you Figma team!

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.