LAUNCHED: Nested variant component override controls

I think this need to be controlled at the child element but critical to implement.

Here is another example: Say you have a form.

On desktop all form inputs and buttons are 34px high and on mobile they are 44px. Furthermore, checkboxes have mobile variants as well.

So you create a form (parent component) with all these elements (sub component instances). If each of the sub components had properties where you could check (allow global control) on the property then you could add a mobile property to the parent component and when that’s toggled, all sub components that allow global control would toggle as well.

For the love of all that is good and holy, please prioritize this. Having to try and dig down to a nested component is an unnecessary pain. Would be good to use something akin to the sliding panel for selecting an instance override, but IN the panel rather than as a fly out, so you can pick which nested component to adjust.

1. Describe the problem your experiencing and how your idea helps solve this

• I use nested components with variants.
• I can choose to create a high level component that re-creates all the permutations. This is → Super time consuming, hard to maintain.
• Or I can choose to manually select the right nested instance in my component and change a variant. → This is tedious

2. Add as much context as possible (screenshots, Figma files, mockups, etc.)

• Selection Variants essentially does what Selection colors does but for the variants of the selected component instances.
• When I select a node or group of nodes I get a new section in the inspector with “Selected variants”
• I can see the instances “eg. Button” with variants in the selection. I click to expand that instance and see all its variants. Button shows “Big/Small”. When I change a variant it will apply to all the instances of that component.

You perfectly described my plugin (even the name!) — Selection Variants. It’s now published! Install here: https://figma.fun/switch

P.S. Pinning this as a solution for visibility but keeping this topic open since a native solution would be more ideal. 🙂

It’s absolutely amazing - thank you! It would be awesome to have it “docked”

on the right side when component is selected. It’s not probably possible - that’s not the way the plugins work but still something to dream of.

Plugin developers can only dream of such possibilities ahah. Thanks! Let me know if you have any more feedback or ideas.

Love the community initiative and getting this as a plug-in, thanks y’all!!

I’d still love to see this as a native feature, seems like the logical next step for variants and components.

(Also, sadly, many orgs do not allow third party plug-ins… 🙁 )

This is great Gleb! Something that I think should be a native feature in Figma, but maybe one day 🙂 Some thoughts/ideas:

• Would it be possible to make the dialog resizable, or possibly just bit wider? It has wrapping issues with longer component names (of which we have quite a few)
• I’d like to be able to modify internal variants separately e.g two button components on a dialog component. I can see you’ve bunched them and I understand why (and I remember you asking about this as well), but most of our composite components have situations like this
• Possible to display the component/variant description info as well (even if under a tooltip or similar?) We document the components and variants in there, and it would be handy to be able to see it in the plugin as we dig down the levels.

Thanks for all the hard work getting this up in the community 🙌

1. Definitely gonna add this in the future.

2. How would you like to see them? Maybe they can be “unfolded” from one (e.g. you see one with combined variants and then can “open” it to see them separately? Feel free to add some mockups to this file if you have any ideas: https://figma.fun/uxf00U. Or maybe if you want to control just one property on multiple instances separately you could unfold only this property (see some examples of this the file)?

3. Definitely gonna add this in the future.

Keep the ideas coming, love to see this!

This is amazing! Thanks @Gleb !