Figma Support Forum

Variants and overriding content

Hi all,

I’m wondering what’s your go-to workflow when working with variants.

Example 1: I create a button, convert it to a component, and then create another one that’s a standalone component, and combine them as variants. They are now independent and if I change something in the first one it won’t reflect on the other.

Example 2: I create a button, convert it to a component, then copy that button and make a variant out of it (so that the button instance is inside the newly created component - variant). This way whatever I do on the first one will reflect on the other as well.

The problem with the first one is that whenever I want to change something globally, I have to do it manually for all variants.

The problem with the second one is that if I do two states, default and hover, and change the variant in the right panel, its content overrides. That bothers me a lot because each time I want to show a developer how the hover effect looks like, I have to fix the content again.

What’s the best way?

Thanks,
David.

Bump

Hey David,

I use the second approach you described sometimes (using a “base component” within each variant component) but all my text changes are preserved perfectly when switching between variants.

What you might be missing is setting a custom name on that text layer inside of your base button component. You need to do this to preserve the text overrides. So rename the text layer to something like “Button Text” and then Figma will know that any text overrides on text layers with that name should be preserved.

Apologies if you know this already and some other weird thing is happening. Lmk if it works out for you.

Here’s a more detailed article on how the overrides work: https://help.figma.com/hc/en-us/articles/360039150733-Apply-overrides-to-instances

Hi @Brian_Saunders ,

Thank you for your reply and apologies for not getting back to you sooner.
I do know that we need to name our text layers the same in order to preserve the content, but I don’t think that’s the issue here.

I’ve created a sample Figma file so you could check it out yourself.

As you can see, both text layers are named correctly, and changing stuff in the master variant will refrect on the instance variant, but when changing states on an instance, the content gets replaced.

Please let me know if you find a solution to this.

Thanks in advance,
David.

I’m having the exact same issue. It sucks because the only way to resolve it is to make individual components of each variant type. Doing this means that any changes to the primary/default component will not propagate to all of the instances. The only other option is to edit the text every time you change the instance variant type. :-/

That sucks. So after all it’s not just me. I haven’t tried using atoms for the content inside yet, will get back with results after
I do. Anyone got a solution to this?

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.