Interactive component Hover bugs when changing the display Icon

Interactive Components Bugs
1

Hello folks!
This is a problem / Bug i find every now and then. But today it got to a really interesting point, and wanted to share with you to see if we can find out.

Project: https://www.figma.com/file/Ux7CByq5QOEIZC96Lr52XV/Hover-Problem?node-id=0%3A1
Preview: Figma

Background:
I did the most basic hover interaction ever.
I have an instance of an icon, wrapped inside an autolayout frame, then i created a new main component and it is where i usually apply the hover interactions.
image
Normally, inside this master button, i apply a “blank” icon. Then i throw instances of this button in the header for example, and overwrite the icon model as needed.
image
Problem is that for some reason, the overwritten icons, do show the hover effect, but they refuse to go back to default state.

At this point when i normally find this problem i flip the table and do some naughty and unpleasant tricks to get job done, such as having a master for each icon…

But today things were a little different, because at some other part of my design i had a button in similar setup, that did work as expected.
I copied that button and mimicked every single detail to match the “faulty” one.
To my surprise, the good button kept working as expected, while the other didnt.

In the prototype view, you will see that the left row, does hover correctly, while the right row, does not.

I think I compared everything, I matched every single bit of both masters, and could not make it work.
image

Do you accept the challenge?

Thanks in advance!

3 Likes
2

I’m also having this problem! Does anyone know a solution?

3

I’ve got the same issue, where icons in an interactive components doesn’t revert back to original state, on both icons made in the “old school” variant way and the new property method. I also tried recreating the component, and got the same results. The problem only happens after I change from a placeholder icon to another icon in the same set.

The component also have a pressing state with a different color than hover. The icon keeps the color from its hover state when pressing.

Another tricks tried but failed:

  • Changing the icon’s specific name (i.e. icon/system/placeholder) to a generic one (Icon)
  • Add a mouse leave animation to the hover state of the component.
2 Likes
4

Did someone made this work. I have been trying to debug this for hour unsuccessfully. My layer names are the same and I have changed the icon specific name to something generic (icon0 to avoid the override name change but the problem still persists…

This cripples massively the interactive components strategy

3 Likes
5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.