Preserve overrides in instances swapped inside component

I’m running into this issue as well. It’s definitely a bug since at times it works (10% of the time) and then it doesn’t. Hope this will be fixed soon 🙏

Even naming the text layer the same for all variants, setting a property for the text… nothing works to keep overrides. Super annoying.

Wanted to attach a video but not allowed yet.

Link to my video where this is happening: https://twitter.com/jnetzlr/status/1689656962865082369?s=20

This is a huge dealbreaker for using atoms inside of parent components…

This was fixed with text properties, right?

Is this still an issue after 3 years, It doesnt always work! 
in the same component one variant works while the other doesnt, they both use the same nested text component. the only difference is that one has a radio button before the text. 
Not sure what I am doing wrong 😕

I think this is similar to an issue I was having with interactive components, but in any case try using the new Slots feature Figma just released! It fixed it for me! Instead of nesting a component into another, create a slot in the parent component.

this is still an issue - I’m making a component which is a grid of cards, and have created instance swap properties at the grid level to swap out different card types. No matter what I do I cannot make the headline text carry over between instance swaps - even though if I swap card types outside of a component (directly on the canvas) it works. 

Figma doesn’t currently seem to be able to handle the level of instance nesting that’s required to make a really complex system actually fully responsive and usable.

Generally, there are three things you can do to get around this bug or other bugs that kinda look like this, though I do wish it wasn’t a problem to begin with:

1: Make sure that things which are supposed to carry over have the same name in the before and the after, especially if you override that object in the instance. For the headline example, you potentially need to rename the headline text object itself in the card component declaration if you haven’t already, it’s probably set to automatically rename itself when you change the text, so there’s a chance it’s not being correlated because when you change the headline text in one instance, it sees two different text objects. This definitely isn’t 100%, but will occasionally fix the problem

2: Use slots around specifically the object that supposed to stay the same. Slots are registered as properties of the parent, so forces the names to stay the same between swaps, like a combination of 1 and 3. For the headline, you should try wrapping the headline text element itself as a slot. This has to be done in the card component declaration by the way.

3: Boil up or link the property in down any way you can. If it makes sense to do the override on a deep object, try using the expose properties from nested instances. If it’s not a component or it makes more sense to set it up top, as long as the thing you are overriding has a discreet number of possible values you may find success using variable modes, put in each possible state as a mode for a variable, link that state to the mode, and then set the mode to the target value in the parent.

You can also potentially try combining 2 and 3, for the headline you could wrap it in a slot which then gets registered with the card component, and then in the grid component you could use “expose properties from nested instances” to make them all bubble up to the grid component. To that on the grid component variant with the most cards, and then on the other variants you just link the cards in it up to whichever exposed property would correlate.