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

Hey,
when I recreate it, it seems to be working for me. Any chance that you could share your file and I can take a look into the structure?

— Niko

Hi Niko, sure. Here it is:

Yeah, ok, I played around with it a bit and I’m pretty sure it’s a bug. I’ll file it and thanks a bunch for the file!

I’m having a similar issue creating drop down menus. The overrides work at first, then they eventually stop working and show only the main component text.

Weirdly, if the button is outside a main component, the hover action shows the default text for the button and menu, then reverts to the overridden text for the button on mouse out. However, if it’s inside an instance, the hover shows the default button and menu text AND retains the default text on mouse out.

Here’s a link to an example: Figma

I’ve created a simple dropdown menu with a couple options. Each Option is a component with hover and pressed states itself. In my dropdown component I wired up the interactive states to choose between options. When using the component as is, all the variants behave as expected, meaning all text overrides for the specific option names stick across variants. But when I actually play the prototype, the naming overrides only show up at the start. Once I start selecting an option from the dropdown menu, all text overrides fallback to their generic names. I’m happy to upload a file for debugging purposes but don’t know how. Thanks for your help.

Same here. As soon as I add any interactions to the nested components in this file: Figma
the text overrides simply stop working, apparently at random. Sometimes one of them sticks, sometimes it doesn’t 🤷

You don’t need to upload the file, simply share a link to it and make sure that in the Share menu it’s set to “anyone with the link can view”.

I’m having the same kind of issue with my files, not with all components (as I could check) but a card component don’t get the override texts correctly

Hey folks - this should have been fixed recently. If you’re still experiencing the issue, can you let us know? Thanks!

How should this be constructed for it to work correctly @Andrew_Chan? I’m still seeing my overrides change to the default button label. The same happens with the icons on my buttons: they are replaced with the default/initial icon…

Hey @RichPeniche, the setup in the original post should work. If you’re experiencing issues, could you share a file with me via DM? You can make sure I have access by inviting me through email: achan@figma.com.

Hi! I’m having the same issue, but with tabs.

I made three variants to show each of my tabs. When I manually switch to another tab I can add overrides (like hide an element, change color, or even select another variant of a nested component). But when I play the prototype, it only shows the overrides on the tab I have set as active on the design, all “hidden” variations just use the default variation and ignores all overrides.

E.g. I have three tabs (Active, Invited, and Disconnected). On the design, the Invited tab is open, but I added some overrides to the disconnected tab. When I play the prototype, if I click on the disconnected tab I see its default version, it ignores the overrides. But if I go back to the design and set “Disconnected” as active or visible, then the overrides DO show up on the prototype. Not sure if I’m doing something wrong.

I am experiencing the same issue with buttons overrides. They are built as interactive components. The overrides changed to default button label as I play the prototype

Experiencing the same issue, really weird.
And it’s not as simple as keeping the layer names the same.

Here’s a file to test it out:
https://www.figma.com/proto/kM0a1HfNhe2kQNYjA3mof5/Test?page-id=0%3A1&node-id=1%3A59&viewport=501%2C48%2C0.82&scaling=min-zoom

@Andrew_Chan Please have a look at this file.

I am experiencing this continuously with nested components and I blamed my structure until I read this post. It’s not just text. Other overrides are affected too.

@nikolasklein @Andrew_Chan I’ve added a use case to the OPs original Figma file that demonstrates when this still doesn’t work as of today.

I’m having the same issue. But mine is because the element that I’m trying to override doesn’t exist in the default variant.

Use case: Select dropdown, a list of options pop up on click. When I try to override the options on a component instance, it doesn’t apply on the preview.

A workaround for this is to make sure that the layer you’re editing also exists in the default instance. Please fix this, it would be a hassle when the component gets big and I’ll have to show/hide layers in the default variant.

Yes. I experience the same issue with icons.

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 @anon21722796 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.

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.