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:

2 Likes

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…

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

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.