Member-only story
4 ways to prototype a hover state: InVision, Framer, Sketch, Figma
Practical examples of how to build a simple hover state prototype with some of the most popular prototyping tools on the market.
There are tons of options available for UX designers to prototype a user experience and you may not know what are the pros and cons of each tool just yet. The main goal of this post is to give you a taste of each tool’s prototyping workflow by taking you through the process of building a simple hover state example. By the end of these exercises, you should have a high-level idea of the jobs that are suitable for each of the tools.
What are we building?
Since the goal is to get a quick understanding of the prototyping tool’s workflow, we don’t need to be too fancy. A simple button hover prototype that alters the button background color should do the job. Below are the two component states we will be animating between.
Here is a quick spec of the button background style:
- Default background color: #3B42F4
- Hover background color: #767BF8 (or 70% opacity of the default)
Invision
Instead of Invision Studio, we’ll do an Invision web example because it is the most popular prototyping tool based on 2018 Design Tools Survey. Since this is a screen linking tool, the only way to prototype the hover state is to build a hover link hotspot.
Step 1: Start by setting up two screens with each of the button states. You will need to design the buttons in another design tool of your choosing then upload the two states to Invision.
Step 2: Setup a hotspot over the default button with ‘Screen as Overlay’ link to the hover screen. Make sure to un-check the ‘Stay on target screen’ to allow the hover out.
