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.
14 Likes
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.
4 Likes
- 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
- 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. 
11 Likes
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… 
)
1 Like
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 Like
-
Definitely gonna add this in the future.
-
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)?
-
Definitely gonna add this in the future.
Keep the ideas coming, love to see this!
1 Like
Thanks a lot @Gleb this is AMAZING! you were so fast on building this, how do we push Figma to incorporate this natively?
We’re building an atomic design system. One thing that has come up multiple times that would be really nice to have is the ability to control the variants/overrides of nested components.
For example, we have a button component that uses variants and variant properties to control button size (sm, md, lg), button state, whether it has an icon or not, etc. To keep the system atomic we then nest that button component in other components, for example, a header component. But we want to limit the header component to only accept sm buttons and not md or lg while keeping other variant attribute overrides intact like state.
Could there be a similar locking mechanism like how locking a nested component will block any overrides at all, could we somehow lock specific attributes? for example lock the variant attribute for size.
that doesnt sound like this feature request at all, try opening a new thread for that, this is for enabling editing nested variant properties in the same panel, and luckly, its progressing
It was a new thread but it was moved into this thread for some reason.
Sorry for the confusion, the title is pretty much the same to this topic, so it was merged. I just reopened your topic. I would suggest writing a title that better reflects the idea, like “Limit override options of nested components”.
1 Like
I have an idea that is relevant to this so I’m not sure if this should be a separate post but I’m posting it here for now.
OP have asked for controls for nested variants overrides, but I would like to be able to expose any overridable property of my choosing to the top level parent, not only variant options.
Consider something like using spacing to create a variable progressbar. It’s technically possible to create one with only 1 depth of nesting, allowing the spacing to be controlled from the top in the hierarchy. However, this requires overflowing content so this component can’t be used in an autolayout without overlapping neighboring objects. The solution is to wrap it inside a frame but then the spacing property disappears from the root parent. Aarrgh.
And this is only a simple progressbar. More complex components would include a mix of overrides, like spacing, visibility, color, etc. and of course variants as already discussed.
Being able to put these controls to the front would make it possible to create more intuitive design systems. Now you’d need to create a tutorial for those uninitiated.
It could work by choosing to add a property from a context menu:
or maybe even quicker to add it with a
ctrl/cmd+click.
Then it would appear on the component root layer, just how the solution functions for this topic. But it would be great if it also were possible to rename the property to better communicate what function the control serves in the component.
I really wish something like this can be done.
1 Like
Hello! As I told in another one topic I am trying to create most detailed and automated design-system as I can create. This is a kind of challenge to me 
I have really big super-nested components. With 6-7 nests. And I want to set-up their attributes on a main component, that will include all the attributes from all nests of that component. Uff, I know sounds crazy, let’s see an example:
Just FYI this is just a 2 nests of 1 component.
So I have this component that have 3 attributes on the right panel
Then this component is using inside of this component that have a 1 attribute:
But the problem that on this step I want to see the attributes of the nested component. I mean finally I want to see 4 attributes, not just one. Because it is legacy and on final step I want to see all attributes on each nest on the final component
You will ask what kind of problem are we solving? So I don’t want to create all variations of nested components in the final component
Sorry for my English, I hope that anybody could understand what I mean
P.S. And why you can’t allow new users to send more images in one post. I could upload more screenshot to make this topic more understandable 
Thank you!
Hi Figma,
Please help me to easily switch variants of components inside a component.
If the component consists of small components then the sidebar also displayed the components in it to make it easier to replace variants for each of those components
Did you read this topic? there is already a plugin developed by @Gleb based on the discussions of this forum that works like a charm, please read this post, not just write something at the end