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

overlays

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.

The post Get higher-fidelity prototypes with less work using Overlays appeared first on InVision Blog.

More New Features

View All
All fields required

Win a free shirt

Grab yours from the invision marketplace

Win this tshirt

Double your chances

Tweet and get a second chance to win

Tweet Now

No Thanks

Stay in touch

We share news, freebies and more on twitter

Follow us

Win a free shirt

From the invision marketplace

Enter to Win

Win this tshirt
Close

Enter To Win

Submit your email for a chance to win

Close

Double Your Chances

Tweet and get a second chance to win

Tweet Now

No Thanks

Close

Stay in touch

We share news, freebies and more on twitter

Close

Need More Power for Your Team?

Enjoy unlimited access, enhanced security, and VIP support – free for 14 days.

Try Enterprise Free

Close

Download Our Logos

Grab a Zip packed with our logo and bug (icon) in PNG and EPS formats.

Download Logos