Component Properties & Variants Bug

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.

CleanShot 2022-05-11 at 15.03.29


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.

1 Like

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

1 Like

+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.

1 Like

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 :pray:


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.


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 :wink:

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. :v:

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 :grimacing:)

Hope it’ll be fixed soon :muscle:

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…

1 Like

@Figma_Support This bug NEEDS to be fixed quickly !!!

1 Like