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.
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.
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.
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!
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.
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.
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.