By Howard Pinsky
Whether you want to prototype a photo gallery, a pull-to-refresh animation, or other interactions to help your users navigate throughout your application, the drag trigger and auto-animate can help you get going. Let's take a look.
In this first example, we may want to create a draggable photo gallery that shows off many of the team members. I already have the first view created with the cards extending off the artboard and they've all been placed inside of a group, which ensures that they don't get thrown onto the pasteboard. Duplicating this artboard over to the right I can now create the second view. I'll not only shift the cards over but I'll also adjust their sizes making the center card larger and the ones off to the side a touch smaller. I'm also going to jump into the shapes and adjust the masks, again making the centered one larger and the others smaller. Great.
So now that both views are set up and ready to go let's hop into Prototype mode and wire them up. I can either select the entire group of cards, or individual ones, but seeing that I may want to use the cards to determine the drag direction I'll select just one, and then pull the blue handle over to the second artboard. Now within the properties instead of a tap trigger I'll want to choose drag which will automatically select auto-animate as the action with that one in place. I'll also wire one up from the second artboard back to the first again making sure that drag is the trigger.
Launching the preview window I can now click and drag the cards over to the left and, since I made sure to change the size and masks, everything beautifully animates. And from the second screen I can drag back to the first. From here you can also add in a tap trigger to expand the cards and reveal more information. Of course there's so much more you can do with drag triggers. As a quick example say you wanted a user to be able to move players around the field to new positions simply by designing the various views. You can make this happen, and, just like in the first example, all you need to do is wire up the element that will be moved to the next artboard and make sure that drag is the trigger.
You can now launch the prototype and drag away. And that's a look at the drag trigger in Adobe XD. Make sure to check out our other videos to crank up your knowledge on working with assets, repeat grids, responsive resize, in-depth prototyping and a lot more. I'll see you soon.
Whether you want to prototype a photo gallery, a pull-to-refresh animation, or swipe gestures in your mobile experiences, the drag trigger in Adobe XD will help you achieve it. Paired with Auto-Animate, Adobe XD drag triggers emulate a drag gesture on a mobile device, so you can add drag animations for swiping through photos, or toggling switches. Follow along with Howard Pinsky in this Adobe XD drag trigger tutorial.
