Usability testing in Figma: Hover states and Hand Cursors — Updated December 2020
When making prototypes for usability testing purposes, it’s important to maintain the suspension of disbelief in your participants mind so you can capture authentic user behavior. You want to make sure that the fidelity of your prototype will not influence your results.
Making prototypes in Figma has improved a lot over the years, but prototyping hover states for buttons is still a thing people struggle with. The Figma team has confirmed they are going to improve this functionality, but what if you need to create a prototype today? In this article I describe how to get this to work for your prototypes 4 easy steps.
1. Creating a hover state
Figma doesn’t support hover states or even animating between component states out of the box. We can achieve a similar effect by using the Overlay interaction.
- Put your regular style button on the Artboard in the location you want to have it, and place your hover state button next to it.
- Drag an interaction line from the button on the Artboard to your hover state button.
- Select the While Hovering interaction event
- Select Open Overlay as your interaction type
- Select Manual for the overlay positioning
2. Getting hand cursors to work: Add a destination
To make this prototype behave they way it would in a real WebApp, we need the cursor to change to a hand cursor. To do this we need to add a destination action on the hover counterpart of our button.
- Drag a line from the hover state button to the second Artboard
- Select an On Click interaction event
- Select Navigate To as your interaction type
— Updated December 2020 —
3. What if I don’t want to navigate to a new page?
Unfortunately not all prototypes have a state designed for all the buttons we’re trying to test. Sometimes you just want a hover button to show a mouse cursor, but not actually have an action attached to it. Luckily there is a way to apply a :hover effect and have a hand cursor without having a destination Artboard.
- Select your hover state button
- Select an On Click interaction event
- Select Navigate To as your interaction type
- Select the originating artboard as your destination
4. Lastly: add some magic move magic
Once you have all of this in place you can add some Magic Move effects between your Artboards to make things feel more alive:
Guus Baggermans is a Design Lead at argodesign. Specialising in digital user interfaces and prototyping rich experiences for Fortune 100 companies, multinational technology companies, and global financial institutions.
