Skip to main content
Question

Icon Hover Color Bug - re-opened

J

Hi,

I am having trouble with icons not changing color on hover states in an interactive component created in my design system.

Just like original post about this - I have created a navigation that contains buttons links with an icon and text. In my design system I have defined this as a component with a hover state. I of course want to be customize the icon instance depending on the entry. The hover effect works fine if I use the component exactly as it is in the design system. But if I change the icon to another icon, the hover state only appears on the text.

I have tried to set the original icons to some strange color so that the instance overrides the original - problem persists. I have tried changing both the entry state and the hover state colors in my project, problem persists.

I don’t understand why this is happening, and I can only think that it’s some bug? The text works fine in all instances.

Can anyone help me?

Link to original post: Icon Hover Color Bug

This topic has been closed for comments

10 replies

dennsi
  • dennsi
  • Active Member
  • 256 replies
  • April 25, 2023

Maybe tips posted in this thread will help you:

It might be a problem related to differently structured layers within the icon components.

Aljoscha_Theil

is has to be same naming and type (Vector)

Bobster
1 person likes this
  • Bobster
    Bobster
Bruno_Barros

Based on the fact that @dennsi tip on my post fixed the issue, I think that it doesn’t always has to be the same naming and type.

At least when you’re using the instance swap component property what fixed the issue was NOT keeping the layers with the same name.

dennsi
  • dennsi
  • Active Member
  • 256 replies
  • April 26, 2023

Those are two different things. In your case it was the name of the component instance that should not be changed, but in this case the structure and naming of layers inside the component are relevant.

S
  • Sean30
  • 14 replies
  • May 13, 2023

I am having this issue as well, and yes I have triple verified that all my component variant layer structures are the same and so are their layer names. I am still facing issues of icons not keeping their correct colours across component variants while prototyping.

It definitely can be caused by incorrect naming or structures but it can also be caused by software bugs, and I’ve seen others report this.

J

Thanks for all the replies everyone! I really appreciate this community <3
The issue persists, even after ensuring that the layers have different names, and the same names, and nested, and not nested 😅
I’ll give it another go if I get time over, but for now I’m adding comments to the devs: “The hover state is not intentional - the color should change on both icon and text but figma 🫠”

S
  • Sean30
  • 14 replies
  • May 19, 2023

I’ve had to do the same with my user testing; I have at least 3 disclaimers on my user testing feedback form because of how buggy Figma prototyping is right now.

S

I made a practical example of how I got around this situation in my scenario, hope this helps!

Figma
Bruno_Barros
1 person likes this
  • Bruno_Barros
    Bruno_Barros
Bruno_Barros

Thanks you for this! 🥰

All I have to say to Figma leadership here is that it’s absolutely maddening and frustrating that such old and persistent bug is not treated as a priority by the company… and we are all left trying to come up with front-end-hostile bugs like these.

Laurie_Feuilllerat
1 person likes this
  • Laurie_Feuilllerat
    Laurie_Feuilllerat
A
  • Anonymous
  • 0 replies
  • June 25, 2023

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

Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings