Designing And Prototyping A Mobile App With Adobe Xd

In my last tutorial, I showed you how to wireframe a mobile app in Adobe XD. In this tutorial we will pick up where we left off and turn that wireframe into an interactive prototype that you can share with clients, developers, and other team members.

We will continue designing our hypothetical app, called "Bucket", that will allow users to view and add to their life's bucket list. We'll publish the finished prototype online, so that anyone who has a link can view it and interact with it. We'll also publish its "design specs", an excellent new feature that allows developers to explore your design's properties and even download assets.

1. Start With a UI Kit (Optional)

This is not a graphic design tutorial, so we will be getting a bit of visual help from an existing UI Kit. Here's a selection of UI kits from Envato Elements, and the one I'll be borrowing assets from is called Profile. XD is able to work with Sketch files, so you can just download the file and open it with XD.

Once you've opened the UI Kit, copy over your wireframes from the last tutorial and paste them next to the screens from the UI Kit. If you weren't able to follow the last tutorial, don't worry. You can just begin with the screens from the UI kit.

Feel free to copy and paste any elements you like from the kit's screens over to your wireframe. You can also rearrange and delete anything you like.

Take a look at the screenshot below to see how the original wireframe compares to the screens we will be working with for this tutorial. I would recommend playing around with the elements in the UI kit and coming up with your own version; this is good practice for working with visual assets and producing something according to your own preferences. You can delete all other screens once you're done.

2. Make It Interactive

Let's connect our screens by creating links. Click the Prototype button on the top-left of your workplace to switch to the Prototype screen. Double-click the Sign In button on your new "Bucket" screen to select it. Click on the blue arrow that appears next to it and drag it to the next screen. A pop-up will appear with options for creating your link between the two screens.

XD's newest version allows you to use three types of triggers: Tap, Drag, and Voice. We will use the new voice feature for one of our links as well as the regular tap option for the others (you can choose differently, of course!).

Select Voice from the Trigger drop-down menu. Write "Sign In" as the Command. Pick Transition from the Action menu and Push Up from the Animation menu. For more details about voice interaction, take a look at this video from Adi Purdila:

Repeat the process with the "Add" button and connect it to the third screen, but this time select Tap from the Trigger menu (this will create a regular clickable button). Connect the "Done" button on the third screen with the first screen and link the arrow at the top of the second and third screens with the screen before it (this will allow you to switch between the screens when you preview them).

Bonus: Try adjusting the Easing and Duration selections in the link pop-up and see what happens to your transitions once you start previewing them.

3. Preview Your Prototype

To test out our links, click on the Desktop Preview button (the play icon at the top-right of the workspace). A preview window will open up. To test out our voice command for the first screen, hold down the Space button and say "Sign In". Release the Space button and the second screen should appear.

Tap on the Add button to go the third screen and make sure all the other links you've made are working as expected.

Optional: You can click on the Record button at the top of the Preview screen to record a video of your experience.

4. Share!

With everything working, we are ready to share the prototype. Click the blue Share button at the top left of the screen. The current version gives you five different options. Share Document allows you to invite a collaborator via email to work on your project (provided they have XD too), Record Video lets you do exactly that (record a video of your prototype review), and Manage Links… takes you online to your cloud workspace where you can view, add, and delete prototypes you have already published. Let's take a more detailed look at the Share for Review and Share for Development options.

Click on Share for Review.

Type "Bucket" as the Title and select your options. For this tutorial, I want the online preview to Allow Comments, Open in Full Screen, and Show Hotspot Hints, but you can also password-protect your online prototype.

Click on Create Public Link when you're done. Once it's processed, you will see three blue icons appear next to the Share for Review text. Choose Open in Browser (the one to the far right) to see your prototype on the web in your browser.

Let's try the Share for Development option next. Click the Share button again and select Share for Development.

Write "Bucket" as the Title and select iOS from the Export For drop-down menu. Click on the Create Public Link button and once the processing is completed, open the published Design Specs in the browser.

You should be able to see all your screens in the browser now. Double-click on an element in any of them and it will show its properties. This allows developers to explore the flows and measurements in your prototype and leave comments.

Pro tip: If you would like developers to be able to download assets (like any images you've used) from the Design Specs view, you can do that by marking them before publishing your Design Specs.

Back in XD, select the Layers button from the bottom-left and then double-click on any image. The Layers pane will highlight the image file's name. You can then select the Mark for Batch Export icon next to the name to make it downloadable in your Design Specs.

Conclusion

Congratulations! You can copy your links and share your prototypes with anyone you want, such as prospective users, developers, or your client. Such a quick prototyping method is also great for sharing an idea or mock-up as part of your pitch to a prospective client. You can show a business owner how their app would look and feel differently in different markets even before they commit.

Stay tuned for more XD tutorials. You'll find it's updated with a host of great new features pretty frequently, so we will keep exploring them in future tutorials.

For example, check out this free course on Adobe XD auto-animate, a wonderful feature that lets you add animation to your prototypes.