Figma Support Forum

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

Same here. I have a checkbox and a label in a component. I use that component from the library in other files, but when trying to change the text, the default text (label) does not change, the new text just shows over the old text.

@Figma @Figma_Support Have you guys receive the message that this bug is still not fixed?

This bug still exists. Here is an example using a checkbox:

  • Hover an item and the interactive component shows the hover state using Mouse Enter
  • The Hover state changes to Selected on Click and the label gets reset

https://www.figma.com/proto/Pcb9hXnEfTufPBmVQsSnzz/bugDemo-checkbox?page-id=0%3A1&node-id=2%3A144&viewport=336%2C48%2C0.81&scaling=min-zoom

Here is a screen grab of the layer names, maybe that is the problem? But not sure why only the Click/Selected State is affected by this bug.

There must be something I am missing?

PROBLEM SOLVED:
I had to go back into my Variant set and rename the nested base component so that it had the same name.

Layer Names Before:

Layer Names After:

Details
My mistake was that I nested a baes component that had a bunch of properties included in the name. When I made them all into variants, it wrapped my base component and name scheme in a new variant.

It is hard to explain the mess I created, but now I understand how to do this.

For anyone having this problem still, see if changing the nested base variant name the same fixes it for you.

4 Likes

Same here. I have huge problems with text overrides in dropdown as an interactive component.
I write new values in the text of dropdown list, but it taked the component text.
It seems to work in the figma file itself but breaks when i display it as a prototype :frowning: Really really need to fix that one!
Tryed to change the names and everything like 10 times, did not work. @Figma_Support could you help me?

If you can share your Figma file here that will help troubleshoot.

@Jono2 Here is my file. I am struggling with the dropdowns. Thank you so much for looking into it! Ive been struggling for the last 3 days with it.

@Jono2 I cannot attach .fig files or post links unfiortunately :frowning:

Save the file as a .fig file (from Figma File menu) then put the file on Dropbox or some other file share services and link to it here.

Or, share a screenshot of your Variant / Component set showing all of the layer names expanded - every group, frame, etc expanded.

@Jono2 here is my naming inthe component. I have problem with Dropdown List only.

What is the # Clip frame for?

It is hard to see the problem from the screen grabs.

Try renaming DropdownList > Item6 > 6, DropdownList > Item5 > 5, etc as:

DropdownList > item > text, DropdownList > item > text, DropdownList > item > text, etc. so each layer is named the same.

If that doesn’t work, send me a DM on Twitter http://www.twitter.com/chsweb and I will provide an email address that you can share the file with me.

If I’m guessing, the problem is in how the ❖ Listitem and ❖ DropdownList are built.

It is November of 2021 and it is quite concerning this hasn’t been fixed yet.

Ordinary Buttons do work at keeping text overrides. But in a segmented design environment eg. multi-options toggles aka “Segmented Controls” or “Toggles” ~ any text overrides still somehow reverts back to whatever the parent or atomic “base” structure was set.

The only seeming workaround to this as unintuitive it sounds - don’t use atomic base structure. That’s right - design your component, prototype / set interactives, style it via variants (dark mode toggles on/off, outline version on/off etc) as usual and use them as is. No complicated nested-upon-nested instancing. See my screenshot setup(s) as hypothetical examples.

The above workaround however pretty much defeats the entire purpose of keeping things diplomatic right at the atomic level through “base” or “structure” components. But for those who demands future proof management:

  1. you would already have set up global colour styles, and typographic styles ~ a few set up for buttons at least anyway.
  2. Also - you have Figma Tokens Plugin (though beware it has own share of problems). Set up and apply border radius or spacing tokens and apply those on your segmented controls, labels, forms, etc.

Anyway, the problem with this text override on nested instancing still persists since January 2020 = https://spectrum.chat/figma/general/swapping-an-instance-does-not-preserve-overide-text~e0f776d3-3c87-4191-92e8-2e71c2c9f23c

And I have tried the naming conventions as suggested here in reddit. Unfortunately still doesn’t work / still reverts to the “base” text = https://www.reddit.com/r/FigmaDesign/comments/l2p2r6/any_way_to_preserve_text_overrides_for_variants/

I’m having the same issue.

We use a simple hover info icon with a text bubble tooltip. Whenever I copy/paste the interactive icon it resets the text to the default.

I can’t even get the custom text to show up in a prototype, even when just copy pasting the hover icon on an empty frame and editing the text.

Please fix this Figma team, we’ve been using this feature in Adobe XD for ages and it’s such a headache that we have to send the text in a separate document to our developers.

@Omar_Chelbat

What @tank666 says is correct. If you are nesting a base component, that base component must have EVERYTHING that all of the other variants need to have.

This is my .base-button component:
image

Base includes all of the atoms that every other variant needs:

  1. Focus state
  2. icon left
  3. icon right
  4. dropdown menu

As you can see, when I nest the base component into my Variant, I am hiding all the atoms that I do not need to the default button state:

Here is my suggestion
Rebuild your base component with every single element/atom/state visible. Then, hide the elements/atoms/states that you do not need for each variant.

All Variants:

Variant Panel:

image

(Believe me) I have tried and am aware of the above .base method.

On complex nested upon nested variants, such as cards and heroes Text overrides still doesn’t retain changes at least in context of Dark mode toggles on/off in which they still stubbornly reverts back to whatever the “parent”, “master” or “base” component says.

I have spent days on this, frustrated.

If it were that easy as putting everything in their own “base” or “master” structure this thread would have been long solved. But the problem appears to be context specific. Sometimes text overrides does work, but in some cases doesn’t. Even if I adopt the above best practice in this case - putting everything diligently in their own master or “base” structures.

Or perhaps I’m just the “odd” one out.

Here’s a video I’ve uploaded (yt unlisted) on the problem I’m facing. Hope this resonates with someone else’s similar issues.

@Andrew16, the structure of your variants is different, so text overriding doesn’t work. In the “Dark mode = True” variant, you have additional nesting, which is not present in the “Dark mode = False” variant.

I made a quick example similar to yours in which text overriding works.

2 Likes