Hovers on interactive components are malfunctioning and rendering oddly

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

Did anyone find a workaround?

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.

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? 🥴

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!