We’re tremendous excited to carry you a giant Prototyping replace — complete assist for Overlays. With Overlays, it’s now less complicated than ever to create richer and extra interactive experiences. They’re simple to work with, however we’ve included loads of customization choices so you may make your prototypes really feel extra lifelike.
We all know you’ve been asking for this one, so we’re excited to indicate you ways we’ve tackled it — together with a few of the controls and choices you gained’t discover wherever else. Let’s dive in.
What the heck is an Overlay?
An Overlay is an umbrella time period for any sort of interplay or message that seems on high of the present UI. Some examples embrace an iOS-style share sheet, a popover alert, and even an interaction-blocking modal that calls for consideration. In different phrases, Overlays can are available in all sizes and shapes.
An Overlay is an umbrella time period for any sort of interplay or message that seems on high of the present UI — together with iOS-style share sheets, interaction-blocking modals, and even the settings menu within the picture above.
The way to create Overlays
We’ve made the prototyping course of smoother by splitting the Inspector into two tabs: Design and Prototype. Which means you’ll discover all of the Prototyping settings you want in their very own part — together with Overlays.
There are two alternative ways to create an Overlay. One possibility is to pick the goal Artboard, head to the Prototype tab of the Inspector and click on Overlay.
You possibly can then create an interplay simply as you’ll with some other layer. Hit I, choose the layer you wish to set off your interplay, then choose the Overlay. It’ll now seem on high of your Artboard if you preview your prototype! After all, you may also add an interplay by drawing a Hotspot.
Do you know? You possibly can hyperlink to an Overlay on a unique Web page in your doc from the remainder of your prototype.
There are just a few methods to create an Overlay. One is to pick an Artboard, then head to the Prototype tab of the Inspector and click on Overlay. Then, choose the layer you need because the set off, press I, and choose your Overlay to create an interplay.
Alternatively, you possibly can create a Hyperlink on to any layer that’s smaller than the Artboard you’re linking from. And since it’s smaller, we’ll assume you wish to make it an Overlay — so we’ll mechanically create an Artboard round it and set it up for you.
Once you hyperlink on to any layer that’s smaller than the Artboard you’re linking from, we’ll assume you wish to make it an Overlay — so we’ll mechanically create an Artboard round it and set it up for you.
The way to customise Overlays
When you’ve set your Overlay, you may make it distinctive and lifelike utilizing a robust set of customization choices — from common and one-off positioning to background styling and interactions.
Place with precision
You possibly can customise precisely the place your Overlay seems in your prototype, utilizing certainly one of two approaches:
- Align relative to Display — your Overlay will seem at a set place within the viewport. It is a nice setting for vital alerts or warning messages that want to stay within the heart of the display even in the event you’ve scrolled down within the Preview. It’s additionally nice for pulling up keyboards in cell apps.
- Align relative to Layer — you’re setting the place of your Overlay relative to the layer that hyperlinks to it. That is particularly useful if you need your Overlay to seem near the interplay — equivalent to having a search menu pop up — or if you would like the overlay to stay on-screen and scroll with the remainder of your content material.
By positioning your Overlay on a selected level in your Artboard — or on the layer that triggers the interplay — you possibly can create some actually immersive experiences. For instance, you might place an Overlay relative to a Image. Then, even when overrides change that Image’s measurement, the Overlay will all the time keep in the identical relative place. We’ll dive into this in additional element in a later put up — keep tuned!
Is your Overlay nonetheless not fairly the place you need it? No downside. You possibly can outline your Overlay’s precise place on the Canvas by giving it an Offset.
The ability of Offsets
Offsets allow you to additional customise the place your Overlay seems in your Artboard — so that you may be positive they all the time seem precisely the place you need them to in each state of affairs. You possibly can management Offsets by deciding on the layer that triggers your interplay, then dragging the Overlay preview to the place you need it to seem on the Canvas.
When you choose your set off layer, you’ll see a preview of your Overlay on the prototype itself, permitting you to regulate its place instantly on the Canvas or within the Inspector.
Alternatively, you should utilize the controls within the Inspector — setting the place on the suitable, after which adjusting the horizontal and vertical offset primarily based on that time. The Inspector’s offset controls are nice for fine-grain positioning.
Setting default positions
You may also outline the default place of an Overlay within the Inspector — which is nice for issues like touch-screen keyboards that all the time want to seem on the backside of the display. Merely choose the Overlay itself, then use the Inspector to regulate the Offset. From then on, everytime you create an interplay to that Overlay, it’ll default to that place.
However guess what? You possibly can even override that default on a one-off foundation. So in the event you want a menu Overlay to seem in a unique spot on one particular display, you are able to do it. Simply choose the layer or Hotspot that triggers that interplay, then drag the Overlay to its new place on the Canvas, or use the controls within the Inspector.
For those who override the default positioning, you should utilize controls within the Inspector to make that the brand new default, or revert it again to its earlier default place.
Word: Overlays gained’t present up in our previous Mirror app. However they may in our model new iPhone app! So you’ll want to obtain it to preview your prototype in all its glory.
Stacking Overlays
Need an Overlay on high of an Overlay? No downside! You possibly can stack Overlays on high of one another — even when they’ve completely different positions. For instance, you might stack a keyboard layer on high of a search menu.
You possibly can stack Overlays on high of one another, no matter their place. And keep in mind — in the event you hyperlink to a layer that’s smaller than your unique Artboard, we’ll mechanically create an Artboard round it to set it up for you.
You can also set an Overlay to shut all current Overlays at any time when it exhibits up. Simply choose the Shut current Overlays checkbox within the Inspector.
Past positioning, there are additionally loads of styling choices. To emphasise an Overlay, for instance, you possibly can blur or dim the prototype within the background.
Need to restrict interactions outdoors an Overlay when it seems? Select between a number of Interplay settings within the Inspector. For instance, you possibly can determine if it’s doable to click on outdoors a pop-up menu to dismiss it. You possibly can additionally block interactions altogether.
However if you would like, you possibly can nonetheless permit each clicking and scrolling — even with an Overlay displaying. It is a nice possibility for low-priority alerts or notifications that don’t require rapid consideration.
You possibly can determine if it’s doable to click on outdoors an Overlay to dismiss it — even with a number of Overlays displaying. Simply choose the Overlay and select your most well-liked interplay setting from the Outdoors Interplay menu within the Inspector.
Overlays can be found within the newest launch of our Mac app — so ensure you’re updated! And naturally, when your work is prepared for suggestions, you possibly can share your prototype with anybody in your staff to check totally free by means of the online app and iPhone app.
We hope Overlays velocity up your workflow and assist you create extra immersive experiences. We’ll be diving deeper into this in a future put up, as there are some highly effective use-cases that we expect you’ll love.
As all the time, we’d like to know what you assume, so be at liberty to share your ideas. Within the meantime, keep tuned for extra thrilling updates.