Artwork by Gleren Meneghin
Prototyping takes your flat design to the next level, helping you tell a more compelling story. In this tutorial with Dani Beaumont, you’ll take a look at building out a fully interactive prototype with features like auto-animate, drag gestures and speech recognition.
In this introductory tutorial with Dani Beaumont, you’ll use a practice file to build your first project with XD.
Prototyping in Adobe XD allows you to quickly validate your concepts before taking the time to actually engineer them. In this tutorial, I'll get you started building out your first interactive prototype in five easy steps.
I'll be leveraging some of the skills from the Get started with XD Design tutorial. If you've not watched that already, you might want to do so, although it's not required. If you want to follow along with me during this tutorial, you'll need to make sure you have the XD prototype practice file open. You can find a link to that in the description area for this video.
With those housekeeping items out of the way, let's go ahead and get started on the project. We'll begin with the process of wiring to artboard together as part of a prototype flow.
Step 01: Wire artboards.
Define a tap transition between artboards and then preview your work in the Adobe XD Desktop Player app.
In this first step, let's define some interactions between artboards. If you're following along with me, you'll want to have Step 0: Wire artboards in the practice file visible on the design canvas. I want to make sure that I'm in Prototype mode. To do that, here in the upper left-hand corner, I'm going to change modes from Design to Prototype. I also want to make sure I have the Layers panel open. I did that by clicking on the second icon from the lower left-hand corner of the app. Here on the design canvas, I'm going to hold down the spacebar to bring up the Hand tool and press and drag so that I can see these two primary artboards a bit more clearly on the design canvas.
What I want to do in this first step is implement the simplest of a wireframe flow, basically connecting this artboard to the second by allowing the user to click on this tile to get a detailed view of the chair. To do that, I want to come in and select the area that I want to let the user click in. If I were to click on the title of the artboard, notice that the entire artboard turns blue, and to the right of that artboard, I can see the ability to define a wire. I don't want the user to click anywhere on the artboard. I want them to specifically click on a product area. So for that, I'm going to click a second time, which will tunnel me into the hierarchy and allow me to select just that tile. I can tell that it's the only thing selected because I get a blue highlight with the arrow to the right. I also could come here in the Layers panel and directly select the group called Product Sheru.
With it selected, I'm going to come to that arrow there on the right-hand side and press and drag my wire. I can go in any direction with this wire -- the canvas will actually scroll if I get to the edges of the canvas. What I want to do is come to the second artboard, and I can tell when I have it selected, because it gets a blue highlight. I can drop it anywhere on that artboard. There's really only one door into an artboard. It's only when you're clicking within that artboard to go forward that you define basically areas within the artboard as a hot spot or a trigger area. I'll go ahead and release that wire.
Now let's say I made a mistake and I accidentally deselected the wire. If I were to click off on the design canvas, you can no longer see it. That's okay. I can come in and click on the title of the first artboard and when I do so, I can see any wires that might have been defined for the artboard. This wire is currently disabled or not active. So I'll roll over it and then click to make sure it's blue or active. And I can now come in and set my interaction attributes here. I'm going to go with the defaults for now, just so you can see the basics, and we'll expand from there. Under Trigger, I'll select Tap. Under Type, I'm going to stay with Transition. I want it to go to that Chairs Detail. I could change to any other artboard in the project by clicking on this drop-down. That's nice when you have many, many artboards and don't want to be dragging a wire across the entire canvas. Under Animation, it's grayed out because it doesn't relate when I'm using a Tap gesture. For Easing, I'll stick with Easing In and Out for a Duration of .3 seconds. You're welcome to play with these values if you'd like, just to experiment a little bit.
Next, I'd like to define a way that the viewer can go from this second artboard back to the first, just for the purpose of my prototype right now. For that, I'd like them to in essence to be able to click on this close box. This behaves a bit like a lightbox where it will come into view. If I hit the close box, I want it to take me back to the previous artboard. For that, I'm going to click right there on that close box. If I have trouble selecting it again, I can make sure in the chairs detail artboard that I've clicked on that icon close group, just at the group level. With it selected, rather than pressing and dragging the wire, go ahead and click and release on that arrow. XD lets me know I have the wire selected with this sort of short tail wire. In the Properties Inspector, I want to change the value just a bit. So under Trigger, we're going to stick with Tap. Under Action Type, I want to change that to Previous Artboard. This is the magic that will make sure that no matter what source artboard brought me here, I can always return to that source artboard by clicking that close box. I'll go ahead and select Previous Artboard, and there are no other options in this case. Now I'm ready to take a look at the interaction that I've just defined.
For that, I want to come back on the design canvas and click on the first artboard in the flow. It's important that you let XD know which artboard to begin with. To preview my interaction, I want to bring up the Desktop Preview window. For that, I'll come here in the upper right-hand corner, and I'm going to click on the Play button. This brings up the Desktop Preview window. From here, I can press and drag to view the content of the page and scroll down.
As I hover over any area where I've defined in interaction, notice that my cursor changes to a Pointer tool. That lets my user know it's something they can click on. When I click on that tile, I get the transition to the second artboard, just the way I expected. When I'm ready to return back to the first artboard, I'll just come here towards the upper left-hand corner, and again, as I hover over an area I can click, my cursor changes. When I click, that close box in essence takes me back to the first artboard.
Okay, great. Now that we have that concept in place, let's start to experiment with one of the amazing prototype features in XD and that's Auto-Animate or micro-interactions in Step 2.
Step 02: Add Auto-Animate transitions.
Use Auto-Animate transitions to define micro-interactions between artboards.
Auto-Animate transitions allow you to create simple yet powerful micro-interactions between objects or states of objects. The way that it's implemented in XD is pretty incredibly simple, but it's definitely simpler to understand once you see it in action. So let's just jump in. If you're following along with me, you'll want to have Step 02: Auto-Animate transitions in the practice file visible on the design canvas. You'll also want to have the Layers panel open by clicking on the Layers panel icon in the lower left-hand corner of the interface. Next up, I'm going to go ahead and move over to see that original artboard there towards the left Onboarding 01.
The first thing I'd like to do is come in and duplicate that artboard two additional times. There are a number of ways I can do that. I can select the artboard, then select Command or Control-C to copy it on the clipboard and then Command or Control-V to paste it from the clipboard back to the design canvas. A quicker way to do it with a bit more precision would be to just press and drag to duplicate it while holding down a modifier key. So I'm going to come here towards the first artboard, Onboarding 01, and I'm going to press and drag it off to the side while holding the Shift key to constrain it horizontally. I'll hold the Option key on Mac or ALT key on Windows to duplicate it at the same time. So I'll press and drag and make sure I have a little bit of room here. Let's go ahead and put about 300 pixels between it. I'll press and drag and do that a second time, so that I have the three different artboards. For simplicity's sake here, I'm going to come in and change the names. You'll notice I have Onboarding 01. I'll double-click on the title of the second artboard and change that one to 02 and then I'll hit Return on the keyboard. And I'll do that for the third artboard as well.
Before we jump into the next step, let me explain the concept that we're working on here. Many application interfaces have this idea of tutorial or an onboarding set of slides or images that help communicate the functionality of the interface, kind of like a quick tour for a new user of your experience. And the example here would be sort of a card system that shows a few tips and tricks for interacting with this website that we're designing. So I've got those cards or steps defined here within the artboard. If I click on Onboarding 01 and click inside it for that first tile there, you'll notice it's sort of ghosted out and it's outside the clipping area of the main artboard, but I've got three tiles: Discover, Learn, and then Explore; examples of tutorial details for my user. What I want to do is come in and change the look and feel of these two additional artboards. Then when we define our micro-interaction, our Auto-Animate behavior will have a smooth animation between the cards as they transition, somewhat simulating a carousel behavior.
To make that happen, as you know, I have the same exact artboard duplicated two additional times. I'm going to come to Artboard 02 and I want to select that card and I want to hold the Shift key again. I'm not going to duplicate it, though. I'm just going to press and drag until the second card is centered here on the artboard... and I can see that because my Smart Guides give me a sense that I'm lined up. When I click off, the mask for the artboard applies again, but I now have the second tile visible. Let's come over here to Onboarding 03 and do it a third time. Once again, I'll come in and select that group by clicking on it, hold the Shift key and press and drag until Explore is centered, right there on my artboard, and then I'll click off. I now have the card change that I'd like.
Next up, I want to focus on these navigation squares, here below the tiles. So I'll come in and zoom a little bit more tightly on the second artboard. There's kind of a really quick way I can change these out. I'll click once on that group. I can see, here in the Layers panel, I'm in the Onboarding Triggers group. If I click a second time, actually double-click a second time, it's going to tunnel me inside that group, to Trigger A. If you're a fan of just navigating through the Layers panel, you'll want to make sure you're on that Onboarding 02 artboard, and in the Onboarding Triggers area, I want you to click on Trigger B. What we want to do is make that 100% of the color that I've defined and then the other two, bring them back to 50%. There's a really quick way to do that. Notice, with that square selected in the Properties Inspector, this is set to 50%. I can come in and dial up the value by dragging on this slider here, but I want to be quick about it. There's a shortcut key when I have the object selected and want to change its opacity to a different value. I can use numbers between 1 and 0, basically on the keyboard. So 1 will be 10%, 5 would be 50%. In this case, I want to bring it up to 100%. So I'm going to type 0 on the keyboard which changes that.
I'll go back to the one on the left, so I'll click to select the little square there, Trigger A, on the left-hand side. And with that selected, I'm going to type 5 on the keyboard, which is going to bring that back to half of the opacity, so that it dims out a bit more. I'll go ahead and zoom back out and I'm going to switch over to the third artboard and zoom back in again. In this one, I think you can probably guess what we're going to do. I'll click once to select the group, double-click a second time to get to Trigger A. I'm going to type 5 on the keyboard to bring that back to 50%. Trigger B stays at 50% and Trigger C is going to be brought up to a 100%. I'll zoom back out. My artwork is now all ready for the animation that I want to define. I'll go ahead and zoom in again a bit more so I can see all three of my artboards as clearly as possible.
The next thing I'm ready to do now is define the interaction that allows me to transition from one artboard to another. For that, I'm going to switch back over to Prototype mode. So here in the upper left-hand corner, come from Design mode to Prototype mode by clicking on the word Prototype. The way I want to trigger a transition in this design is for my users to click here on one of these three different triggers, which would cause you to transition to another artboard. In order to define triggers or controls that will transition to the second and third artboard, I want to come in and select those individual rectangles that we played with just a moment ago. I'll go ahead and click once to select this group of objects. I'll double-click a second time and you may not be able to see iT clearly. So I'll zoom in, but notice that I have that second rectangle, Trigger B, selected there on the design canvas. Because we're in Prototype mode now, I actually see the hotspot. I'm not designing it — that would be in Design mode. Now, I'm defining the interaction. So I just want to make sure I select Trigger B and I'm going to come in and press and drag a wire to that second artboard. When I release the wire and come here to the Properties Inspector, we're going to set some different options. So still a fan of the Tap trigger. That's great. Under Action Type, what I want to do is change this to Auto-Animate.
We're going to talk about how I structured this design to allow the animation to take place. So hold on to that thought for a moment. But what I want to do is animate the differences between the designs. As we know, I changed out the tile towards the top and I changed out the trigger towards the bottom. We'll go ahead and select Auto-Animate. I want the destination to be that second artboard. For Behavior, I'll go ahead and go with Snap. I like Snap when I'm using Auto-Animate and that'll simulate a real nice easing behavior, kind of snap into place. For Duration, you're welcome to make this longer, just to visually understand a little bit about how that transition is happening. I'm going to stick with .3 seconds.
I next want to do that for the other triggers that exist here towards the bottom. So to be really thorough about it, I'm going to come to the third trigger in the list here. So on Onboarding 01, I'm going to select Trigger C. Next, I'll press and drag that wire to the third onboarding artboard, so Onboarding 03. The nice part about XD is that when I work in the Properties Inspector, many times whatever the last settings were that I used, they are sticky and they are applied to the next trigger, the next example that I define, so I honestly don't need to do anything different here. Notice that it remembers that this is a Tap gesture to Auto-Animate between artboards using Snap Easing at .3 of a second. Perfect.
I'm going to keep going now because I want to navigate pretty much everyone to everything here. So I'll click off onto the design canvas. Here, on Onboarding 02, I'm going to click within that group. I'll make sure I select Trigger A and I'm going to press and drag Trigger A to go back to Onboarding 01, the first artboard. Trigger B is in good shape because it doesn't need to go anywhere, so I won't bother with that. But here, in the Layers panel, I'm going to select Trigger C, and press and drag it to my third artboard. We're almost there. Let's go back to Onboarding 03 now. I'll come on in and select the first trigger to take it to that first artboard. I got a little over-zealous there . . . and I'll come into the second trigger, make sure I have it selected on this Onboarding 03, and press and drag it to that second artboard. All right, we now have pretty much everybody talking to everyone.
If you want to check your work, you can always click on an individual artboard title. That will show you all of the wires associated with that artboard. So notice, I can see my trigger to the left, trigger to the right, nothing towards the middle. I also see examples of where other artboards are rolling into or triggering back to the currently selected artboard.
Before we talk about how I set up the objects on my artboard to make sure that Auto-Animate was going to work, let's take a look at the feature in the Desktop Preview window, just so that we can understand the effect that we've created. For that, I'll come and click on the first artboard in the sequence, that would be Onboarding 01. Make sure I have that title selected, and here in the upper right-hand corner, I'll bring up the Desktop Preview app.
Okay, so I've got this first little tile. If I'm looking to learn about this solution here, I'm going to go ahead and click the second tile. Notice, I get a hot spot or trigger area and when I click it, it happens kind of quickly, but I have a really smooth transition from the first artboard to the second using a Snap effect — in essence, easing in with that Snap behavior. Because we wired pretty much every trigger to every artboard, I can continue on to the third by clicking on that third trigger area. I can jump back to the first, it's going to scroll across all three, so I get this really nice animation behavior. The question is, how did I make that happen? What was the magic behind it? One thing you want to keep in mind with Auto-Animate is it's is going to animate transitions between artboards for objects that are named exactly the same. If they're not named the same exact way, or you add something on one artboard or delete it on another artboard, you're going to get the normal Tap Dissolve behavior; It will just sort of fade in or fade out. But if you want the objects to animate, the names have to be exactly the same. So if we come back and take a look, let's go ahead and close out the Desktop Preview for now, and take a look at how I set up the structure here.
So let's go ahead and switch over to Design mode in the upper left-hand corner and click on that first artboard, Onboarding 01. What you'll see in there. So I'll click on some content within it and get inside. So, inside this Onboarding 01 artboard, notice I've got the Onboarding cards area. And if I expand those, what I did is, I created groups. So the card has the background image, a title, a description, and it has the background card or the rectangle. I named it Onboard Card A and I positioned it, as you can see, as the first in this sequence of three cards. There's Card B and Card C. They're all in that group and we moved them over to change their position. Because I came in and named this second card Onboard Card B and I moved its location from off the artboard here, to for example, on the second one, directly on the artboard, XD remembers that the location of that card has moved on the canvas. It's really that simple.
Let's move on to Step 3 next, where we'll add drag gestures to the same design.
Step 03: Use Drag gestures to transition between artboards.
Combine Drag gestures and Auto-Animate to simulate the drag experience of touch devices.
If you're following along with me, you'll want to have Step 03: Add drag interactions in the practice file visible on your design canvas and have the Layers panel open on the left-hand side.
What we're looking at here in Step 3 is the same content as we created in Step 2. I've just gone in and deleted the third artboard and I made some space between the first and second in the flow for the work we're about to do. Let's go ahead and move those two artboards a little more into view and I'm going to come in and zoom more tightly on it so that I can see the content. If I click on the two artboards, you can see the wires that we've already defined. So in the last step, we decided that, whenever the user were to click on one of these triggers, it would auto-animate to the next artboard, giving that nice kind of carousel behavior. There's another gesture that's popular in touch-enabled devices, like phones, tablets, also by way of trackpads, and that's the drag gesture. I can apply a second gesture to the flow that we have right here, allowing the user to either tap on the navigation or press to drag between the individual cards. Let me show you how we go about doing that.
We'll start by looking at the content on the artboard here for a moment. So if I click here on Drag 01 and I click on the cards, you'll remember that I have a group that I defined and in the group, I have three cards. And what we did was slide those cards over to make them visible from one view to the next as we animated between artboards. What I want to do for the drag behavior is actually create a click area, or in this instance a drag area, on the individual cards. So as I mentioned, we're going to leave the existing wire that we defined that allows you to tap to transition to the second artboard. In addition to that, what I want to do is click on the Drag 01 artboard here in Prototype mode. I want to click a second time to sort of tunnel into the hierarchy to select those onboarding cards. From there, here in the Layers panel, I can expand the Onboarding Cards if I'd like and I want to get to Onboard Card B. You can also direct-click or double-click to tunnel into the hierarchy. If you go too far when you're double-clicking, type the Escape key on the keyboard; That will take you back up a level. And then again, you can go in and double-click to tunnel more deeply. With Onboard Card B selected, in this case, it's a little tricky because things that fall outside the artboard start to slop into one another, so to speak... With that Onboard Card B selected, I'm going to select the wire on the right and I'm going to drag it to the second card. When I release it, what I want to do is, under Trigger, instead of Tap, I'm going to select the Drag Trigger. I want the behavior to be the same. We're auto-animating transitions to that second artboard there and from an easing standpoint, I'm going to change that to Snap. I still like the Snap behavior.
Let's go ahead and set up the return trip from the second artboard back to the first. For that, I'll click off on the design canvas. I'll click on the Drag to Artboard and double-click to get inside that group. Make sure I select this card here to the left, the Discover card. It's a little weird because I'm selecting the left card, but the handle to wire it is on the right. So if you need to, just look visually at what I'm doing here. With that Onboard Card A selected, I'm going to press and drag that wire back to the first card. And as usual, here in the interaction, I don't have to change things because I just set it a moment ago. And that's the drag behavior to auto-animate to the first artboard, using that Snap easing. All right, let's take a look at that magic. I'll click off on the design canvas, once again. Go to the beginning of my flow, which is going to be that first artboard, Drag 01, and click on the title. I'll bring up the Desktop Preview app by clicking in the upper right-hand corner. And now I have two forms of interacting between the same two artboards. The first one is, as we've already seen, if I click on this trigger, it does an auto-animate transition between the artboards. I can click that trigger to go back. Now, in addition to that, notice as I hover up top here, nothing much going on on the main card. But if I hover towards the right, my cursor changes to the Hand tool and I can now press and drag this beautiful transition between the first artboard and the second. It's just a lovely auto-animate animation that smoothly transitions from one card to another. So I can kind of just dragged along as I go. I'll get that Snap behavior as I transition between the two cards, but keeping in mind what we just did, that first drag behavior takes me to the second card. On the second card, when I come to that trigger area that we defined, I can press and drag to go back.
Okay, next up, let's take a look at another prototyping behavior... and that's overlays.
Step 04: Add overlays to simulate UI elements.
Apply overlay artboards to streamline the integration of menus and keyboards across multiple artboards.
Often, when you're working on your design, there will be design elements that reoccur across many artboards. Things like keyboards on a mobile device that might slide up from the bottom or a menu that drops down from the top. What Overlays allow you to do is design that artboard with an interaction one time, and then reuse it across many different artboards. You'll notice here that I have four artboards here towards the right. I'll go ahead and move them into view and zoom in a bit tighter so that we can see it. The artboard here on the right side, Menu Mobile, is the menu I'd like to use for all three of these artboards. What you'll notice in the upper left-hand corner is, they all have a hamburger icon or a menu icon to the left. The behavior that I'd like is, when the viewer clicks on the menu here on the left, this Mobile Menu artboard slides in from the left towards the right. Now I could come in and duplicate all three of these artboards with the menu included on them, to show the version of that artboard with the menu expanded, but it's a lot of redundant work. And if I want to go make a change to that menu, I'd have to make it many times for every example. What I'd like to do instead is leverage it across all three.
To do that, I'm going to make sure I'm here in Prototype mode. So I'll check my mode in the upper left-hand corner. It's good to have the Layers panel open. So I have that here on the left-hand side. Here in the first artboard, the Gante Collection, I'm going to go ahead and click on that menu area. So when I click, there's a subtle little rectangle around the hamburger menu icon. I want to click right on that. If you have trouble selecting it, you can click on the Gante Collection artboard and then there right at the root, is the Icon Open, the Ico-Open group. With that selected, I'm going to press and drag a wire from that trigger point to this destination artboard Menu Mobile. When I release, in the Properties Inspector, we're going to set some different options. The first one is the trigger. I want that to be a classic Tap trigger. So when they tap on the menu, I want it to appear. I'll select Tap in that drop-down. Under Action in the Type area, I don't want it to be Auto-Animate. Instead, what I want to do is have an overlay behavior. As I select Overlay, keep an eye on that Gante Collection artboard there on the left. When I select Overlay 01, the wire becomes dotted. That lets me know it's an overlay interaction. I have a visual representation of that. The second is on the canvas, I get this big green selector here with the cross overlay for that selector. What it's showing me is, that the artboard that I'm working with, Menu Mobile, happens to be smaller than the destination artboard. It could be exactly the same size, but sometimes overlays, like a keyboard, would need to be smaller than what it's being laid on top of the actual full artboard. In that circumstance, what I can do, as I wire that artboard to the initial artboard, is I can come to this handle here in the middle of that green selection area and I can press and drag. Notice that I get an overlay or a transparent example of that menu showing me where it will appear on the larger artboard. I'm going to go ahead and press and drag it all the way to the left and then I'll release. I've made sure that the close box that's here is lined up with the menu there in the underlying artboard. From there, I'll check some of the other properties that I've defined. I did want it to be an overlay for Type, Destination is going to be that Menu Mobile. Under Animation, I'm going to go ahead and have it slide right. So, it's going to come in from the left and move to the right. As you know, I'm a big fan of the Snap easing. And for Duration, let's slow it down a little bit. We can go ahead and set .6 seconds. It might be painfully slow, but just to play with that.
Before we go further, let's just take a look at what we've done so far. So, I'm going to come back, select the first artboard in the flow by clicking on Gante Collection. Here in the upper right-hand corner of the application, I'll bring up the Desktop Preview by clicking on the Play button. Back here in Desktop Preview, I have the ability to scroll down on the artboard the way I've done in the past. In this example, I want to just come to the upper left-hand corner and, as I hover over that menu, my cursor changes... letting me know that I can click. And when I click and release on that, it brings up the menu by sliding it out from the left-hand side.
What I want to do now is dismiss that overlay. Overlays have kind of an inherent built-in feature, which is that you can automatically click off or dismiss an overlay by clicking outside the overlay area. I can click this close box if I'd like. Alternatively, I can link these individual menu items to the individual artboards, if I have them. So when you define an overlay artboard, you're welcome to have areas that you might click on, the way a menu ordinarily would, inside of that artboard. For now, I'll go ahead and click the close box which will dismiss and slide that menu back out the way that it came.
Okay, now that we have that magic all set, let me show you how you can quickly repeat that or apply it to multiple artboards. I'll go ahead and close out the Desktop Preview. My monitor is a little cramped for this recording. You can keep yours open if you'd like because we're going to need it in a second. Back here on the design canvas, I want to make sure I have that first wire selected. So the one where we defined our overlay, that Icon Open artboard, in essence. I want to have that selected. I can see it's selected because I get that little dotted line indicating my Tap overlay behavior. With it selected, what I want to do is copy, not just the artwork, but the interaction. So this behavior that I'm showing you works in Prototype mode. If I were in Design mode and I just copied my hamburger menu and pasted it onto the other artboard, I wouldn't get the same behavior. Only copying and pasting from Prototype mode is going to paste the artwork and the interaction. But with that selected, I'm going to be rather careful about it, I'll come up to the Edit menu, and I'm just going to select Copy.
Now that I have that on the clipboard, I want to define the destination. Where do I want to paste those attributes? Here on the design canvas, I'll click off for a moment. And this is a bit tricky. I'm going to click into the second artboard right where that hamburger menu is, so I'll click to select it. As we know, I can always go into the Layers panel to direct select it. I'm going to hold the Shift key now and come to that second artboard to that hamburger menu there as well. And click to select it. Notice that I've selected now two different areas on two different artboards. It's a bit tricky, but if you can manage to get this far, I can now come in and apply my work in one fell swoop. You can always do this by copying and pasting one at a time across artboards. With both of those areas selected now, I'm going to come back to the Edit menu. And this time, instead of just Paste, I'm going to select Paste Interaction. That is going to paste over that overlay behavior that we defined for each of these artboards.
Let's juice this up just a little bit more, for the fun of it. I'm going to come back to the Mobile Menu here. And I'm going to click on chair in my navigation and actually drag a wire to go to that artboard, the chair detail Sheru. A bad thing is going to happen that I don't mind sharing with you. Notice as I'm dragging this wire... looks kind of funny, right? What's the reason? The reason is XD is sticky and it's remembering the last wire we defined, which was for the menu and it was an overlay wire. As I drag this new wire, it's important that I remember that when I click here, what I'm looking for is a Tap behavior that's just going to go in and transition to that other artboard without using in any sort of overlay. I just want to dissolve, so a regular transition. I don't need the Snap behavior. We'll go ahead and ease in and out. We'll shorten the Duration to about .2 of a second. Let's do that one more time for sofa. So I'll come here to the sofas area on the Menu Mobile artboard. To select it, I'm going to press and drag and drag that to the Sofa Detail Francis in this example.
Let's go see how well we did with the magic. I'm going back to the beginning of the flow and click on that first artboard. And then in the upper right-hand corner, click on the Play button. Here is my first artboard. As you might expect, come up here on the left to bring up my slide out menu. There it is. I can dismiss it and go back to this artboard here, or I can go to another artboard, switch over to chairs, by clicking on that in the navigation. There we've got chairs. Go back to my slide out menu, jump over to sofas, and so forth. So I'm starting to get a nice combination of interactivity here, where I have overlays and traditional tap gestures, combined on this set of artboards.
In the last step of this tutorial, we're going to play with one other trigger type, and that's voice triggers.
Step 05: Work with voice triggers.
Learn how to integrate voice recognition to trigger transitions between artboards.
In this step, let's leverage a very different trigger type, and that's using speech commands to control transitions to another artboard. This is a bit of a stretch for this web design, but it's a pretty common scenario when prototyping voice-activated devices. If you're following along with me, you'll want to have Step 05 Apply voice triggers in the practice file visible on the canvas. You can go ahead and keep the Layers panel closed for now and you do want to switch over to Prototype mode. So I'll go ahead and do that now in the upper left-hand corner.
We basically have four artboards. If I gave you a background scenario, the idea is that the user of my design wants to use voice search to find individual chairs, let's say, within the collection. The user comes to this Voice Shopping page and they decide that they want to speak their search term rather than type it. So they're going to click in this field here which brings up this overlay artboard. In that overlay artboard, they're basically encouraged to hold down the space bar, which is how you open up the microphone on a Mac or a PC these days, due to security issues. So holding down the space bar and then they can speak a command, and I've given them sort of the answer to the question. They can either find the Sheru chair or find the Pouf chair and, based on what they ask for, the speech recognition will cause the transition to the appropriate artboard.
Let's start by dragging a wire from the area that I want the user to be able to click, to bring up this overlay. So here on the Voice Shopping artboard, I'm going to go ahead and click in the Type or speak your search term. We can click right on this small little icon to indicate that you're going to speak your search term. So I'll click to select that. I'm going to double-click a second time because I want to get inside that group. You may remember actually I'll go ahead and do it, let's open the Layers panel so I can see where I've tunneled into. I'm on the actual icon for Voice. With that selected, I'll go ahead and press and drag to bring up the Commands artboard. What I'd like that artboard behavior to be, is more like an overlay. I might as well, I can do that. I'll move this over a bit. And with that wire still selected here in the Properties Inspector, we'll have a Tap behavior bring up that overlay. And the overlay happens to be the same exact size as the source artboard, so I don't need to come in and adjust it here, it'll line up quite well. That destination is the Commands artboard. And we'll go ahead and dissolve. I just wanted to sort of fade onto the screen and I can use that easing interaction at a pretty fast duration.
Now that I have that set, let's make sure I can close things out. So I'll go ahead and, for good measure, add a wire here. I'm clicking once, double-clicking again to get inside of the, let's see, we've got this group that I've defined that has no name, so group 75140 inside the Commands artboard. I'm just going to press and drag to bring that back. And we know the drill here, the Tap behavior should go ahead and bring me back to that previous artboard. And I have that set. I can move on now to the voice features that I'd like to go with.
Now it's time to come in and define our voice commands. One of the things you want to get your head around, is that many of the things that we've done, many interactions that we've defined, have been at an individual object level. So for example, I clicked on this object, which brought up this artboard. We've clicked on tiles that brought up artboards. When you're dealing with voice commands or speech recognition, it's at a global artboard level. So when you're defining things, you want to define it at that artboard level. What that means is, that I'll come here onto the canvas and I'm going to click on the title Commands, to make sure I select that Commands artboard. With it selected now, so the whole artboard is highlighted in blue, I want to click and release... so I'm not going to press and drag, I'll click and release on the arrow here towards the right. When I do that, here in the Properties Inspector, under Trigger, I'm going to define that I want Voice to be my trigger type. Next up, I can define what command I want my user to say to cause my interaction to occur. Now it's kind of fine reading here, but it says, for example: Find Sheru chair or Find Pouf chair. So I'll go ahead and define those two options. The command would be: Find Sheru chair.
And I'll go ahead and check some of the other settings here. I don't want the action to be an overlay. I actually want it to transition, and I want to make sure that the destination is this Chair Voice Sheru. So I'll look for it in my drop-down list here, under Destination. It's there towards the bottom: Chair Voice Sheru. I now want to come in and add my second command, and I have a couple of ways that I can do that. I could come here on the design canvas, click again to add a second wire. That second wire is basically going to feed down here to Chair Voice Pouf. Instead of clicking that plus sign, I'll come here in the Properties Inspector and, notice under interaction, there's a plus sign on the right-hand side. Remember how we talked about the scenario where you might have 50 artboards with 50 chairs? And allow your user to basically call up any of those using a speech trigger? That can be really complicated. So you have the choice of defining interactions and defining destination artboards directly here in the Properties Inspector if you don't want to continue having to drag it on the design canvas. So here in the Properties Inspector, with that artboard still selected, on the right-hand side, I'm going to click the plus sign. Notice in the drop-down, I have the ability to define voice. I can come in and add my speech command. So we'll add that one: Find Pouf chair.
And the behavior again is going to be a Transition. This time, we'll go to the Pouf artboard in the list. And I'll have the same behavior where it dissolves, easing in and out for .2 second. Let's see, we always want to get back home once we've done this. So, let's just build into this prototype, for testing purposes, the ability to navigate back to that first artboard.
For that, I'll come to the Chair Voice Sheru, and I'll click on, let's say, I'll just click on the word Altura. So I'm going to click on the logo Altura here in the Layers panel. It's nested here just below logo. I'll press and drag and have that behavior take me back to the first artboard. And this time I'm using a Tap gesture that is going to transition. The destination is going to be Voice Shopping. That's right. Dissolve is good, easing is good, speed is good. Let's do that one more time.
We know that cool trick of copying and pasting appearance, but we'll do it manually for now. So I'll come on in and click on that Altura logo. So click once to the group, double-click to nest inside, one more time, so I have just the words Altura. Press and drag to that first artboard. And again, all of the default settings are just fine.
Let's go see how well we did. We're going to click on the first artboard in the sequence and bring up that Desktop Preview. Here, I have that first artboard. Users are coming along and, in theory, they could click on any one of these to transition, but they're feeling a bit lazy and would like to do it using a speech trigger. For that, they'll come and click on the icon here, indicating speech. I have this nice overlay behavior with a background tint that I've defined that indicates to the user what the capabilities are here. So I could always close out and go back if I don't like where I am. I honestly can also click off here and it will transition me back, because this is an overlay artboard. Down towards the bottom, I get an instruction here saying that if I hold down the space bar and speak into my, in this case, my Macintosh... that the prototype is going to recognize what I'm saying and understand how to transition. Fingers crossed. Let's give it a go. Find Sheru chair. Perfect! That worked well.
I want to go back now to the root, so I'll come back up and, our little secret Altura logo will take me back. Let's try this one more time. Click on my voice search field: Find Pouf chair. Perfect. Just what I wanted. Once again. I'll come back up and click on the Altura logo to go back to the root.
Well, that wraps up the Get started with Adobe XD prototype tutorial. I encourage you to check out the other tutorials in this series and some additional Learn content that we have on the Adobe.com website in the XD Learn area.
What’s next
