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

It was never a bug. The problem is that it is very easy to get it wrong.

In every post here, the layer names are the problem.

EVERY COMPONENT LAYER MUST HAVE THE SAME EXACT LAYER STRUCTURE AND LAYER NAMES. Simple hide or show layers for each variant and property.

It can get messy fast. It’s usually faster to start over.

This is a solution, I have come up with the same answer. The one note to add, the name of the hidden components SHOULD be the same.

Hi Everyone,

I stumbled across this topic because I’m having a similar issue but NOT IN THE EDITOR.
I only have this issue with the Prototype demo/page -

What happens is this

1. I override the text in one of the interactive variant components with custom text

2. Changing a variant property doesn’t break anything (my nested base is good)

3. In the Prototype page it resets to the default even though the text is different in the editor.

So basically my problem is that Text override is working with nested variants and interactive components but not working in the prototype demo

I think I had the same problem, but I managed to find a solution. I had a button group component consisting of 11 variants in which each of the 10 buttons were active (and one with no active buttons). The button I used was a component itself. My problem was, that when I renamed the button labels on my button group instance, sometimes (but not always?!) the labels would change to the labels in my button group component instead of the ones in the instance, when I clicked around in the prototype window - even though it seemed to work, when I cycled through the different variants in the editor. Very weird and quite buggy since I would at least expect to see the same behaviour each time, but sometimes it worked to just restart the prototype, and sometimes it seemed to me, that it would work if I clicked through the different instances slowly before clicking around like crazy, almost like Figma needed time to load all my different instance variants or something like that.

I found out, that I had accidentally changed the labels on the buttons in the button group component instead of just keeping the labels in the original button component. When I reset the text on the buttons in the button group component, everything worked. Hooray! But I still think something is buggy, since it would sometimes work with my original setup and sometimes not - it does not make sense to me, that it does not behave consistently.

This worked for me - Thanks!

I may be the odd one out here.

After so many times I thought I’ve settled this issue last year once and for all in by utilsing proper .base / structure layering trees.

I still cannot fathom nor understood why Figma still at times simply refuse to keep text overrides. I decided to overhaul my form inputs.

Even if I made a direct instance of an instance. You would think this would keep text overrides. But no. I kept everything down to microcosmic rule and atomic principle advocated. But still it doesn’t retain text overrides.

Once again, a serious question of inconsistency. No matter how much I followed .base / structure / nested instances one after another and keeping all text layers, text name, layer name etc all the same ~ It still does not retain text overrides even if I make an instance as a new component and use that elsewhere.

Maybe I’m just full of bad luck.

The problem and solution is always the same, however it is usually a huge ask to have someone in this forum QA another person’s work due to how overly complex variant set layers get.

100% of the time, the solution has been to make sure that every layer name in every instance / variant is the same. If a variant has a different layer structure, or if a variant has a layer that is renamed, the text overrides will break.

The base component must have all of the layers, for every state and every variation. Simple hide the unnecessary layers at first, then turn them on as needed for each variant.

Check every single layer, expand every layer, in every instance, and make sure the layer structure and names are identical. This is a requirement.

BlockquoteCheck every single layer, expand every layer, in every instance, and make sure the layer structure and names are identical. This is a requirement.> Blockquote

I hereby request an open assesment on my Drop Down section of my design system below ~ for anyone, to assess whether or not how I laid out my Drop Down components - from their .base/structures to usage case scenario is in any way abnormal or simply not “industry-standard” or not atomic-principle standard. I have checked every layer name to ensure they’re the same. I have inspected all titles, headers and text bearing exactly the same name as they were according to my .base / structure.

https://www.figma.com/file/1o9QPVe1vmwKztyZxe9A4O/Drop-Down-Troubleshooting-For-Figma-Community-Support

What you see is three artboards.

• First is the base structure and setup for the dropdown.
• Second is the testing ground and where I set initial text overrides.
• Third is the form builder area.

TLDR; When the drop down overall setup component is used in the .base form builder - It still somehow does not retain text changes in its variant open/closed states. Even if it appears to work ok during the Testing Ground / artboard #2.

Amongst other problems - Figma still struggles, lags and crash even in the most simplest of form prototyping (no smart animates, linear on/off, etc).

I appreciate your guidance.

Sincerely,
Andrew.

Make this easier to solve by:

1. Duplicating your file and changing permissions so that anyone can edit the duplicate
2. It is clear that many things are wrong, but it cannot be resolved in view/comment mode

Please share again when 1 and 2 are done.

@Jono_Young

Thank you very much for the prompt response.

Apologies as I am still on the free version of Figma, which understandably there are restrictions on permission adjustments. For some reason at first, it does not allow me to “move” the draft into a “project” as the move button is greyed. But in the end after a bit of mess around ~ I’ve managed to do it.

For what it’s worth, I’ve self-learned, over many months ~ all atomic principles, and .base management based off by many well known agencies Design System(s) (non disclosure of course). What I noticed, and can indeed confirm ~ that it appears common practice at using multiple .base / structures even at the most granular of all atoms; right down to the text itself.

I am curious as to how or why “many things are wrong” however nonetheless I look forward to your’s and/or anyone else’s next responses.

FYI, I am located in down under. Apologies if my timezone of responses are inconvenient.

Thank you, Andrew.

I understand. I’m east Coast US, but work with folks in Sydney. Happy tomorrow 🙂

I was gonna say save the file as a .fig and share as ZIP if necessary.

I was in the same exact situation as you with this problem - I’m way up in this same thread I think.

I am not suggesting you did something wrong, it is a bit confusing. Figma requires things to be done in a specific way, but doesn’t not do a great job of helping people follow the required way (yet).

What I would ask of you is, if I can help you, do your best to come back here and help someone else in the future. Help the next person who arrives with the same problem.

I’ve uploaded the Figma project onto my spare Google drive below.

Thank you once again will look forward to hear the feedbacks.

If anyone have any thoughts please share. Regards,

Andrew.

Please change Google Drive link to anyone with the link and then share the link.

Apologies, permissions adjusted. still troubleshooting manically here for nine hours straight non stop (other problems not this - other bugs, slow downs and the infamous spacebar-handle stuck, bricked my entire design system, hence had to roll back, and redid about 1.5 hours worth of work).

Thank you for chiming in your thoughts or feedbacks, I may not be able to respond much for the next few hours however please take your time as this is not in anyway urgent.

regards,

Never mind, I see you are on macOS. (was: Windows or macOS?)

Dear all,

Some time have passed and just wondering to see if there is anyone willing to come up with a feedback. Once again, I appreciate your thoughts. thank you. Andrew.

Hi!

Is this the same issue as this one regarding the overrides? Preserve overrides in instances swapped inside component.

I don’t know if this answer the question or solve something. But i also had som issues with variations of a checkbox that doesn’t keep the override if i for example change state from default to selected.

I experimented a bit and noticed that when i changed all the names of the label text layer to “Label” instead of them having unique layer names i noticed that the override works when i change between variants.

Yes @Joseph_Astorga - your assumption is 99.9% likely the problem. @Andrew16 needs to check every single variant’s layer stack and name to make sure they are identical.

@Andrew16 I tried to reproduce the problem, and I do not see anything wrong (aside from some minor shifting of text between states). Am I looking at the wrong area?

This is the link to where I am testing:

Use Comments there if that helps.

@Andrew16 upon deeper inspection, this may be the problem, as was suggested in the previous thread posts - the variant layer structure and names between variant must be identical.

In this example, the light mode variant for open and closed has a different layer structure.

@jonoyoung

Thank you very much for this, unfortunately, am beyond spent for the day. Will try to have a look at this tomorrow.

Here is a quick rebuild - not using styles or anything, but this is how I would build your menu. Dropbox - rebuild.fig.zip - Simplify your life

Dear Jono2 and all,

I believe I resolved it. All interactive states (grouped in their own layer) must also reside in all other instanced components.

My “RV” (shorthand for rollover state) state autolayout layer ~ somehow did not exist in the closed state. my mistake was that it was using an old component. I must have missed this in my hours of troubleshooting. So I went back to my base setup components and ensure that the correct roll over state layer exist and then hide/view them as necessary.

And it worked. the text overrides now working as it should. However took a bit a while (1-2 mins of) as Figma try to refresh dozens of screens of my design prototypes. But at last, all the text overrides in my dropdowns I’ve manually set in my Form Builder section of design system ~ now remain consistent to everywhere else exactly as I intended.

Jono2 thank you once again for your patience in this. Also thank you for providing me your proposed rebuild. You’ve done above and beyond for this. I hope I did not take away too much of your time.

Sincerely,andrew.

Happy to help and glad you got this resolved. My request to you is that you keep an eye on this thread, and see if you can help the next person that comes along with the same problem. It can be daunting to fix - a needle in the layer stack if you will.

I enjoy troubleshooting things like this. It keeps me sharp and it helps me help my team when they experience similar problems. I am @JonoTRHC and @Jono_Young and @jono2 somehow, due ot creating a number of Figma accounts in the early days of trials and demos. Wish I could merge.

It doesn’t work for me. not sure if im doing something wrong.

I’m trying to override the text in the hover state of a component. It works when I switch the design between the different states, but in protoype mode it changes back to the default label

[Figma](https://Figma file)