By Dani Beaumont
Drag gestures in Adobe XD allow you to simulate animations between artboards by dragging between them.
If you watched my earlier video on Auto-Animate, you've seen how you can wire to artboards together to animate the difference between objects. Drag gestures take this experience one step further by allowing you to simulate the drag experience on a touch device. In this first artboard, I have down here what's known as a carousel design. This simulates the concept of cards as they come closer to the viewer they become larger, and as they move away, they seemed to become smaller. To achieve this carousel effect I've gone in and duplicated the first artboard a second time and you'll notice the differences is that the main album becomes smaller and it moves towards the left the smaller album on the right becomes larger and moves towards the center. Things like the play button move from the lower left-hand corner to the center of the design.
Well now that I have the before and after state of my animation, I'm ready to apply the drag gesture as an auto-animate transition. To do that I'll switch over to Prototype mode, and you'll notice we still have the first wire that we defined that allows you to click on the album and bring up a full view of full screen view of that album cover. I'm going to leave that in place and what I want to do is actually add another wire to this item that's here towards the right-hand side. Now when I click on this item notice that it's outside the artboard to a certain extent, but it does have the ability to drag a wire from it. I'm going to go ahead and select that wire and drag it to the second artboard. In the animation options here instead of "Tap". I'm going to select "Drag". I want it to still be an auto-animate transition, and I want the destination to be that second artboard with once again that snap transition between artboards. I'm going to do the same with the second artboard for the object there on the left. I'll select it. I'm going to drag that wire back to the first artboard, make sure the settings are correct, so my trigger is going to be dragged. I want to auto-animate to the first artboard with a snap behavior. With that all set let's take a look at my work. I'm going to click on that first artboard and bring up the desktop preview app. Notice I can still click on that album cover instead. I want to come here to the right-hand object, and instead of clicking, I'm going to press and drag on my trackpad to take me to that second artboard.
Having done that, I've got a second drag spot here. If I press and drag it'll take me back to the first artboard, and alternatively clicking on the main image is going to take me to that full-screen view of the album. So what you're seeing is really sophisticated interactivity within artboards using the auto-animate feature combined with the drag gesture.
I encourage you to give these new capabilities a try.
Learn how to add drag triggers in Adobe XD and pair it with Auto-Animate to create realistic drag gestures and interactions on your Adobe XD prototypes. Drag animations mirror behaviours and interactions found on mobile devices, and are a great way to prototype swipes, image galleries and sliders using Auto-Animate.
