LAUNCHED: Nested variant component override controls

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 ?