Breathe life into your designs

Wire up your first prototypes in Adobe XD

prototyping.gif

What you’ll learn in this Series


 

To introduce you to prototyping in Adobe XD, this series is going to breathe life into your designs. You’ll learn how to create basic transitions, add motion using auto-animate, use the drag trigger, and save space with overlays.

 
 
xd-resources-fantasy-sport-ui-600x340.jpg

Follow along!

If you wish to follow along, download the specific screens or full UI kit below.

 

Basic Transitions

To kick off our look into prototyping, let’s take a look at basic transitions to get you from artboard to artboard.

 

Add motion with Auto-Animate

If you’re looking to add a touch of motion to your prototypes, auto-animate can help you do just that, and best of all, the process is as simple as designing.

 

Using the Drag Trigger

Whether you want to prototype a photo gallery, a pull to refresh animation, or other interaction to help users navigate through your application, the drag trigger and auto-animate can help you get going.

 

Using Overlays

Using overlays, you can link up reusable elements, such as keyboards, menus or modals to several screens – without having to take up unnecessary space.

 

Prototyping with Voice

As virtual assistants become more and more popular, you may find yourself wanting to navigate through your applications using just your voice. Let’s explore how Adobe XD can help you do just that.