LAUNCHED: Nested variant component override controls

+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!