Did you initially override the colors of the icon component?

I had the same issue and I resolved it this way:

Changed the original Icon components to some color I wouldn’t use (Figma’s default purple for Variants #9747FF works fine for example). Icon instances use a different color (=override).

The issue only persists if you don’t override colors of Icons in the instances.

Of course this requires you to have edit access to the shared library… which can be a problematic workaround.

Also make sure all the used icon components have the same layer structure and naming which is super important for general behaviour for interactions that change to variants.

Hi Dennis, what’s happening in my file is the following: I’ve got a button component with an icon as an instance property. I change the icon and create the hover interaction but the icon changes back to the one on the original component when I hover.

I tried what you’re suggesting (I think), changing the color of the icon components to Figma purple but it still didn’t work properly. Is there something I am missing? 🥴

Hey! Can you provide a link to a test file?

Be sure that your original button component set utilizes the same icon instance throughout every variant. And only change that when using the Button as an instance.

Hey @Andrew_Chan I see you are very good and fast on fixing our problems 🙂 I have the same problem as some people on the previous comments. Some of my interractinve buttons dont work anymore, they have only one simple hover state and seems like its not working. Is there anything that can be done to fix this please?

Hey! I guess it had something to do with the instance property! I tried deleting it and then relinking it in all the component’s variants, and hover works fine now! Thank you!

Hey @dennsi can you send me your email so i can share with you a link ? So interesting thing is that now it actually works, but only after a few tries of hovering it… thats weird

@dennsi Ok… actually i realized whats the delay…

I hove another component above it which also has a variant with “mouse enter” and with a delay of 10000ms. So now i realized that my second hover button only starts working when my compenent above it “closes” the “mouse enter” state!

Dont know if i am explaining it good 😅

Do you have any idea why this is happening ?

Hey @Niki_Cukier I sent you a DM where you can provide me a link to the file.

First guess would be that often folks confuse while hovering with mouse enter

I was having the same issue and discovered having smart animation on the hover action caused the issue.

Once I switched the hover effect to instant the bug went away.

Hi, I can’t seem to get the hover working either.

I use instant always for hover and it doesn’t change.

Any idea what can it be besides nested components because I have a clean file with one newly created component so it should work but still no luck.

Thanks,

Deni

Hi, I had the same problem with flickering buttons and thought it was a bug, but actually it was my mistake 😀

I added “while hovering” interaction to both variants of the same component, which is wrong and causes this recursive loop. As soon as I removed “while hovering” interaction from the second (=“hover”) variant, the problem was solved. Maybe this helps someone 😊

Hi, My hovering function is malfunctioning. When I hover it just moves to a different part of the screen (I am not making any mistakes) I do what I always do but now is not working property. Could I please get some help? 😦

I tried the reset component state component state already but it this does not really appear if u are hovering

Hi, i had the same issue with a fixed componant, when i hover it, it bounce to initual position at the top and then go back to the fixed position (bottom of the screen in this case). For solving that, i just put the componant in an auto layout, fixed it and the issue was gone 😀 !

thank you, my problem has resolved because using your advice.