Testing out new component properties with variants. I’m using Figma’s demo file “Component Properties Playground (Community)”.
I’ve noticed that switching the icon (property) does not retain the variant color. This isn’t ideal. Has anyone else encountered this?
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.
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.
