Using Overlays

Overlays are a type of frame that will appear on top of another frame when you preview a prototype. You can use Overlays to create menus, modals, messages, and many other common interface elements in your prototypes.

Creating Overlays

You can create an Overlay in two ways:

1. Select an existing frame and toggle Set as overlay in the Prototyping panel. Click Aligned to View to open the Overlay Options panel and set its default position, backdrop, and interaction behavior. You can also override these on the Link or Hotspot that points to the Overlay.
2. Create a link or Hotspot to any type of layer or Symbol that’s outside of the frame and smaller than its parent. Sketch will assume you want to use it as an Overlay, and will create a frame around it and set it as an Overlay for you.

Overlay options

Once you’ve toggled Set as overlay on in the Prototyping panel, click Aligned to View to open Overlay Options. From there, click to preview the Overlay.

1. Include fills as content: When enabled, the Overlay frame’s fill is visible when playing the prototype. You can also change this in the Export section of the Inspector.
2. Align to: Determines where the frame will appear as an Overlay when you target it, which can be either:
   • View: Always displays in the same position, as determined by the horizontal and vertical Offset from the underlying frame
   • Layer: Displays in a position relative to the layer targeting the Overlay. Use the Origin control to set its position and specify an offset
3. Origin: A nine-point grid that sets the anchor point of the Overlay relative to the view or trigger layer.
4. Offset: The horizontal and vertical offset to apply to the Overlay, relative to the view or layer.
5. Backdrop: Set the styling to apply behind the Overlay:
   • Color: Enable and set a backdrop color and its opacity
   • Blur: Enable a blur behind the Overlay and set its opacity and radius
6. Interactions: Determines what happens when you click or tap outside the Overlay:
   • None: Nothing happens when you click or tap outside the Overlay
   • Closes Overlay: The Overlay closes when you click or tap outside it
   • Allow All: Any Links or Hotspots not hidden by the Overlay stay active

Using Links and Hotspots with Overlays

Any Link or Hotspot can target an Overlay, and you can set specific options to the Link or Hotspot to override the default Overlay behavior:

When you add an interaction from a Link or Hotspot you can set the following additional options:

1. Target: Has a dropdown of all frames so you can change the target.
2. Trigger: Sets what action shows the Overlay — Tap, Hover, Press, or Toggle on Tap.
3. Animation: Sets which animation will bring the Overlay onto the prototype.
4. Target Overlay: Click Aligned to View or Aligned to Layer to open Overlay Options and set a custom position for this specific interaction.
5. Close existing overlays: Toggle this option to close all other active Overlays when this specific Overlay appears.

If you select a Layer that targets an Overlay while the Prototype tab is active in the Inspector, a low-opacity version of the Overlay will appear on the Canvas to help you adjust its positioning — either using the inspector controls or dragging it directly.

Using Hover, Press, and Toggle triggers

By default, Overlays appear when you tap/click on the trigger layer. To change this, select the trigger layer, open the Prototyping panel, and choose from the following options in the Trigger menu:

• Tap — The default for all new interactions. A single tap or click will show the Overlay.
• Hover — The Overlay will only appear whenever a cursor is hovering over the trigger layer.
• Press — The Overlay will only appear when the trigger layer is being pressed.
• Toggle on Tap — Tapping or clicking shows the Overlay; tapping or clicking again hides it.