Component Properties & Variants Bug

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 !!!

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