Designer Cynthia Fong creates a dynamic, interactive image in her prototypes to test her designs. In this short tutorial, see how Fong brings her mobile app ideas to life 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 the 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.

Note: Project files included with this tutorial are for practice purposes only.