Pass Master Components Changes to Different States of Instances

Following scenario:
I have a menu with 2 listitems. Rename and Delete.
The listitems have variants - default, hover, selected and disabled.
I create a master component of the menu to use it multiple times in the flows.

In one instance of the menu, I set the Delete listitem to “disable”.

Afterwards I change the listitem lable from “delete” to “remove” in the master component. Unfortunately, the instance with the disabled delete listitem still shows “delete” instead of “remove”.
I have to reset the listitem so it shows the default state of “remove” and the set it to “disable” once again.

Is there a fast lane for this?
I wished this “reset” would not be necessary.
Thanks for your help.

1 Like

It took me a while to understand your problem, so I made an illustration for myself and anyone else trying to help. Is this the issue you are experiencing? Top component + instance is the original, bottom is after you swap instance (variant) in the component.

I wanted to suggest that you can swap instance using Master plugin, but it would keep too many overrides, as illustrated in the video below, and that creates a bigger problem. :laughing: I’ll try to improve this in the future.

Don’t see any other solutions for this problem at the moment. Maybe only if you use some content mapping tools (e.g. Google Sheets Sync) so Figma isn’t the source of truth for text, you can easily remap the text even if it gets reset.

Thank you so much for breaking this down.
I’ve created a short screen capture, because it is a slightly different to what you’ve created.

Thanks for the hint with content mapping tools … Never tried this though. Not sure if it adds to much complexity, or if this makes our lives easier at the end.

Have you already worked with Google Sheets Synch etc.?

Got it, now I understand the issue, and the root of it is the same as for the issue I recorded. In this case this won’t be solvable with Master plugin. The native solution should be implemented by Figma.

While using Google Sheets Sync, Ditto or other tools like this could be beneficial, it’s not worth to use them just to solve this specific issue — it would probably add too much complexity. But if you find other benefits of using a centralized content system, go for it!

1 Like

There is one way—to use labels as components.

Thank you for showing this alternative.
It could work, but creating a component per text feels … I don’t know … also wrong. Because this is also not how you are usually nesting your components, right?

My listitems consist of a label component. I will not create a component best on the text, because then I’d loose the whole purpose of my design system.
So, I’d need to create a text component per list entry and then swap label component inside the listitem, coming from the design system. Still very cumbersome.
I hope someday … Figma will have a more streamlined solution for that.