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.

As a designer on the Adobe Studio team, Cynthia Fong brings her passion to inspire others to all her creative projects. 

您需要什么

This sample file is an Adobe Stock asset you can use to practice what you learn in this tutorial. If you want to use the sample file beyond this tutorial, you can purchase a license on Adobe Stock. Check out the ReadMe file in the folder for the terms that apply to your use of this sample file. 

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.

3 artboards for ice cream mobile app design. Ice cream cone with one or three scoops, 1st has title, 2nd and 3rd show price

Add and take away

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.

UX design showing 2 artboards with callout for panel showing layer names, artboard on the right has one less scoop

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.

3 artboard designs for mobile app, 1st shows 2 scoops of ice cream, last 2 show 1 scoop, last has no price or text

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.

Adobe XD components panel, artboard has 1 scoop, order text and order button on artboard and highlighted with green border

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.

Blue wires connect artboards for interactive prototype with five artboards with 1 dialog showing interaction settings

Sprinkle the fun

Design fun, interactive animations for your mobile app.

Closeup of a hand holding a smart phone with placeholder image showing app design mockup created in Adobe XD

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

01/28/2020

Artist: Cynthia Fong

Adobe Stock contributor: Subbotina Annapamela_d_mcadams, rawpixel

此页面是否有帮助?