How to Use Auto-Animate for Prototypes in Adobe XD | Adobe Creative Cloud
Add fluid movement to your prototypes with this Adobe XD auto-animate tutorial. Get started with Adobe XD: <a href="https://www.adobe.com/products/xd.html" title="https://www.adobe.com/products/xd.html" target='_blank'>https://www.adobe.com/products/xd.html</a><br />
<br />
Start from scratch, or download practice files [<a href="https://learndownload.adobe.com/pub/learn/xd/animated-prototype.zip" title="https://learndownload.adobe.com/pub/learn/xd/animated-prototype.zip" target='_blank'>https://learndownload.adobe.com/pub/learn/xd/animated-prototype.zip</a>] for a head start. Steps below.<br />
<br />
Draw paths to animate:<br />
<br />
1. Open an .xd document, or use ours (animated-prototype.xd).<br />
2. Click the artboard name, then use alt (or option) + drag on your keyboard to duplicate the original artboard.<br />
<br />
Tip: To animate objects in Adobe XD, the layers must have the same name. Duplicating an artboard also duplicates the layer names.<br />
<br />
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.<br />
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.<br />
<br />
Animate the paths:<br />
<br />
1. Go to Prototype mode and click on the name of the 1st artboard to select it.<br />
2. Drag a wire from the blue arrow to the 2nd artboard and choose the following settings: <br />
<br />
- Trigger = Time<br />
- Delay = 0s<br />
- Action = Auto-Animate<br />
<br />
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. <br />
4. Drag a wire from the 3rd artboard back to the 1st to create a looping animation. <br />
5. Choose Desktop Preview, Cmd+return or Ctrl+enter, to test your prototype. <br />
<br />
That's it!<br />
<br />
To learn, more visit our Adobe XD CC Tutorials page: <a href="https://helpx.adobe.com/xd/tutorials.html" title="https://helpx.adobe.com/xd/tutorials.html" target='_blank'>https://helpx.adobe.com/xd/tutorials.html</a><br />
<br />
Subscribe to Adobe Creative Cloud: <a href="https://www.youtube.com/AdobeCreativeCloud?sub_confirmation=1" title="https://www.youtube.com/AdobeCreativeCloud?sub_confirmation=1" target='_blank'>https://www.youtube.com/AdobeCreativeCloud?sub_confirmation=1</a><br />
<br />
Download Adobe Express: <a href="https://adobe.ly/3rDM7M8" title="https://adobe.ly/3rDM7M8" target='_blank'>https://adobe.ly/3rDM7M8</a><br />
<br />
Learn More: <a href="https://www.adobe.com/products/photoshop/explore.html?sdid=H822XMCW&mv=social&mv2=ownsoc-org" title="https://www.adobe.com/products/photoshop/explore.html?sdid=H822XMCW&mv=social&mv2=ownsoc-org" target='_blank'>https://www.adobe.com/products/photoshop/explore.html?sdid=H822XMCW&mv=social&mv2=ownsoc-org</a><br />
<br />
About Adobe Creative Cloud:<br />
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.<br />
<br />
Connect with Adobe Creative Cloud:<br />
Twitter: <a href="https://twitter.com/creativecloud" title="https://twitter.com/creativecloud" target='_blank'>https://twitter.com/creativecloud</a><br />
LinkedIn: <a href="https://www.linkedin.com/showcase/adobe-creative-cloud/" title="https://www.linkedin.com/showcase/adobe-creative-cloud/" target='_blank'>https://www.linkedin.com/showcase/adobe-creative-cloud/</a><br />
Facebook: <a href="https://www.facebook.com/adobecreativecloud" title="https://www.facebook.com/adobecreativecloud" target='_blank'>https://www.facebook.com/adobecreativecloud</a><br />
Instagram: <a href="https://www.instagram.com/adobecreativecloud/" title="https://www.instagram.com/adobecreativecloud/" target='_blank'>https://www.instagram.com/adobecreativecloud/</a><br />
<br />
#AdobeXD<br />
<br />
How to Use Auto-Animate for Prototypes in Adobe XD | Adobe Creative Cloud<br />
<a href="https://www.youtube.com/watch?v=JYtZ2zsdE_sUQap14VUAjc" title="https://www.youtube.com/watch?v=JYtZ2zsdE_sUQap14VUAjc" target='_blank'>https://www.youtube.com/watch?v=JYtZ2zsdE_sUQap14VUAjc</a><i class="fa fa-language transViewIcon clickable" title="Translation"></i>
How to Use Auto-Animate for Prototypes in Adobe XD | Adobe Creative Cloud
Video date 2018/12/03 23:30
https://www.youtube.com/watch?v=UQap14VUAjc
Play musics without ads!
Share on SNS
Facebook
Twitter
Naver
Naver Blog
Kakaotalk
Naver Line
Naver Band
Kakaostory
Copy URL
How to Use Auto-Animate for Prototypes in Adobe XD | Adobe Creative Cloud
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:
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.
About Adobe Creative Cloud:
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.
https://www.youtube.com/embed/UQap14VUAjc
Hoyatag
View comments