Figma Support Forum

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

So this is what I have:

  • A Toggle element variant with states for enabled, hover, and active states. I set the interaction on the enabled state to change to the hover state while hovering.
  • A toggle variant with 3 tabs and one variant for each one (because I need them to be mutually exclusive). I set the interaction on each tab to change to the corresponding tab on click.

When I place the component on a frame and change the text inside of each tab, it behaves well. Also when I switch the variants the text overrides are treated well.

When I play the prototype, the hover states behave as expected, but when I click on each tab, the text resets to “Label” instead of maintaining the override.

image
image

I’ve tried to delete the auto layout and still have the same problem, so I guess it’s not that. I guess it’s just a bug.

Hope it helps!

1 Like

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!

4 Likes

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

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 :man_shrugging:

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.

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!

2 Likes

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…

1 Like

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.

1 Like

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.

1 Like

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.

1 Like

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

1 Like

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.