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.
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
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?
1 Like
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.
7 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 
Really really need to fix that one!
Tryed to change the names and everything like 10 times, did not work. @anon21722796 could you help me?
If you can share your Figma file here that will help troubleshoot.
@jonoyoung 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.
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.
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:
- you would already have set up global colour styles, and typographic styles ~ a few set up for buttons at least anyway.
- 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.
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:
Base includes all of the atoms that every other variant needs:
- Focus state
- icon left
- icon right
- 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:
2 Likes
(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.
1 Like
@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.
3 Likes