Animating Adobe XD Ad Designs with Animate

1h 16mIntermediate2020-04-22

Authors

Joseph Labrecque

University Professor, Adobe Educator, Studio Head

Course details

Learn how to create compelling motion and animation in your digital ad designs using Adobe XD and Adobe Animate. Expert Joseph Labrecque takes you step by step from basic design to prototype to working advertisement. Learn how to design a basic layout with imported imagery and the built-in tools in XD. Discover how to reproduce and modify the artboard design in the XD Prototype workspace, and send your assets and specifications to Animate to complete the layout. In Animate, Joseph shows how to animate the project elements and add interactivity, such as a call to action button, with JavaScript and the Actions Wizard. Finally, learn how to export your complete ad from Animate as an animated GIF, a format accepted by most major ad networks.

Topics include:
Building artboards
Adding text
Creating design states and variations
Adding motion
Importing assets from XD into Animate
Creating tweens in Animate
Adding interactive elements
Publishing an ad

Skills covered

Adobe AnimateWireframingInteractive Web ContentAdobe XDWeb GraphicsUX DesignWeb DesignUser ExperienceProjectAdobeWeb Development

Concepts

0. Introduction

01 - Building an ad with Adobe XD and Animate
02 - What you should know
03 - Using the exercise files

1. Advertisement Design in Adobe XD

04 - Creating a new XD project
05 - Building artboards
06 - Design and layout
07 - Adding text

2. Prototyping and Sharing Animation

08 - Design states and variations
09 - Adding motion with Auto-Animate
10 - Sharing design specs

3. Bringing an XD Design into Animate

11 - Creating a new Animate project
12 - Importing assets from XD
13 - Interpreting colors and swatches
14 - Translating text specifications
15 - Completing the layout

4. Animating the Advertisement

16 - Working with the Timeline
17 - Creating tweens
18 - Timing and easing
19 - Animation preview

5. Adding Interactive Elements

20 - Adding interactive elements
21 - Designing button states
22 - Reacting to user interaction

Conclusion

23 - Publishing an ad
24 - Further information