I can’t seem to wrap my head around this one so turning to you guys to see if I’m missing something.
Figma has recently launched Component properties which are great. But I’m having an issue with the instance swamp. I do not understand why an instance swap can’t call on variants, it has to be separate components.
Example: Simple button with Icon + Text. I would like to be able to swap out my icon within said button. For that I need to go to my icons (which are a huge number of variants) select a few icons that will be used inside my button, turn them into separate components (not child components anymore), rename them (to keep things organized) and only then willI be able to swap them around with the swap property.
I wish I could just swap within variants and not be limited to components.
Does this make sense? Am I the only one to run into this problem?
Looking forward to anyone’s opinions, feedback and suggestion.
Cheers
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.
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.
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
feels like it’s just complexifying things even more but i might be wrong