Figma Support Forum

Variant Override Preservation Implementation is Broken / Bad

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.

2 Likes

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

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

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.

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:
image

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

1 Like

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:

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

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

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

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?

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

1 Like

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…

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


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