Skip to main content

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?


@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”.



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


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


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.



1.in 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.


Sorry about that. I’m sure prized it isn’t working already. I thought we pushed out a fix a while ago.


You may need to force your components instances to update once more to see the fix


I’ve had similar problems with the interactions not working on nested components. My product card is a component, with instances of components inside it, like buttons etc.


I can’t set the “change to” interaction on those buttons unless I detach them inside the card component - you can see in the GIF it won’t accept any changes to the properties, it just instantly reverts back to its original state

May-30-2022 11-00-12. A workaround other than detaching the components would be great.


Not yet fixed for me, I ran into this weeks ago Swap instance property of nested components issue


Yes I’m afraid whatever the fix was it doesn’t appear to be having any effect. I think you’ll get multiple other users verifying this.


Yes, it’s not fixed. I can still reproduce the issue.


Yeah running into this issue myself. It’s ruining my ability to effectively prototype at the moment and seems to be getting worse the more I add to the file.


Was playing around today and it seems like the behavior has been fixed. Can anyone else confirm? I didn’t see any new patch notes. At least the issues I was running into here: Component Properties & Variants Bug - #13 by Jared_r seem to be working as expected now.


It’s still not working here.


It’s weird, sometimes I get the desired behavior, but if I start updating too many things and switching back I manage to run into it again. 🫠


It’s still not fixed, the Union hack also doesn’t fix this problem in Presentation mode.


I pointed @Figma to this thread on Twitter yesterday to try to get it resolved and their reply is below. Does that response make sense to anyone? I don’t think they understand the problem unless I’ve misunderstood which is worrying because it’s not being fixed.


Hey Edwin, this is a known limitation that our team is working on improving. Once you go past 2 layers of nested instances and variants referencing other nested instances of variants, it's simply expected behavior due to current limitations in the nesting logic.

— Figma (@figma) June 9, 2022