How to Animate Images in Adobe XD
Before You Start
Fong provided an XD file that includes a fully designed artboard and additional design elements for you to use as you try this technique. Use this practice file or go ahead with your own.
Step 1: Make It a Double
Fong started by duplicating her second artboard. To do this, she clicked the artboard name as she held Alt (Windows), or option (macOS), and dragged to the right.
Step 2: Add and Take Away
When you animate objects between artboards in Adobe XD, the layer names must match. Duplicating an artboard also duplicates the layer names. Fong removed the top scoop on the second artboard and moved the ice cream cone up. Then, she updated the copy and price to reflect the new offering.
Step 3: Offer More
Fong’s final prototype included a total of five artboards. To create these, she duplicated the artboard from the previous step, removed the second scoop, moved the cone up, and updated copy and price. Then, she duplicated this artboard and removed the copy on the last artboard.
Step 4: Design with Components
The Components section of the Assets panel includes reusable elements to use throughout this app design. Fong dragged the order text and order button onto the last artboard.
Step 5: Animate the Interactivity
Fong switched to Prototype mode to define the interactivity. She clicked the first artboard and dragged a wire to the second artboard. Then, she set the Trigger to Tap and the Action to Auto-Animate. XD remembered the animation settings, so Fong dragged a wire from each artboard to the next, then back to the first. Finally, she tested the interaction in Desktop Preview.
Sprinkle the Fun
Design fun, interactive animations for your mobile app.