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
. A workaround other than detaching the components would be great.
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
3 Likes
Hey everyone. I’m not experiencing the issue but I might have an idea on the reason why it’s problematic for you (I was triggered by the solution proposed by @Pavel_Kiselev).
My setup :
- Icons have a default color in my library (black)
- Components using icons always override the initial icon color (We are never using black icons).
- I don’t have any issue with instance swapping.
I tried to recreate the issue you have with a button component containing a label+icon.
Default state icon color → I removed the color override
Pressed state → I leave the white color override
I then drop a button with default state in my canvas, switch icons instance. Icon stays black.
I change the state of the button to pressed → Icon goes white.
I switch back to default state → Icon stays white (not ok).
I also tried with different color override and it doesn’t break so I believe I can conclude that the issue occurs only when you don’t override your icon color.
2 Likes
It worked the way you explained. Thanks, man. I was getting crazy about this bug.
1 Like
Yes that is correct, it is about color changes in a variant not being reproduced in an instance. I don’t have time to follow up with Figma at the moment but I hope to shortly. Based on Figma’s responses to date I believe they either misunderstand the issue or think they’ve fixed it when they haven’t. If you create your icons with one flattened layer that is always the same name you won’t hit the issue. I had to downgrade our icons to work around it.
1 Like
I don’t think that it has to be flat though. They only way Figma applies overrides is by a name. I believe you can have a vector union which is fully editable, it would outcome a single layer with regular fill and stroke colours. Give it a name and you are golden. Consistent naming is what drives overrides, there is no magic behind the hood
@Pavel_Kiselev I suggest you try it if you have time. I spent half a day testing various configurations and the only thing that worked was icons with a single layer. Feel free to prove me wrong but my results were 100% reproducible. I can’t confirm if the single layer has to be the same name in all icons.
@Edwin_Bradford this is my setup
I added few icons, all multi layers, made with both unions and subtracts, on top level all vectors have the same name, colour is set with fill
Quick demo
1 Like
Your demo appears to work perfectly and will probably work with my icons which use strokes and fills but sorry I’m lost… what is the difference between the button-01 and button-02 components? One works and one doesn’t, exactly as you describe but I’ve been through every layer and I can’t find any differences between them so I’m completely confused. I believe you’re applying a color override somewhere but I can’t find where although I’m rushing in between other tasks at the moment.
Yea, it works just fine, see my previous comment for details - Component Properties & Variants Bug - #22 by Pavel_Kiselev
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
Thanks… I managed to reproduce your results exactly as you described. That explains why I couldn’t see any difference between your components.
So I believe the issue is a bug, claimed fixed (above), not fixed. Also reported to @Figma_Support on Twitter and apparently misunderstood as from what I can see it has no relation to “…layers of nested instances and variants referencing other nested instances of variants…”.