LAUNCHED: Nested variant component override controls

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 !

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.

Thanks a lot @Gleb this is AMAZING! you were so fast on building this, how do we push Figma to incorporate this natively?

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”.

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.

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:

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.

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

Thanks, @Federico_Romano. I post this because I need a native feature. Turns out that there is another person who posted a topic with the same issue, and my post ended up moving to here. And yes, there is a plugin made by @Gleb and I use it. But just like I said, hope there will be a native feature on Figma just like the sketch.

Thanks for replying to my post, Fed. And cheers to Gleb

Hey, there is super handy plug-in called SELECTIVE VARIANTS, but guys this should be native in figma.
Because how plugins works in figma (floating windows) it’s bothersome to use more than 1 plugin at time.
It’s time to make things happen & start doing what your community wants. 😉

Searching for selective variants turn up 0 results 🤔

Sorry it was selection variants… miss spell 😉

Sketch does this, why not Figma?? ::

if the topic gets enough votes Figma will incorporate it for sure, in the meantime, the plugin made by @Gleb works perfectly, but if you still want this as a native feature, just vote this topic and get more people to vote it

Suggest to look at Framer for attribute Settings. They have a great way to configure properties

Sketch does this, expose all overrides of all nested symbols when the parent is selected. It’s horrible in my opinion. I prefer the current behaviour to be the default, but, give us the option to individually expose whichever overrides we’d like for the parent to show.

Once you have a larger component in place, like a header with a login button and menu items. You’ve already defined the intricacies of whether that login button should have an icon or not at this point, so I don’t need that override to be getting in the way. What I might want to adjust would be the open and closed states of each menu item when I’m using that header component everywhere else. If I want an icon on that button I just make an adjustment once to the master component of the header.

In the simple example above I do actually prefer selecting each menu item and toggling between expanded and default, but when some components get a bit too complex, I’d like to be able to expose certain overrides when the parent is select.

@Gleb im so excited with the new Component Props update, does your plugin Selection Variants supports the new features?

No, a ton of code needs to be written to support those, it’s not a quick task (this feature was released just 12 hours ago haha).

i know, its the excitement 🤣 sorry