Hovers on interactive components are malfunctioning and rendering oddly

Not really. It’s still happening in other pages of my mockup, but that particular one is still occurring. Not sure it’s because those are composed by nested components, but I couldn’t find a proper workaround (yet).

I’m experiencing this issue on a nested component. I’m surprised this issue still has not been fixed.

Did anyone find a workaround?

Reporting the same issue.

Also, when hovering my button color is flickering back and forth between default and hover states.

1 Like

I have the same issue with nested component.
I found out that:

  • when you select the component and remove the interactions out of it, it will anyway keeps the interaction of the “parent” or “native” one.
    Then, there’s no conflict anymore. So for instance the hover comes back to default. It is not stuck the hover anymore.

  • The conflict can also come from a nested component that I had, on top of everything customised (overwriting text). By reseting it it worked properly again.

Unfortunately, I am not able to share screenshot because I resolved those issues yesterday and forgot to do so. Today I am not able to replicate them.
I still haven’t identified when doing what. But one or the other worked for me.

I hope that helps
Clémence

Same here. Nested interactions are becoming very hard to use and get right.

1 Like

Same issue here with nested instances. If the master component has some variant interactions and I add extra interactions on the instances and run the prototype it breaks. Sometimes the instances are visually reset to master (when running the prototype) and sometimes the interactions are skipped/misplaced…

This is forcing me to work like I would have to 10 years ago before advanced prototyping tools hit the market…

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? :woozy_face:

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.

1 Like

Hey @Andrew_Chan I see you are very good and fast on fixing our problems :slight_smile: 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!

1 Like

Hey @dwnrdt 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

@dwnrdt 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 :sweat_smile:
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.