By Dani Beaumont
Now that we have drag gestures handled, let's look at a different form of interaction, and that's overlays.
Often when you're working on your design there will be elements that reoccur across many different artboards. Things like keyboards on a mobile device that come up from the bottom, or a menu that drops down from the top, or on the side across many artboards. What overlays allow you to do is design that artboard once, and then allow it to reoccur across many different artboards. Here, I want to focus on these three artboards. So for that I'm going to just quickly come on in and hold the Z key down so that I can zoom in to see those three artboards more clearly, and I'll fine-tune that a bit and then type "V" on the keyboard to go back to the Pointer tool.
What I want to do is wire this menu to the navigation that's here on the left corner of both of these artboards. To do that I'll make sure I'm here in Prototype mode and, while I'm here, I'll go ahead and click on splash and set the home or the start of this flow to be here on that left-hand side. Next holding the CMD key, I'm going to click on that menu navigation. With it selected, I'm going to press and drag from the icon to the menu artboard when I click and release, and come here into the Properties Inspector. I'm going to leave it as a tap gesture with the action though I want to change it to Overlay. Notice that the wire goes from a solid blue line to a dotted blue line. This lets me know that it is an overlay wire. There's also a green object here this is simulating the artboard that's here on the right-hand side in position of the larger artboard. I'm going to leave that for just a moment and here under Animation I want to change it to be Slide Up. With the wire still selected I'm going to come here to this control handle and press and drag it up so that I can center that menu there in the center of the larger artboard.
With that all set I'd like to show you another productivity tip. If I wanted to come in and define the same behavior for this menu item here. I could go through the same steps but there's a trick to applying it a little bit more easily. What I want to do is make sure we'll have that first wire selected and, under Edit in the menu, I'm going to select Copy. Next on the "Calendar" artboard I want to select that menu and I can confirm what I've done here in the Layers panel. I'll actually click on icon menu there. Now rather than apply all the same attributes what I want to do is pull down under Edit and just say "Paste Interaction". That is going to paste all of the attributes I defined for the first wire to the second one.
Now this is extra magical if you think about it. When you have -- let's say 50 artboards -- and you want to apply the same menu navigation to all 50 you can do that by just pasting the interaction rather than going through all of the steps manually. With that set let's add just a little bit more intelligence into what we're doing. Once we bring up the menu, I'd like to navigate between the two different artboard. So here in the menu artboard I want you to click on the Browse icon. I'll hold CMD key and select that browse icon. What I'd like to do is have brows bring you back to the first artboard so I'm gonna press and drag it notice that the default behavior for this wire that I'm dragging is for Overlay. We don't want it to be an overlay in this case. XD is just suggesting the same thing that I did in the last step. When I click and release I want to make sure I change that to just be a tap gesture that then brings a transition from that menu back over to my Splash screen. I also want to do this for the second artboard so I'm going to click on "Your Plants" and I'm going to press and drag a wire there to that second Calendar artboard, and again those default values will be fine.
I've got a Tap transition that brings me to Calendar. From an animation standpoint let's set this to Dissolve for both of those interactions. if I want to go back to the Browse interaction that I defined a real easy way to do that is to just click right there on the wire and then come on in and make sure that that's set to dissolve. So I can always change what I've done before by clicking on the wire and reviewing any of the attributes that I've defined. Okay, with that all set, let's take a look at the work we've done. I'm going to bring up the Desktop Preview app. If I come here to my menu navigation and click on it notice I get an indicator that it's a hotspot or a click area. When I click it my navigation slides up from the bottom. From there I can switch over to "Your Plants". I can see that that's also a click area. It dissolves to that second artboard. Once again I can go back to my menu and bring up that navigation and go back to my first artboard. Beautiful work. We'll continue in the next step.
Overlays in Adobe XD make it easy to stack content like keyboards, modals and menus on top of your designs. Easily reuse a single design for overlay elements and link to them from multiple artboards to save space on the canvas, and streamline your workflow. Overlays in Adobe XD can be positioned anywhere on the artboard simply be dragging the outline to the desired overlay position. Transitions like Slide up and Push down can be used to animate the overlay into position.
Up next, Prototype Step 05: Work with voice triggers and speech playback.
