UX Design | Figma Tricks
Discovering the Hover Effect in Figma
Lately, I’ve been trying to be more intentional about giving myself design tasks to help me become a better designer. A couple of days ago I stopped to ponder about how to make a button or menu item change when the mouse is held over it. It was interesting to me for several reasons.
In terms of accessibility, it’s a great way to highlight an option to users who may have a temporary or permanent difficulty in noticing where they are on a page. It is a simple yet effective way to help users keep track and decide whether to go ahead to click on the highlighted component or navigate to something else. It is a polite and intuitive way of asking “Are you sure?” without cluttering up the interface with as many words.
The hover effect is also a nod to gamification, giving the user colourful, quick and useful feedback to help guide them towards the next action required. A hover effect is a simple and clever way to tell a user their current location in the user journey. It’s like a little neon sign by the roadside, blinking either in welcome or in a non-judgmental warning to step back and try another way.
I especially enjoyed playing with this practice project because:
- I made the little doodle image myself by combining elements on Canva when I couldn’t find free illustrations that matched what I had in mind. I love Canva. Any excuse to use it (especially for pleasure) is welcome.
- The style is completely mine. It hopefully displays the equal amounts of professionalism and playfulness that I was trying to show.
- I’m still trying to get comfortable using UI kits, and this was done with a free template that I then made a lot of tweaks to.
- I learned something new and replicated it! It felt very enjoyable. This video was very helpful and easy to follow with two different methods of achieving the hover effect.
- I used copy.ai for the first time and found it very helpful. The copy generated was a lot better than using lorem ipsum text and saved me the time I would have spent coming up with my own copy.
You can also connect with me here:
