By Dani Beaumont
In Step 2 we looked at the auto-animate transition between artboards. Let's look in Step 3 at alternate triggers like the Drag gesture for transitioning between those artboards. What we're looking at is the same content as we created in Step 2.
What I want to do is add a second trigger to the transition we just defined and that's a drag gesture. For that what I want you to do is go ahead and make sure that you can see both "Onboarding 01" and "Onboarding 02" artboards that they're well in view for me. I'll come in and select the two of them and then just hit CMD-3 or CTRL-3 on Windows to magnify them so they're a bit larger. Next what I want to do is add that Drag gesture to simulate drag on a touch enabled device. In order to implement the drag behavior what I want to do is make sure I'm in Prototype mode, and again hold that CMD or CTRL key and click on the image that's here towards the right-hand side.
If you want to tunnel into the navigation in the Layers panel you're going to want to click on product number two. What we want to do is add a drag behavior there, so with the objects selected on the canvas, I'm going to select that arrow to the right and press and drag it to the second artboard. Here in the Properties Inspector instead of a tap trigger, what I want to do is select a drag trigger.
With that selected, I'll stick with pretty much the same attribute so auto-animate is the transition to that second artboard.
We want to be able to drag back, so for that I want to come to the second artboard, Artboard 02 here, holding the CMD key. I'm going to click on that first image there on the left hand side and I'm going to press and drag that second interaction there back to the first artboard. So with that set, I can come here in the Properties Inspector. Make sure it's set to drag. So, remember how XD kind of remembers your last move and suggests it for the next move? I've got drag with auto-animate, taking me back to that first artboard.
Now if you happen to make a mistake as you're working and you want to get rid of any of the wires that you have dragged, you can always come in and select one of those wires. Notice as I roll over a wire I get a tooltip letting me know what interaction is defined on that wire so if I roll up here towards the top I see dragged down here I see tap. If I were to click on it to select it, it becomes blue instead of that gray color and I can then come in and just type Delete on the keyboard to delete that individual wire. I like that wire so I'm going to undo that delete. I'm going to hit CMD on Mac or CTRL on Windows and the letter Z To bring it back.
Notice how it's a bit strange here I've got the wire for drag. It looks like it's kind of not touching anything -- that's because we've got these objects that are falling outside the active artboard area. With everything all set now let's take a look at the work that we've just done.
Now, as usual, before we can preview this we need to set the
home or the beginning of our flow. For that, I want to come here to onboarding, make one click on the title, and then click on that home screen so that I know that my new flow is going to start with this new artboard here in step three. With that all set in the upper right hand corner, I'll come click on the desktop preview app. Here in the desktop preview app, I can go back to the tap navigation that I implemented. Clicking the left dot takes me back to the left artboard, the center dot to that right artboard. In addition to that, now I can come in and just roll over the image to the left hand side and press and drag for a smooth transition from that second artboard to the first. Or here on the right hand side, press and drag from that first artboard to go back to the second.
When designing for mobile devices, adding gestures for drag can add additional fidelity to the design to make it feel realistic. The Drag trigger in Adobe XD can be used to create swipe gestures, and scroll animations within your prototype, or be used to simply transition between two artboards with Auto-Animate. Learn how to create these gestures using the Drag trigger in Adobe XD's prototyping mode, and then preview it on a device to try it in action.
Up next, Prototype Step 04: Add overlays to simulate UI elements.
