How to Make an Animated Prototype in Adobe XD CC | Adobe Creative Cloud
pixelmove.com
Add fluid movement to your prototypes.
Start from scratch, or download practice files [https://learndownload.adobe.com/pub/learn/xd/animated-prototype.zip] for a head start. Steps below.
Draw paths to animate:
1. Open an .xd document, or use ours (animated-prototype.xd).
2. Click the artboard name, then use alt (or option) + drag on your keyboard to duplicate the original artboard.
Tip: To animate objects in Adobe XD, the layers must have the same name. Duplicating an artboard also duplicates the layer names.
3. Double-click one of the wavy lines to convert it to a path. Drag each point to change the shape of the path. Repeat for each of the three wavy lines.
4. Duplicate the updated artboard and change the path of the wavy lines on the newest artboard. You should have a total of 3 artboards now.
Animate the paths:
1. Go to Prototype mode and click on the name of the 1st artboard to select it.
2. Drag a wire from the blue arrow to the 2nd artboard and choose the following settings:
– Trigger = Time
– Delay = 0s
– Action = Auto-Animate
3. Drag a wire from the 2nd artboard to the 3rd artboard. XD remembers the previous settings so you don’t have to change anything.
4. Drag a wire from the 3rd artboard back to the 1st to create a looping animation.
5. Choose Desktop Preview, Cmd+return or Ctrl+enter, to test your prototype.
That’s it!
To learn, more visit our Adobe XD CC Tutorials page: https://helpx.adobe.com/xd/tutorials.html
Subscribe: https://www.youtube.com/user/adobecreativecloud?sub_confirmation=1
LET’S CONNECT
Facebook: http://facebook.com/adobecreativecloud
Twitter: http://twitter.com/creativecloud
Instagram: http://www.instagram.com/adobecreativecloud/
Adobe Creative Cloud gives you the world’s best creative apps so you can turn your brightest ideas into your greatest work across your desktop and mobile devices.