- An Overlay is a link type that lets you display another Artboard on top of the existing one rather than navigating to the new Artboard.
- Overlays can be used for modal windows, drop-down menus, pop-up notifications, all without leaving your current screen.
Creating an Overlay is as easy as creating two links:
- Select the Layer that will trigger the Overlay
- With Links , connect it to the Overlay artboard
- Check the Overlay box in Links
- Now, select the Overlay component and link it to the “Dismiss Overlay“ option at the top menu bar
- Change the Overlay artboard background color to transparent by moving the transparency slide to the left. Make sure that “Include in export“ is checked in
[Download] this High-Fidelity Prototype Sketch file to try it yourself.
ℹ️ Overlay Tips:
- For a cooler Overlay effect, set its artboard background color to 70% Transparent
Get started with these tutorials:
- Creating a High-Fidelity Prototyping in Sketch
- How to Publish a Website and Host it With Anima
- How to Handoff Design Specs to Developers
- How to Export Sketch to HTML
- Team Collaboration
We’re super excited to have you trying it out and hearing your feedback.