Component Properties & Variants Bug

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

Component properties don’t support interactions.

Hi Juilo,

I found where the property is for the “Text”…it’s located below the section of “Layer” – look for the section called “Content”.

1 Like

I am using the union hack with component props successfully! My icons are components and then I apply the union in the wrapper component, the trick was applying the variant swap to the icon component, then applying a visibility boolean to both the component and the union.

A bug fix seems ideal though!

yes, thanks jean!
i think it wasn’t there last week (or i hope i wasn’t so blind), i remember looking for it all over, and i just updated.
but yes, now i can find all three prop types, each in a different section of the design panel.

Yup. I have had this exact same problem, however rather than the variants, it was turning on and off drop shadows. They would turn on and off just fine, until I swapped out the icon that had the shadow on it, and then set the entire thing to the alternate state. Did the same thing as above.

I have discovered the same issue, which I think it’s a big deal. However, the “solution” for this in my case, was to create an instance swap for each icon placeholder. :slight_smile:

@Jason_Grotrian It’s a bug but I found workaround, You can make 2 instances and connect them to 2 different Icons with different colors, then it works fine

This is crazy to give such great way to design and not to work in prototype, I have created amazing side bar action with just couple of components only to get lost in prototype.

Properties need to work on prototype ASAP. Please Figma this is a great way of work

I also had issues with this bug and it has been a pain.
I’m unaware whether the feature of retaining icon colors in variants after swapping already existed or not in Figma. If not please consider implementing something like Tints in Sketch: Tints · Sketch

Thanks Riho_Kroll1 for the tip. I got this workaround working (without union hack, the union hack in my case was not a good option because it broke the bounds of my icons).
In my case it was not needed to make the icon a component, as this would make setting up icon overrides in the parent component harder. What I did: Frame the icon instance, use that as a mask, put a color fill on top of it, frame everything, setup icon override. Once you’ve created this icon group you can copy paste it anywhere you need this feature. Here is a screenshot as reference.

1 Like

Hi guys. When I use the property text and change the component text and run the prototype. Shows the text I changed but when I press the reset button the text of the component is reset and change to default
component. this picture change text

2.after click R and reset to default component
Did you encounter this problem too?

I believe yours is the only official reply to this issue. As it’s been sixteen days since your reply can you confirm that the issue is being addressed and will be resolved within a reasonable time frame by Figma, I don’t mean to pin you down to a date, or do we need to implement some of the discussed work arounds?

@Sho_Kuwamoto Any chance you release this soon? Our design system depends on this and is now broken lots of places. The amount of affected designs is growing.

1 Like