Getting started with Adobe Experience Design –  Part II

In the first part of this guide, you learned the basics on how to create awesome designs with Adobe XD, but now comes the real deal! Creating a Prototype with Experience Design will be as easy as pie, if not even easier.

If you didn’t read part one of this guide, I really recommend that you do, but it’s not absolutely necessary since we will create this prototype with the sample files that Adobe provides us. (Preview Version 0.5.22.8 Beta September 2016.) I customized the example project to explain the steps a little bit better.

1. Get started with the Sample Files

When starting Adobe XD, you will be able to to choose between various options. This time we will open “Explore the basics” to get started with the prototype modus.

Explore the basics, by Adobe XD
Explore the basics, by Adobe XD

After you open the sample files press ctrl+tab to switch from Design-mode to Prototype-mode. (That also works the other way around!) Thats it, you can now begin to create your prototype! Let’s do it!

2. Label your project’s homepage

The first thing you want to do is to set up the project’s homepage Artboard. This can easily be done by selecting your homepage’s Artboard. In my case I will use the “Login”-page, and clicking on the small Home Icon in the upper left corner of the Artboard.

Setting up the Homepage - Adobe XD
Setting up the Homepage – Adobe XD

 

3. Link your Artboards

After selecting the Element you want to link, you will find a small blue arrow on the right side of it. When you click this Arrow you can select the target-page (you can also just drag the arrow on to the desired page). Then you can select the transition, ease and duration of the animation.

Create a link between two Artboards - Adobe XD
Create a link between two Artboards – Adobe XD

Link all your Artboards in your projects together to create a fully functioning prototype.

4. Preview your prototype (on your Mac)

You can preview your prototype by clicking on the play-button in the top right corner of Adobe XD. A new window with your clickable prototype pops up. You can even record a video of your interactions by clicking on the red record-button in the top right corner of the preview window. You can now share the .mov file with whomever you like.

Quick tip: When you make changes in your Artboards, the preview will automatically update itself!

Preview your prototype on your Mac - Adobe XD
Preview your prototype on your Mac – Adobe XD

5. Preview your prototype (on your smart device)

To the left of the play-button, you will find the smartphone-button. If you’ve connected your smartphone you’ll also be able to preview the prototype on your mobile devices.

Adobe XD Public Preview 7 — September 2016 Release | Adobe Creative Cloud
Adobe XD Public Preview 7 — September 2016 Release | Adobe Creative Cloud https://www.youtube.com/watch?v=wwNasnvCiag

6. Share your prototype online – Adobe Creative Cloud

The last option in the right corner is the share-button. There you can create a new link or update an existing link if you’ve already shared your prototype. If that’s already done, you will find a short link that you can send to your developer team, stakeholders, or even your pet dog.

Share your prototype - Adobe XD
Share your prototype – Adobe XD

Stay tuned! In the next articles about Adobe XD, I will cover the upcoming features and provide an in-depth look into some projects.

Please share your thoughts about this guide and Adobe XD. If you have any questions, don’t hesitate to ask! Feel free to share this article and follow me on Twitter.

295 thoughts on “Getting started with Adobe Experience Design –  Part II

Leave a Reply