Get higher-fidelity prototypes with less work using Overlays



View all posts

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.


Andy Orsow
Designer and product marketer at InVision, resident GIF-ologist and video maker.

Join over 3 million designers

Who get our content first.

No sales pitches, no games, and one-click unsubscribe.

Over 3 million designers
get our newsletter
every week

Find out why

Get awesome design content in your inbox every week

Just like over 3 million of your fellow designers do.

Plus get 3 free downloads, just for signing up.

Give it a try—it only takes a click to unsubscribe.

Thanks for signing up!

You should have a thank you gift in your inbox now—and you'll hear from us again soon!

Prototype better experiences with InVision

Just like over 3 million of your fellow designers do.

I agree to InVision's Terms of Service.

Want a free t-shirt?

Join the 3 million+ designers who get our newsletter weekly for your chance to win!

We hate spam as much as you do, and you can unsubscribe anytime.

Double your chances to win!

Tweet and automatically get a second entry

Tweet Now

No Thanks

Stay in touch!

We share news, freebies, and more on Twitter.

Follow us