Overlays

An overlay is a frame that opens on top of the screen you are on, instead of replacing it: a dialog, a bottom sheet, a menu under its button, a tooltip. The screen behind stays where it was, so closing the overlay takes people straight back.

Design the overlay as its own frame, at the size it should be, then open it from any layer.

Open an overlay

1. Select the layer that opens it, such as a “Filter” button.
2. In the Prototype tab, add an interaction (+ next to Interactions).
3. Choose Open overlay as the action, and the frame in Overlay.

Where it sits and what is behind it

Under the action you set how the overlay shows:

• Position: Centered (the default), Top left, Top center, Top right, Bottom left, Bottom center, Bottom right, or Manual.
• Offset (Manual only): X and Y from the top left of the layer that opens it. Use it for a menu under its button or a tooltip beside it.
• Close when clicking outside (on): a click on the screen behind closes it.
• Add background behind overlay (on): a colour over the screen behind, black at 40% to start. Set its colour and Background opacity (0 to 100%).

These settings belong to the overlay frame, not to one link. Every link that opens it uses them, and you can also change them on the frame itself: select it and use the Overlay section in the Prototype tab, shown on any frame something opens as an overlay.

Close or swap it

Inside the overlay, give a layer one of these actions:

• Close overlay: closes the overlay this layer is in, or the one on top.
• Swap overlay: replaces this overlay with another, for steps in a dialog.
• Navigate to: goes to another screen.

With Close when clicking outside on, people can also close it by clicking the screen behind.

How it moves

Overlays come in or go; they are not pushed. Each action offers its own animations:

Action	Animations
Open overlay	Instant, Dissolve, Move in, Slide in
Close overlay	Instant, Dissolve, Move out, Slide out
Swap overlay	Instant, Dissolve, Match layers, Move in, Move out, Push, Slide in, Slide out

See Screen animations and easing for curves and durations.

Overlays on hover

Open overlay is one of the two actions While hovering and While pressing allow, so a tooltip can show while the pointer rests on its icon and close when it leaves.

Catches

• The overlay frame needs to be on the same page. The menu lists the page’s screens.
• Size the frame as the overlay itself, not as a full screen with empty space around it, or Centered places the empty space too.
• Change one link’s position and every link changes. That is by design: the settings live on the overlay frame.
• Overlays stack. Opening one from inside another puts it on top; Close overlay closes the one the layer is in.

Overlays play in Preview and on your published site, on every plan.