I am experiencing the same issue in my own files. All my layers are properly named and structured to preserve overrides.

Yeah. Same issue here. The new instance swap property is useless if it doesn’t retain color.

Same, hope to see a fix soon!

Figma currently do not support persistent color when switching icons or using variants. To get around this problem we implement the Union hack.

Hello,

In this topic i posted a demo example i created few days ago about this bug.

Curiorus thing is that in the same file i have a faulty interactive icon, and another one that is working properlly.

Both share exactly the same configuration and hieriarchy

Take a look:

This has been the behavior before component props also. It’s now just simpler to switch out the instance. The simplest way to work around it is to implement an icon component that uses the actual icon instance as a mask, and covers the icon frame with a rectangle fill which is then used to change the actual color of the icon. Then you just expose the internal icon as an instance property and it should work.

Adding my 2 cents, that it’s indeed a recursion bug from before. We don’t want to go back to the union hack days. Means a lot of files need adjusting. We can’t switch to the new props with this bug unfortunately.

I’m experiencing the same thing with the official playground file.

I’m experiencing the same issue while experimenting with the new component properties together with variants: I noticed that swapping the icon instance before changing the variant doesn’t change the icon’s color as expected, while if I first change the variant (where the icon has a different color) then I change the icon, it will keep the color used in the variant. That’s weird, it seems like a bug to me.

Same, discovered this when converting my button component. I tried the playground like @jussivir did and found the same problem. The old variant-based component switched colors just fine when switching states.

Even this structure doesn’t work when using a component property…

+1 Also seeing this bug. Here’s a quick example of the behavior when switching between two variants based on my company’s buttons:

Maybe it’s unrelated or an issue with the Material Icon library, but I also noticed that if you use 1 instance swap instead of 2, only the first will carry over the color defined in the variant when switched, while the other reverts to the original color:

Thanks for reporting! Our engineers are looking into it and they think they understand what’s going on. A fix will hopefully go out soon (next week?)

I immediately spotted this bug when was testing out this new feature and I’m super glad that the Figma team is on top of the issue.

Adding my +1 to getting this bug fixed please! Love the new way to manage components with properties but our team can’t use this until it’s fixed 🙏

I’m cautiously optimistic that this bug has already been fixed, because I don’t seem to be experiencing the override issue anymore!

i’m experiencing a different bug:

i can’t create text properties, as text layers only seem eligible to become boolean properties.

also:

how can i combine boolean and swap properties for one same layer?

as it was done for this button component:

whenever i have a child component, the only option i get is to create a swap property.

ok, i’ve just read the help article on properties and that’s not how the program is behaving at all.

can’t apply parent-created properties to nested layers;

can’t create text property from nested text layer;

can’t create boolean property from nested component instance.

Is this what you’re describing? Does the new component properties feature works with nested components? Doesn't seem so - #2 by Alexinthesky

Alright, it seems like I undertand how it works 😉

My default button uses an icon with no overrides. As soon as I switch to a different style, primary, thr override applies and the icon turns white. And when I revert back to the default button style the colour stays white because there is no instruction to revert it back.

The same happens with another style where I make the text and the icon blue (toolbar button). Interesting enough, the toolbar button hover state uses the same default state icon with no overrides. When I set state to hover, the icon stays blue, well, because the blue is the override now and it has a priority over the default fill colour.

I fixed the issue by forcing colour override on my icons. Literally, I choose an icon and set its colour to something else and then set it back to the value I need. So now there is an override and everything works as expected

Can confirm that the union hack does indeed work. However, when creating demo files using simple shapes as components (ellipse, rectangle, polygon) the instance swap always reverts to the component’s original color.

Love what y’all do and hope this gets fixed soon. ✌️

Same issue here so +1!

Really frustrating as I really want to switch to new props cause it lightens my files a lot but can’t right now due to this issue (all our default/hover states are messed up 😬)

Hope it’ll be fixed soon 💪

I think this is the same issue here, but the affected property is opacity rather than colour:

Probably related : In my case the instances swapping / overrides seems to work UNTIL I use the component in a prototype. Then in presentation mode it breaks, showing hidden layers in random places and sizes…

It might have to do with the interactive states (hover…) not taking into account the props overrides…