InVision

Get higher-fidelity prototypes with less work using Overlays

4 min read
Andy Orsow
  •  Jul 15, 2015
Link copied to clipboard

What if you could get more realistic-looking prototypes without adding any extra time to your normal prototyping process? Now you can—with Overlays.

Overlays let you upload individual design elements, layer them on top of an existing screen, and trigger them on click or hover. When you combine that with animation, position, and background controls, your prototypes take on a whole new level of realism.

And since Overlays are global elements, making design updates is a breeze. Simply update an Overlay screen once to see those changes everywhere in your prototype.

How to use them

Getting started with Overlays is easy—if you know how to link screens together, then you can create an Overlay.

  1. Upload your overlay screen like a normal screen
  2. Enter build mode and click + drag to create a hotspot
  3. Select Screen as overlay in the Link to dropdown menu
  4. Select your overlay screen
  5. Adjust position, transition, and background opacity as needed

Explore the demos

Overlays work with all project types, so feel free to check out the mobile demo below, or explore a desktop example. We’re really excited to see what overlays can do for all of you, so let us know how you like it on twitter: @InVisionApp!

Advanced tips

Changing background colors:
Overlay screens give you the option to add a solid or transparent background behind the Overlay.

On desktop projects, you can change your overlay background color by going to your overlay screen in build mode, and accessing the configuration menu (cog wheel) at the bottom right hand side of your screen. When you change the screen’s background color, it will reflect that color everywhere your overlay is triggered.

Sync your design files:
Overlays will automatically sync to your projects, just like your source files, when using InVision sync. Just treat them as their own “screen” in Sketch or Photoshop. For more on syncing design files with InVision, check out our Sync features!

Have more questions about Overlays? Head on over to the documentation.

Collaborate in real time on a digital whiteboard