How to add a hover to your prototype

Hovers are a great way to add interactivity to your web app and makes your prototype even more realistic.

To add a hover:

  1. Open your project 
  2. You'll need to have multiple designs of the screen you want to add the hover to for example, one screen would be the normal screen and the next screen would be the same but with a hover design added 
  3. Place your mouse over the screen you want to add the hover to and click view
  4. Click and drag your mouse to draw a hotspot 
  5. Select the destination screen at the bottom (this is the screen you want to be displayed when a user hovers over a certain part of your page)
  6. On the actions tab, select hover 
  7. You can also combine hover with the keep scroll position feature on the left to make sure the user's screen doesn't flicker if they scroll before clicking on the hover button

Check-out an example of the hover feature in the Richardson & Co prototype below:

 

richardson_and_co_screen_thumbnail_png.png

More questions? You can submit a request.