Animations    

In the Prototype mode you can create smooth animations to better present your design. Using the Auto-Animate feature along with the Drag or the Time triggers you can create a wide range of cool animated effects and transitions in just a few clicks.

 

1. We’ll use this horizontal gallery to exemplify a swipe and drag effect. In such a design you want users to drag to the left and get to see the content that lies outside the artboard.

 

2. First, you need to duplicate your artboard. Hold down the Option (Mac) or Alt (Win) key, and then click and drag on the name of your artboard to easily duplicate it. 

Focus on the new artboard, select the horizontal gallery and move it to the left. The location that you set for this horizontal gallery will be the end point of your swipe and drag effect.

 

3. Switch to Prototype Mode mode to start creating our animation. Select the horizontal gallery from the first artboard and wire it with the second artboard. In the Property inspector set the trigger to Drag and Auto-Animate will be automatically selected.

Now, if you hit the Play button to preview your animation you will notice that you can swipe and drag to the left, but you can’t swipe and drag back to the right.  

Select the horizontal gallery from the second artboard and wire it with the first artboard. By default, Adobe XD will apply the last settings used for an animation which means that you don’t have to make any changes in the Property inspector.

Click that Play button and you’ll be able to smoothy swipe and drag through your horizontal gallery.

If you want some examples of what you can achieve with Adobe XD’s animations, you can check the XD Animation Examples section of XDGuru, where you can download free animation templates and examples.