Using Overlays

Overlays are a type of Artboard that will appear overlaid on an existing Artboard when you preview a Prototype. You can use them to create menus, modals, messages and many other common interface elements in your Prototypes.

Creating Overlays

There are two ways to create an Overlay:

1. Select an existing Artboard and then select Overlay as the Artboard type in the PROTOTYPE tab of the Inspector. You can also set its default positioning, animation properties, and Background behavior and styling here, although you can also override these on the Link or Hotspot that points to the Overlay.
2. You can create a Hotspot or Link to any type of Layer (for example, a Symbol) that’s smaller than the parent Artboard and we’ll assume you want to use it as an Overlay, create an Artboard around it and set it as an Overlay for you.

Overlay options

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

1. Screen / Overlay - the Artboard type, must be set to Overlay.
2. Outside Interaction - determines what happens behind the Overlay, there are three types of Interaction for the area not covered by the Overlay:
   • None - nothing happens when you click/tap outside the Overlay.
   • Closes Overlay - enabling this option will close the Overlay when you click or tap outside it.
   • Allow all - any Links or Hotspots not hidden by the Overlay will remain active.
3. Align relative to - this determines where the Artboard will appear as an Overlay when you target it, it can be either:
   • Screen - always displayed in the same position, determined by the horizontal and vertical Offset from the underlying Artboard
   • Layer - displayed in a position relative to the Layer targeting the Overlay. You can use the Layout preview controls to specify the exact position and an also specify an offset, if needed.
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.

Note: If you change the default options for an Overlay it 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).

Additional options for Links and Hotspots

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

The basic Overlay options are covered above, but when you set up 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 and it won’t scroll if you have created a Scrolling prototype.
2. Target and Preview has a drop-down 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 make those settings the new default (and update all other instances of that Overlay) using these controls in the Inspector:
   • Reset Overlay Position - clears these settings and restore the defaults for the Overlay.
   • Use Overlay Position for all Interactions to this Artboard - this will push the settings from this target to overwrite the default values for the Overlay.

When you have the PROTOTYPE tab in the Inspector selected, if you select a Layer that targets a Relative Overlay, you’ll see this and will be able to directly adjust it on the Canvas.

Note: As Overlays are a new feature they are not supported in our legacy Mirror app, they are however supported in our new iPhone app.