Text Override doesn't work on nested variants with interactive components

It would be great if the structures didn’t have to be identical. It makes sense that the name of the layer is though. When dealing with slightly more complex components such as cards with specific auto-layout rules per card, the structure is going vary wildly. Maybe I’ve been using variants wrong.

I had the same problem with CTA buttons. Figma kept overriding the button text in different states. Renaming my layers solved the issue. Thanks a bunch!

SOLVED THIS ONE! MAKE SURE YOUR MAIN COMPONENTS TEXT IS THE SAME BETWEEN THE VARIANTS! FOR EXAMPLE IN BUTTON IN NORMAL STATE “CLICK HERE” AND A BUTTON IN HOVER STATE “CLICK HERE”. THIS SOLVES THE PROBLEM. SORRY FOR CAPS BUT I JUST WANT YOU TO SEE THIS. 🙂

Hi everyone 👋

I have the same issue (I think) not only for text but for any override.
I’ve been troubleshooting a bit and what I can reproduce consistently is:

• Have a button in 3 variants (contained / outlined / text) each with a few states (rest / hover / clicked / disabled).
• Have the Contained variant of the button nested inside another component (I’ll call it Card).
• Have the Card component have a Rest and Hover variant.
• Place an instance of Card and swap the button it contains for another variant (text variant).
• Override text, colors, anything.
• Apply such overrides across both Rest and Hover variant of the instance.

On prototype the overrides are lost 😦
Happy to share the file if anyone is so kind to help 🙏

Hey there community,

I’ve been experiencing the issue with incorrect override behavior. Had to troubleshoot for a while and here is what I found out.

I have a 2-layer Button component:

• Nested Text Container (Button label)
• The Button itself

Text container has variants (Text-only, Trailing, and Leading Icons)
Button component has Interactive states (Rest, Hover, Disabled, etc)

I didn’t create a full list of variants for the Button component with the corresponding base layer variants, just the bare minimum (Text-only container, check the screenshot)

It appears that the base layer won’t override as long as you don’t create variants with all the base variants (re-read please, I barely understood what I wrote for the first time lmao).
Recreating variants for all nested variants solves the overriding issues.

Hope this helps.

This is the best way to avoid this common problem:

1. Build a raw component design with every single element you may possibly ever need.
2. Name the raw component parent frame .raw-componentName. Leave this as reference for later.
3. Duplicate .raw-componentName and rename it .base-componentName
4. Make .base-componentName a new Figma component, e.g. ❖ .base-componentName
5. Duplicate ❖ .base-componentName (This creates an instance named ◇ .base-componentName).
6. Add Auto Layout to ◇ .base-componentName. Zero out padding and spacing.
7. Make the new Auto Layout [ ][ ]frame a new ❖ component and name it ❖ base-componentName (no period this time). You will likely will want to set the nested ❖ .base-componentName to Fill Container.
8. Add Variants and Properties to ❖ base-componentName for states and features by showing and hiding layers.
9. IMPORTANT: If you are going to make them interactive components, create one variant set first, make the set interactive, then duplicate the and show/hide for the next variant. The duplicates will inherit the interactive settings so you don’t have to repeat that step.

The results is that ❖ .base-componentName (no period this time) is nested inside of ❖ base-componentName. If you need to make sweeping changes, change the ❖ .base-componentName and those changes will be applied to all Variants simultaneously.

Base components are heavily debated, and have their pros and cons.

CONS:

• They can get very, very complex fast, so be ready for that.
• There can be problems with nested components not resizing correctly. (See #6 above)
• If you don’t get them right the first time (See #1 above) it can be a disaster to update an entire product or prototype and overrides can be lost.

PROS

• it makes updating a breeze
• Interactive states are a breeze

The FigFuture?

I am 99% sure all of the base components, and component nesting, and overrides will be vastly improved in the coming releases of Figma, so it may not be wise to go all-in on complex ❖ component builds if you don’t have too. For example, when Tokens arrive, you’re gonna wish you have used tokens… and now you’re gonna’ have to go back and redo or update a TON of variants.

This worked for me! Thanks so much 😀

The phrase that solved it all was: “If you want to have things preserved in states other than the initial state, they have to exist in the initial state”

So you dont really need to do anything too complicated like defining a .base whatever component, the only thing that needs to happen is that all the components need to exist in all the states, so dont delete them! just hide them!

Thanks so much for this, i was struggling with this for months!

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