New in Sketch: Taking Smart Layout beyond Symbols
Skip Navigation

Using Overlays

Last updated on 10 Nov 2023
3 min read

Overlays are a type of Artboard that will appear on top of an Artboard 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

Creating an Overlay

Watch lesson

You can create an Overlay in two ways:

  1. Select an existing Artboard and then select Overlay as the Artboard type in the Prototype tab of the Inspector. From there you can also set its default position, animation properties, and background behavior and styling. You can also override these on the Link or Hotspot that points to the Overlay.
  2. Create a Hotspot or Link on any type of Layer (for example, a Symbol) that’s smaller than the parent Artboard. Sketch will assume you want to use it as an Overlay, and will create an Artboard around it and set it as an Overlay for you.

Overlay options

Overlay options

Watch lesson

You can set a default behaviour for any Artboard you’ve defined as an Overlay using the properties in the Prototype tab of the Inspector:

An annotated image showing Overlays settings for prototyping

Overlays settings for prototyping in Sketch

  1. Screen / Overlay: The Artboard type (must be set to Overlay)
  2. Outside Interaction: Determines what happens behind the Overlay. Choose from three types of interactions for the area not covered by the Overlay:
    • None: Nothing happens when you click or tap outside the Overlay
    • Closes Overlay: Enable it if you want the Overlay to close when you click or tap outside it
    • Allow All: Any Links or Hotspots not hidden by the Overlay will stay active
  3. Align Relative To: Determines where the Artboard will appear as an Overlay when you target it, which can be either:
    • Screen: Always displays in the same position, as determined by the horizontal and vertical Offset from the underlying Artboard
    • Layer: Displays in a position relative to the layer targeting the Overlay. Use the layout preview controls to set its position and specify an offset
  4. Offset: The amount of horizontal and vertical offset to apply to the Overlay, relative to the Artboard or layer
  5. Background Style: Determines the styling behind the Overlay, such as Fills or Blur. Setting a Blur, for example, will cause anything on the Artboard behind the Overlay to appear blurred
  6. Create an Interaction: Allows you to create further interactions from the Artboard. These are the same as any other interaction option, with the addition of a Close Overlay option

Changing an Overlay’s default options will update any existing Links or Hotspots that point to it (i.e. if you have not overriden the default settings for that specific Link or Hotspot).

Targeting an Overlay

Watch lesson

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:

An image showing the settings when targeting Overlays from Links or Hotspots

Settings for Links or Hotspots targeting Overlays

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

  1. Fix position when scrolling: Fixes the position of the Overlay — it won’t scroll if you’ve created a Scrolling prototype
  2. Target and Preview: Has a dropdown of all Artboards so you can change the target and also shows a preview of the one you are currently targeting.
  3. Animation: Sets which animation will bring the Overlay onto the prototype.
  4. Close existing Overlays: Check this option to close all other active Overlays when this specific Overlay appears.
  5. When you override an individual Overlay’s default settings, you can revert back to the default settings — or set your overrides as the new default (and update all other instances of that Overlay):
    • Reset Overlay position Arrow counterclockwise: Clears the current settings and restores the Overlay’s defaults
    • Use Overlay position for all interactions to this Artboard Rectangle Horizontal Arrow Up: Causes the settings from this target to overwrite the Overlay’s default values.

If you select a Layer that targets a Relative Overlay while you’re in the Prototype tab in the Inspector, you’ll see this and will be able to directly adjust it on the Canvas.