Overlays

Overlays

Elements in a Sketch document can be more than rectangles and text. They can have semantic meaning, where a series of behaviours and logic are expected of them. The user doesn't need to go into the tedious process of defining things that are implicit to certain elements.

So, what does this mean for Overlays?

Other tools bring all this logic to the interaction and forces you to define all this settings **every time** an interaction triggering the **same** overlay is created. It overloads the interaction and imposes repetitive work.

In Sketch, an Overlay is always an Overlay.

Once you've defined an Artboard as an Overlay, Sketch takes care of the little things — it knows what it is, and what's expected from it.

On top of all this, having the settings inside the Overlay itself (instead of the interaction) allows them to be defined only once. This includes its position, the visual treatment around it, and other logics inherent to Overlays.

Position

Overlays can be aligned relative to a layer, or the screen itself. It was important to us that they be as consistent as possible — both in experience, and capabilities. For precision, we wanted both to have direct manipulation in the Canvas and the Inspector.

The Inspector UI

Introducing a new control in our inspector is not a decision taken lightly. However, the UI shouldn't define the experience and for overlays, our current controls weren't enough. Positioning is a spatial action, and the UI needed to follow that.

Relative to Screen

When selecting a position relative to the screen, we'll show 9 points you could anchor the Overlay. But you can also customize this using offsets. For example, you could creating margin between the Overlay and the edge of the screen — no need for hacks!

Relative to the Layer

If you select the position relative to the layer, we'll give you the option to position the Overlay in relation to the layer triggering it. The rest of the Inspector UI remains the same, so you can choose the remaining options for both types of positioning.

Position in the canvas:

When building complex systems, you often need to position an Overlay relative to a Symbol that can later be resized. To avoid any unpleasant surprises, we've given you the ability to foresee where your Overlays will be positioned and anchored.

One of the reasons we brought positioning to Overlays was to minimize repetitive work. But sometimes there are exceptions, and these shouldn't be ignored. You shouldn't have to duplicate Overlays in a system whenever a change in position is needed. That wouldn't be smart.

Instead, we added the ability to override the position at the interaction level. So you can make placement exceptions without recreating an Overlay.

Stacked Overlays

Sometimes when creating an interaction from an overlay to another overlays you want the sequence to be stacked in the screen, in other cases you don't. We made it simple to control this by selecting whether you want to close existing overlays or not.