Solved

Make Icon change for different menu option in hover state

5 replies
972 views

I am creating a drop-down menu for my nav bar. I have designed the nav bar and created a component for the hover state which works well. The only issue I am facing is making the icon change on each sub menu hovered on.

Ask the community

This topic has been closed for replies.

JairoSolution

At least one part of the issue is almost done 🙂
From here i will check the layer naming hierarchy.

For instance, i see you have like an icon and a background thingie.

I would make sure that all the icon instances have the same logic:
One icon layer - called Icon
One Bg layer - called bg

That way, when you apply the override color override, Figma knows well where to put it.
Then when you swap the icon, If Figma finds similar naming and structure, will apply the changes correctly.

If one icon has more layers, then it will mess up.

in the case of the chat bubbles for example maybe you have to merge the vectors to make it one solid icon layer.

Jairo

There are several things that could go wrong here. can you post a file link so we can open it on Figma and check?

Solution will come 100 times faster this way

olayinkapinmoAuthor

Here is the link to the file

https://www.figma.com/file/bMhyqkpH1KHKrW3ImdbSK8/Website-Recreation?type=design&node-id=7%3A6&mode=design&t=mj0WjeddtOLO4wCV-1

Jairo

My bet is here:

In your default state you provide an Instance of “ICON”
Then on hover you replace it entiraly with an instance of “HOVERICON”

This will always result on displaying “HOVERICON” in default once you hover.

I think you component logic here should need a bit of tunning.

I would simply put an instance of ICON on both default and hover state, and apply some color overrides on hover.

That way when you change the icon, it will only apply those color overrides while maintaining the icon.

olayinkapinmoAuthor

I just did that but it is still not perfect. I have put an instance of ICON on both the default and hover state and applied some color overrides on hover.