Variant Override Preservation Implementation is Broken / Bad

[RowanW]

I’m not sure what the thinking is with the way variant overrides are preserved is, but it seems wrong to me…

Why respect the placeholder stuff from my base component over edits made to the component instances? The whole point of variants seems to be to make swapping styles / states of components easier, but it doesn’t work as far as i can tell?

How would I make my text / nested icon overrides preserve in this use case?

I see there is some internal uncertainty over whether the current approach is right, and lots of people obviously struggling with this.

Am I missing something? Or have the wrong choices been made in the current implementation ?

Reading the docs on this, it feels slightly confusing, but as far as i can tell i’m doing things right, but still unable to achieve the desired result.

[Fred_Tinsel]

I’m in bed so I can’t confirm what I’ll say
To my mind your text layer do not have the same name

[RowanW]

All the layers have the same names, they are based off a reused component for the button size in question:

[Eduardo_Pratti]

Rename your Icon components in the main component to Right/Left or Start/End icons and try again. Figma won’t be able to tell which one you want to keep and will preserve whatever it finds.

[RowanW]

Cheers! Just tried that but it didn’t seem to help…

With different names for different icons:

Still reset my overrides when i changed the style type variant:

[Jan_Six]

Your btn-sm/primary/icon right/default vs. .../secondary/... button component instances have different names. rename that in the Button primary component to e.g. ButtonBase

[RowanW]

That layer name is derived from the original variants…

It seems to reset on its own when i change the variant:

given that these names are baked into how variants work, I can’t see how or why they should impact overrides:

[RowanW]

Here is a version of my figma file reduced down to just the buttons and icons.

Figma

I’m using base components for each button size as suggested in Figma best practices: Creating and organizing Variants.

[RowanW]

Here is an editable file i made from scratch, and as simply as possible.

Variant overrides are not preserved as you would expect for the most basic use case - changing the state or type of a button - following best practices

Figma

[Liza_Plotnikova]

I’m having similar issues and I swear it didn’t use to be broken for me. Is anyone else having trouble with nested icon overrides?

[Miguel_Solorio]

+1 to wishing nested variants would preserve when changing the parent state. I’ve got instances where a nested variant has +20 states and the thought of multiplying that into my parent component is stressful.

[RowanW]

So it seems the solution to this is to rename all your nested layers after creating the variants.

It’s still an odd implementation IMO, because naming the components differently is how you generate the variants in the first place…

So you then have to manually ‘undo’ that step after grouping the variants in order for things to work as expected…

[RowanW]

Tip:

If you have a lot of layers to rename…

• Select all layers within variant
• Press ‘enter’ to select the next level down in the layers
• Now you can batch rename them

[Lucky]

I’m having the same problem, and I tried all the solutions suggested here.

[KubaA]

For me text overrides are maintained but the icon override is not.

The overrides are lost upon second-level nesting.

[Timj]

For me variant component icons are not honoring color overrides. This is probably a bug I can’t see it being an acceptable implementation exception. The use case is crystal, icon button variant (of buttons) swap icon, icon should still be same color as variant design main.

[KubaA]

@Timj - icons’ colors are maintained. Make sure you give the shapes within icons the same names.

[Timj]

By the shapes do you mean the vector networks within the icons - its too late for that I have 100’s icons with different vector network names. It’s useful to know this is the controlling factor.

[RowanW]

Heres what the naming scheme of my icon component looks like, and it works ok:

[dennsi]

Well, somehow this broke for me throughout this day.
I’m currently working on relatively simple Link and Button components which are each combined to Variants.
When placing a button component into a layout I could change the text and states without any problems. But within the last hour or so this doesn’t seem to work for other components which have the same layer structure and architecture in terms of property and value naming conventions.
Huh… weird.