How to Create a UI Prototype Using 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”.

Adobe XD Welcome screen

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

Set the artboard background to dark gray

  1. 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”.

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

Creating the content area background

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

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

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

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

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

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

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

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

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.

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

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

Learn Adobe XD

We’ve built a comprehensive guide to help you learn Adobe XD, whether you’re just getting started with UX design or you want to explore prototyping and collaboration.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.