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