1. Web Design
  2. Adobe XD

How to Create a UI Prototype Using Adobe XD


Historically, Adobe Creative Cloud hasn’t had a tool for designers to quickly and efficiently prototype layouts, or get team feedback before creating the final UI design. This missing gap has been recently filled by Adobe Experience Design CC (Adobe XD). The application first introduced as “Project Comet” during Adobe MAX 2015 is now available for download as beta version from Adobe Creative Cloud. It’s a desktop application allowing designers to prototype interfaces for web, mobiles, and tablet devices. Let’s take a look at what it can do!

Adobe XD homepage
Adobe XD homepage

Introducing Adobe XD

Adobe XD uses a remarkably simple yet efficient interface; a style inherited from its sister applications in the Creative Cloud package. It provides tools to prototype for different platforms including web, mobile, tablet, and others. 

When launching the application, the welcome screen provides you with a variety of standard screen size templates and the ability to add your own custom document size. Additionally, the screen includes access to number of assets that can be used as a starting point to learn more about the application, UI design elements for different mobile devices such as iOS and Android, and access to online resources such as tutorials, and more.

Adobe XD Welcome screen
Adobe XD Welcome screen 

The Adobe XD workspace is divided into two views; Design and Prototype, which can be accessed from the top right side of the application. In the Design view, designers can use a number of tools and features to create design layout elements, add artboards which are used to represent the layout pages, and import resources from other applications such as Adobe Illustrator and Adobe Photoshop. 

Tip: Designers can copy design elements directly from these applications and paste them into the selected artboard as vector-based graphics. This allows for modification of the imported artwork by changing the color or even modify the path anchor points.

The second view in Adobe XD is the Prototype view which allows designers to link between artboards (pages) and define the relationships between them through interactions. Once the project is done, designers can preview it by clicking the preview icon on the top right, or sharing it with the team through a web-based link. Designers can also save different screens in bitmap or vector-based formats.

Adobe XD Tutorial

After exploring the basic anatomy of the Adobe XD interface, the following example demonstrates the step-by-step process of creating your first UI prototype in Adobe XD. We’ll build something for the iPhone 6 screen size. You can download the practice files by visiting the Github repository for this tutorial. Alternatively download the images directly from Pixapay:

The first part of this tutorial will focus on creating a layout in the Design view of Adobe XD.

1. Create the Prototype Project

Once Adobe XD is opened, the Welcome screen appears and allows you to choose the project type. Select the iPhone 6 (375 × 667px). Then click on the iPhone icon to create the project. From the Apple iOS, you can access iPhone UI elements that can be used in your prototype. Once the artboard is created, double-click the artboard name, and change it to “Home”.

Figure 1 Adobe XD Welcome screen
Adobe XD Welcome screen

2. Create the Prototype Background

Click the artboard to display its properties in the Properties panel on the right side of the application, and click on the Fill color to open the Colors selection dialog box. Set the color to dark gray and close the dialog box.

Figure 2 Set the artboard background to dark gray animated GIF
Set the artboard background to dark gray

3. Setup the Screen Header

Next go to File > Import. In the file browser, navigate to the header image and click Import. Use the controls around the image to resize it to fit in the screen header. You can also double-click the image to crop the image.

Select the Text tool from the Tools panel, click on the header area and type “Nature”. Double-click the text and from the right Properties panel, select “Helvetica”, set its weight to “bold”, and size to “32”. Double-click the Fill color and set it to “dark gray”.

4. Build the Content Area Background

Select the Rectangle tool from the Tools panel on the right side, then create a rectangle under the header. From the right Properties panel, set the Fill color to dark gray, and uncheck the Border option to remove the stroke.

Create the content area background
Creating the content area background

5. Add the Content

Import the content thumbnail and add the text as highlighted in step 3. Setup the thumbnail to fit in the content area background and on the right side add the text as shown in figure 5 below. In order to crop the thumbnail to a specific area, you can double-click the image and use the four corners to crop it.

Adding content below the header area
Adding content below the header area

6. Creating Content Grid

One of the most useful tools in Adobe XD is that you can create a grid out of existing content without duplicating them manually. Press Shift on your keyboard and select the thumbnail, content background, and text. Then, click on the Repeat Grid button in the Properties panel. This translates the created content into a grid.

Drag the bottom green icon to create vertical grid of the content. Then, you can double-click the repeated content to modify it. Finally, select the content and choose Ungroup Grid to break the linkage between them.

7. Create New Page (Artboard)

In order to create a new layout page, click on the Artboard tool from the Tools panel on the left. Then, select the iPhone 6 template from the right to create a new page. 

Create a new Artboard
Create a new Artboard

8. Create More Pages

Repeat the above steps to create more pages and add content to the pages as shown above. The final look for the layout should be something like the image below.

The final prototype of the UI design layout
The final prototype of the UI design layout

Once the design layout is complete, we will jump to Prototype view to build the linkage between the created pages.

9. Setup the Project Homepage

Before setting up the linkage between pages, we need to assign a homepage for the project. The homepage can be any of the created pages. In this example, we will assign the first layout we created as the homepage by clicking on the Home icon that appears to the top left of the artboard.

Assign a homepage to the project
Assign a homepage to the project

10. Build the Linkage Between Pages

In order to link between the pages, select the homepage, click on the blur arrow to the right side. The Target floating menu appears; select the next page, and set the transition animation type (for example “Dissolve”). Repeat this step to link between the other pages.

Link between pages
Link between pages

11. Creating Interaction

In this prototype, the first content block on the homepage should jump to the first content artboard, and the second content block should link to the second artboard…etc. So, select the first content block, and click the right blue arrow to set the target similarly to what we did in step 10. Repeat the step with the second content block.

Add interaction to content
Add interaction to content

After creating the prototype, there are two main methods to preview it. The first is the Preview feature within Adobe XD itself, and the other is through the web link that can be sent to team members.

12. Preview the Prototype

Click on the Preview icon to the top right of the application. This will display a preview screen which allows us to view and navigate the different pages. As a nice extra, it has a Record icon which allows us to record the flow between pages and save it to Quicktime (MOV) format. 

Previewing the prototype in Adobe XD
Previewing the prototype in Adobe XD

13. Sharing the Prototype

We’re done! Now we just need to share our document with other team members or stakeholders who aren’t necessarily using XD. Click on the Share icon at the top right of the application; a floating menu will appear, providing a URL that can be copied and shared between team members:

The prototype web URL
The prototype web URL

In Conclusion

As we’ve seen, the current beta version of Adobe XD provides a simple, yet effective tool for UX professionals to visualize their research for web, mobile, and tablet devices. It allows them to integrate artwork elements from other Adobe applications such as Adobe Illustrator with maintaining its editable vector format. 

In upcoming versions of Adobe XD, we’re promised more features; such as improved colors, ability to add layers, improved share features, support for scrolling, and adding more interactive elements to the Prototype View.  If you’ve tried Adobe XD already we would love to hear your first impressions; giving feedback now will help shape future releases.

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.