Agree so much with this, as it would massively improve the usability of components as well as reduce the work required. At the moment, I’m creating components with nested variants, but in order to make it obvious what the component can do I’m creating variants of the top level component that changes the inner variants. A lot of work, but otherwise the nested capabilities are hidden/lost when people go to use the component 😢

Am curious to see how you are achieving this as I am having the same issue. Love auto layout and everything I can do with it be when our designers use the components the nested components require too many clicks

Here is example of my ‘icon button’, which has nested ‘icon’ component within its master

soo when I want to change icon inside to something i have to click inside and change it… so a lot of clicking…

I would kill for this kind of ‘Subvariant’ dropdown in right panel

I know this is dummy example but imagine if you have more nested components - example input fields

now it is done in 2 column way but imagine if you could create one component for area of text make 5 states of it… and create other component for different types of inputs… and make VARIABLE INTERACTIONS only for this states component… it would much more cleaner

I would kill for this feature 😃

If you use a variant component as a base component in another variant component, you can just change variations of the top-level component.

in order to get rid of making a huge number of buttons/inputs to have a variant button component, It’s good to show nested variation to change.

At this time if you have a nested variant component you should double click to go inside and edit change variation overrides.

I’m looking for something. like this

I do exaclt the same thing, where I work with layered/nested “base” components. I currently structure everything so that the color-variation is on “top”. But often, for example with buttons, I have to go many layers of components deep to hide an icon, or change some variant there. It would be great if we were able to just see options related to nested components from the top layer.

This idea can help the user to see nested properties without the need to click inside of an instance.

Here is an example of what I try to explain

Does anyone else find this useful?

I have built multiple components that contain nested components, all of which have variants. It would be fantastic if there was a way to see all variant controls for nested components within the selected “parent” component.

This way you don’t need variations just to control nested components.

@Moderators please merge these feedback all seems to be the same request

@devs This is one of the most peculiar thing that I observed, I mean you still can dig through the nested comps and switch variants so, why not have it up-front ? I’m very curious to know what technical or more likely UX block preventing this to be implemented.

well @devs ?

+1

This is an obvious evolution of the variants I am just waiting for the dev team to do this. Cannot comment on architecture and performance implications, but from the UX perspective of us users this is an necessity. I cringed when reading about poor souls creating components with 3000 variants. No way I am going near that.

Agreed, would love to have the variables of nested components surfaced when you click the main component. Would remove so many unnecessary clicks.

This is the feature everybody that pushes variants up to the limit needs. We need this!

okay now I’m real curious @devs

I’m working on a plugin that would surface all variants in selection and allow you to control them in one panel — I need your feedback. What do you think of the following UI options, which one would you prefer? Both views can be useful in different scenarios, so I also added a combined view.

1. 
   

   First one shows all separate variant components and their properties (good for working with nested variants).

   
   


2. 
   

   Second one simply shows all properties (they can be the same on different components, and you would be able to toggle them all at once for all components).

   
   

If you have any ideas or improvements for this UI, feel free to add your feedback or design your own screen in this file: Figma. You will also find a more detailed explanation of the options there.

Tagging the most involved people in this thread: @Saeed_Alipoor @Kenny_Estrada @Phil_Larsen @raghavdesi9ns @Kamila_Owsianka @Federico_Romano

P.S. The plugin is now live: Selection Variants plugin for Figma

That’s great. Last week I started making a plugin like this too. I will get in touch on the Figma file. Is this going to be open source?

Wow, what a coincidence! I’d love to chat with you more about this, feel free to DM me here or on Twitter. Not sure about open source yet.

wow, this is just great, 2nd option never occurred to me.

I always prefer more control so I would go with the combined version, but I love the intuitiveness of idea 2.

perhaps there could be a way out for the designer to dictate which of the parameters to be combined which of them not. it could be as simple as adding a ‘-’ prefix to the property or simply name the property something else.

Or properties could be nested in idea 2.

Looks like someone beat me to this idea in your file 👌

I would really like variant properties to propagate when I create new components and use existing components to do this.

Take this example; Here I use the existing Text Field component to create a drop down list. As you can see, the text field component has multiple properties. But once I create the new component, these properties are no longer visible. The only way to “access” these properties is by double clicking the component

Text Field

I hope this is a feature that is not too difficult to implement.

Hopefully this will be prioritized soon, it doesn’t seem that hard to implement and something like that will make managing complex components far more easier. Looking forward to this feature!

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.