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

@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 :slight_smile:

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.

1 Like

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.

Skärmavbild 2022-02-08 kl. 16.53.55

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.

1 Like

@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

1 Like

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.

2 Likes

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.

2 Likes

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)

It would be great if the structures didn’t have to be identical. It makes sense that the name of the layer is though. When dealing with slightly more complex components such as cards with specific auto-layout rules per card, the structure is going vary wildly. Maybe I’ve been using variants wrong.

I had the same problem with CTA buttons. Figma kept overriding the button text in different states. Renaming my layers solved the issue. Thanks a bunch!

SOLVED THIS ONE! MAKE SURE YOUR MAIN COMPONENTS TEXT IS THE SAME BETWEEN THE VARIANTS! FOR EXAMPLE IN BUTTON IN NORMAL STATE “CLICK HERE” AND A BUTTON IN HOVER STATE “CLICK HERE”. THIS SOLVES THE PROBLEM. SORRY FOR CAPS BUT I JUST WANT YOU TO SEE THIS. :slight_smile:

3 Likes

Hi everyone :wave:

I have the same issue (I think) not only for text but for any override.
I’ve been troubleshooting a bit and what I can reproduce consistently is:

  • Have a button in 3 variants (contained / outlined / text) each with a few states (rest / hover / clicked / disabled).
  • Have the Contained variant of the button nested inside another component (I’ll call it Card).
  • Have the Card component have a Rest and Hover variant.
  • Place an instance of Card and swap the button it contains for another variant (text variant).
  • Override text, colors, anything.
  • Apply such overrides across both Rest and Hover variant of the instance.

On prototype the overrides are lost :frowning:
Happy to share the file if anyone is so kind to help :pray:

1 Like