Do not override all properties on component variant swap

Currently variant swap acts as a complete component swap. All its properties get overridden and are not controlled by the master component anymore.

For example:

  1. I have a “tab” component with two states: “active” and “inactive”.


  1. Once I do a variant swap (set the first tab as “active”), the “tab text” property receives an override. At this step all still looks good, but…



  1. …if I want to change the text on the first tab from “Section 1” to “Section A” — I can’t. It’s not inherited anymore.


This was already raised on this forum as a question, but not as a feature proposal. So I’m adding one.

There is a workaround

  1. I pack all component states into a single auto-layout frame and make that a component. If I need an active tab, I switch off the visibility of the inactive part.



  1. Now all works as it should

Screenshot 2024-03-12 at 14.40.42

  1. But it gets very clumsy / hard to maintain if I have hovers, or I have not 2 states but 5 (primary, secondary, error, etc.) or I use component property as a breakpoint switch.

It would be great to be able to swap variants without losing connection between all properties which were not changed by the swap.

That would allow, for example, create a variant per breakpoint and inherit that breakpoint value from the theme (set in variables).

Hello @Viacheslav_Poliakov1, Thank you for posting this as a feature request! Your feedback is highly valued.
I also appreciate you sharing the fantastic workaround for this!

I think this idea will benefit other members of the community too. So we’d love to see the reaction, please feel free to vote for this idea!


Preserving property settings and overrides is honestly expected behavior, I would consider this a bug and not a feature request. Although the workaround works, it’s still a hack and does not scale well, as OP mentioned.

1 Like


Very old issue… But still here.
I had already created a Feature request for it (3 years ago now!)