By Howard Pinsky
Hey everyone, I'm Howard Pinsky and in today's video, we're going to take a look at how you can combine the drag trigger with auto-animate to create a pull-to-refresh style interaction using Adobe XD.
Let's take a look on this artboard. I'm going to first create a few cards extending vertically to act as a photo feed. With all of these elements selected, I'll press the Repeat Grid button over to the right and then pull the green handle downwards until I have a few more. With those in place, I'll grab a few images from finder and drag them directly onto the grid just to give this design a more real-world look.
With the feed now set up, let's add in an icon that will indicate that a refresh is happening. Over in my Assets panel, I have a shutter design that will work perfectly which I'll place in the centre of the artboard and set the colour to a light grey. Now, making sure that the shutter icon is snapped to the top of the first image, I'll place it at the back of the layer stack. Great. With the first state complete let's work on the second.
I'll duplicate this artboard over to the right and then move the photo fee downwards to reveal the shutter. I'm then going to rotate the icon a full 360 degrees so that it spins as I pull down. Finally, one more artboard to initiate the refresh. Here, I'm only going to set the rotation back to zero degrees.
Now that the artboards are ready to go, let's wire it up in Prototype mode. I'll start by selecting the repeat grid containing the various cards and drag the blue handle to the second artboard. Now, instead of tap, I want a drag trigger, which will automatically default to auto-animate.
Next, I want to immediately transition to the third screen. To do this, I'll select the entire second artboard, then drag the handle to the third. This will let me choose time as the trigger. And, since I want the animation to kick off immediately, I'll have the duration set to 0. I'll again want auto-animate for the action, then for the easing I'll set it to In-Out with a duration of around 2 seconds.
Lastly, one more time transition back to the first artboard. This time, I'll speed up the duration and set the easing to snap. With all that set, let's see this in action.
The play button at the top will launch the preview where I can now drag the feed down and when released, the rest of the interaction kicks off. If you want to get really fancy, you can also have new photos flying in from above.
And that's how you can create a pull-to-refresh style interaction using Adobe XD.
Simulate the user experience in your mobile app prototypes by adding pull-to-refresh interactions. Convey how users will intuitively navigate list-based applications by incorporating this drag gesture into your designs. Communicate the behaviour of your app to developers and stakeholders.
