The benefits of working with Overlays in Sketch

We recently introduced Overlays, a powerful feature for creating dynamic prototypes in Sketch. Today, we’ll be taking a deep dive into the benefits of working with Overlays and cover some use cases to get your creative juices flowing.

Let’s make it pop!

But first…

What are overlays, again?

An overlay is an umbrella term for any type of interaction or message that appears on top of the existing UI. These can be anything from an iOS-style share sheet to a popover alert or even an interaction-blocking modal that demands attention.

In Sketch, Overlays are a type of Artboard that appears on top of an existing Artboard when you preview a prototype.

Benefits of working with Overlays in Sketch

Overlays have been a part of everyday design for a long time, so what makes working with them in Sketch so special? Well, we’ve really thought through the user experience of this one. Overlays are a great feature but they can be very complex to design and keep organized when you’re working with a bunch of modals and interactions. We didn’t want to introduce just another clunky overlays tool and hope for the best. Instead, we sat down and thought of common pitfalls and how to solve them.

Let’s take a close look at those solutions.

Made one overlay, made them all

With Sketch, overlays are always overlays. Girl, what? Don’t worry, this isn’t some surrealist one-liner! What we mean is that you don’t have to specify that something is an overlay every single time. Instead, you can turn any Artboard into an overlay and define the settings you need in one go — that includes position, visual treatment, and interaction. And because any settings you choose will stick to that Artboard, you don’t need to input them again every time you link to that overlay.

Here’s an example:

Snap ‘em into place — or don’t

Seamless overlay design is all about positioning, so we wanted to make sure you could place them exactly where you wanted without turning the process into extra work. With Sketch, it’s easy to keep your overlays consistent by aligning them relative to the layer or screen. You can manipulate it directly both on the Canvas and in the Inspector using our spatial controls.

So how does this work? When aligning an overlay to the screen, you’ll have nine anchor points to choose from. But that’s not all! You can customize the position even further by using Offsets, which is great for setting margins.

Aligning relative to a layer is very useful for small pop-ups or modals that are specific to an area of your screen. For example, a speech bubble or hint. When you select align relative to layer, you’ll be able to use the same controls as before but they’ll ignore the rest of the screen and instead focus on the trigger layer selected.

Here’s an example:

Work it at an interaction level

You know all that awesomeness we just discussed above? You can do the same thing at an interaction level. So, instead of duplicating overlays just to add a different placement, you can edit the same overlay and reuse it. You can tailor everything from alignment to offsets to anchor points just for that specific interaction.

Here’s an example:

All chain, no stack

One of the great things about overlays is that they allow the user to complete a series of interactions without needing to leave the screen they’re on. But when it comes to prototyping, modeling these interactions can get clunky. Usually, you’ll end up with swapped overlays that are always locked in the same position. Or worse. You’ll end up with a bunch of screens stacked on top of the other — with bits of the previous pop-ups sticking out from every corner.

With Sketch, not only is it super easy to stack overlays, you can also chain them. By chaining one interaction to another, you get to choose where you want the new overlay to appear and whether the previous overlay should close when the user triggers the next interaction. Now that’s what we call sleek prototyping 💅

Here’s an example of stacking:

Here’s an example of chaining:

Symbols 🤝 Overlays

If one thing’s a given in Sketch and design, it’s that nothing ever stays the same. If you’re used to working with Symbols, you’re probably familiar with Smart Layout — a great tool for teaching your Symbols how to adapt to Artboard or layer changes. But we believe good things come in threes, like the Three Musketeers, starter Pokémon, or the Powerpuff Girls. Now, you can add the Symbols + Smart Layout + Overlays trio to the lineup.

In the example above, we saw how we could use Symbol overrides to swap between states. But what if we expect to make changes to those states? With Smart Layout, we can prep our Symbols for action, keeping in mind the overall dimensions of our prototype’s overlays.

Here’s an example:

And there you have it! Now you’re ready to take your prototyping game to the next level. For a more in-depth look at working with Overlays in Sketch, you can check out our intro post or skim through our documentation.

See you in Sketch!