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.
- Upload your overlay screen like a normal screen
- Enter build mode and click + drag to create a hotspot
- Select Screen as overlay in the Link to dropdown menu
- Select your overlay screen
- 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.
by Andy Orsow
Designer and product marketer at InVision, resident GIF-ologist and video maker.
