By Dani Beaumont
With overlay support you can easily stack content over another artboard instead of having to duplicate huge amounts of content on multiple artboards. A few design examples include drop-down menus keyboards that slide up and light boxes. Let me show you each of these in action within the application.
The design that I'm working on here in XD has a number of artboards that share a consistent header, and you'll notice I have on this first artboard that header in place. It's simulating an iPhone device and on the left-hand side I have what's known as a hamburger menu. I want the behavior to be that when you click on that hamburger menu, this menu appears or drops down from the top on the right-hand side you'll notice that I have a magnifying glass or a search icon. Clicking on that I'd like to have bring up a keyboard from the bottom of the screen. Now the beauty of this feature is that I can have multiple artboards all pointing to the same single overlay. This allows me to optimize my design content to a great extent.
What I want to do now is tie these items together as overlay elements. To do so, I'll switch over to Prototype mode, and I'm going to zoom in a little bit so that I can see more of the content on this first artboard. I'll begin by selecting this hamburger menu here on the left. Next I'm going to drag a wire from this element to the real menu. And what you'll notice is there are new options now in this dialog. Instead of selecting Transition. I want to go with the Overlay option. And as far as that overlay behavior works I wanted to drop down, so under Transition I'm going to select "Slide Down". Notice on the left side I'm getting an indicator of how my overlay item will appear on the artboard. The beauty here is that they can be different sizes, so my drop-down menu is smaller than my artboard. That's okay; I'm going to come and drag — from this drag point — drag that item up towards the top. Notice I get this very nice onion skinning behavior that allows me to perfectly align my overlay element on my artboard. Next I'm going to zoom out just a little bit so I can see my keyboard, and I'm going to get right on the icon that I have for my search field and drag that wire to the keyboard artboard. I'll select Overlay, and in this instance, instead of sliding down, I want to slide up. With the object still selected I'll come over and drag that keyboard down towards the bottom of my screen. Next I'd like to add one more level of complexity while I'm at it. When you bring up an overlay you can choose to have that overlay occur and then be dismissed, or you can actually have link areas within the overlay that take you to another location.
I like the navigation that I've defined, and I want to carry it over to these two other artboards, so I'll come in and select that initial header content and I'm going to copy it to the clipboard select my two other artboards and paste it. Now what I want to do is actually add navigation into my simulated drop-down menu. So when I click on Sparrow, I want that to take me to that first artboard and for that it's just going to be a regular transition that dissolves. So kind of a traditional transition there for Lake Merc. I'll have it go to that second artboard. Again a dissolve transition and we'll go Cecilia to the Cecilia artboard and have that of as a transition, Let's take a look at the work we've done. I've got the homescreen defined, and I'll bring up my preview window. Notice when I click on the hamburger menu I get this lovely drop-down. I can dismiss it by clicking on the close box or just clicking off on the side if I click on the search field. I see my keyboard come up pretty terrific. If I go back to that menu now, I have the ability to actually navigate to individual artboard within my project so I could switch over to Lake Merced for example, and then continue the work that I've done.
I encourage you to experiment with this incredibly powerful new feature that we've added into Adobe XD.
To create an Adobe XD menu overlay, or keyboard overlay, select the overlay action in the prototyping inspector, and position the overlay artboard in the desired location. Overlays in Adobe XD make it easy to reuse a single artboard like a menu or keyboard across several interactions, with out the need to copy it everywhere.
