Changing to another variant of a component used in my component, make the text not in sync anymore

Select the nested individual components of the instance on each page and click “Reset all changes” at the top of the screen:

Thanks for taking the time to reply, but it’s not really what I’m looking for. I want the text to be kept in sync with my ‘Wizard flow’ component, but the variant of the step should be set in the instance of the ‘Wizard flow’.

Hey there, Sarah.

from your first image. Can you expand the “Text” frame box? I think your text elements might not have the same name. I’m not sure if it’s the issue.

There is one suggestion, to link your “Lorem Ipsum” as a “Text property” to your component. select the text inside the “wizard steps - v2” in both variants, and from the panel on the right, go to the content section there is an icon for “create text property” create one, and assign both texts to it.

I’m pretty sure this will work and any override on one instance will keep the text for the other states of itself.

Hi Armin, thanks for your reply!

Both of your remarks I had already checked. My layers do have the same name (which is why it works to change between them if I have only an instance of my ‘Wizard step’ component and change the variant).

And I already added the text as a property, also that does not change the fact that it does not keep in sync between the bottom 2 step frames, where the variant of the step was different…

Hi @Sarah_Meysman , just to underline your original post:

I’ve had the same issue lately. My variants are identical in structure, but text is still not updated according to changes to the main component. It only works when the instance follows the exact configuration of the main component (in your case: step one active while the other ones are empty).

I’ve tried circumventing this by creating a base component. And to create variants including an instance of that. I’ve then applied changes to color/opacity/etc. to the base instance sitting inside a variant.

But to no avail, changes to the main comp still don’t get through. Edit: Another try was to do it the original way, but to create the variants not as variants but (the old way) as separate components. With the same result.

It’s been a while since your post, have you maybe figured out a bit more? I’d hate for my instances to keep breaking all the time…

Hi @Sjoerd_T !
I got in contact with Figma support and they explained me that this is just how it works, if it’s overwritten, it’s doesn’t take over changes from the original component. So not much to do about it at that point.

However, since the new release there is a solution. In my case this would be resolved with the new functionalities for variables. I put my text in a variable instead of defining this in my ‘wizard flow’ component, and then it will always be equal to that variable, even if I’ve overwritten the state of the component. See screenshot from my test below.

Maybe it can help you to dive into variables and modes to see if it can fix the issue for you. You can also use variables to change the variant of a component, so maybe you can play around with that.

Good luck!
Sarah

@Sarah_Meysman Thanks for reaching out.

Ah yes, string variables are indeed a solution to this problem.
A bit of a bummer that I had to create 43 string variables only to have no breaking instances. And I couldn’t find a variable creation plugin to make the creation process a bit more efficient. 🥲

Thanks again!

This behavior is such a headache. So many problems are caused by Figma using frame name as the sole mechanism to track property changes.

If I change the name of an instance (to have nicer panel with nested properties), this name change only applies to the current variant. If I change the variant of this instance, Figma loses track of it and restores default properties.

This makes it much more difficult if you want to have a logical naming structure of components for maintainers, AND nice user-facing naming of the same components’ instances. The moment you change some instance’s name, Figma gets confused how to track changes of its properties across variants.