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
You can create an Overlay in two ways:
- 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.
- 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
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:
Overlays settings for prototyping in Sketch
- Screen / Overlay: The Artboard type (must be set to Overlay)
- 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
- 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
- Offset: The amount of horizontal and vertical offset to apply to the Overlay, relative to the Artboard or layer
- 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
- 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).
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:
Settings for Links or Hotspots targeting Overlays
When you add an interaction from a Link or Hotspot you can set the following additional options:
- Fix position when scrolling: Fixes the position of the Overlay — it won’t scroll if you’ve created a Scrolling prototype
- 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.
- Animation: Sets which animation will bring the Overlay onto the prototype.
- Close existing Overlays: Check this option to close all other active Overlays when this specific Overlay appears.
- 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
: Clears the current settings and restores the Overlay’s defaults - Use Overlay position for all interactions to this Artboard
: Causes the settings from this target to overwrite the Overlay’s default values.
- Reset Overlay position
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 interactions
These options are currently in beta.
By default, overlays appear when you tap/click on the trigger layer, but you can change the type of interaction that triggers the overlay in the Prototype tab in the Inspector. When you select a trigger layer, under the Interaction heading in the Inspector, you can choose from the following options in the Trigger on menu:
- Tap/Click — This is the default option 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.
Additionally, you can change the Action option under the Interaction menu to Toggle to show or hide the overlay whenever you tap/click on it.