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.
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.
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.
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 ”
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.