As a designer on the Adobe Studio team, Cynthia Fong brings her passion to inspire others to all her creative projects.
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.
To 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.
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.
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.
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.