top of page

Step By Step Guide To Prototyping A Mobile App Using Adobe XD

Designers connected with UX generally use multiple tools for the different tasks connected to prototyping. Often switching between these tools can impact on the pace of your working. Adobe HD gives you a single tool to facilitate a connected workflow. Hence you can bank on this invaluable tool to design and prototype your experience within minutes. Follow these steps once you have installed Adobe XD on your computer. To start with, click on ‘Start a new design’ with an iPhone artboard template.

Step By Step Guide To Prototyping A Mobile App Using Adobe HD

Create a second artboard

Create a second Artboard with the Artboard tool (A).

On the property inspector, you will find on the right side, you can change the Artboard Background color to black.

Download tutorial assets

Go to Finder and drag the iPhone-status-bar.svg’ to the top of Artboard 1. Copy paste it onto Artboard 2. This will display the status bar on both the artboards. Click on cmd+L to lock the status bars on both the artboards so that the properties cannot be modified. You can use the same shortcut anytime or click on the ‘lock’ icon to unlock them.

Draw a rectangle

Use the Rectangle tool (R) to draw a rectangle without any borders. On the property inspector panel, you will find on the right, set the dimensions to 375 x 230.

Reorder objects

Click on the ‘eye’ icon for turning the border or fill on and off. To be able to change the colors using hexadecimal values, click on the color icon and select the second tab from the list. Change the drop-down to ‘RGB Sliders’.

Create a header

Use the text tool (T) to create a header for the team page. Draw a grey color square for the team member’s photo to sit.

Add another rectangle

You will have to create a white rectangle without borders to include the team member’s name on the header and job description as the sub-header. For the time being, you can use the placeholder text and customize it as per your taste.

Add an arrow icon

Including an arrow icon can help to show that the box is a tappable area. To do this, go to the finder and drag ‘path.svg’ onto the XD canvas. Reposition it to x: 330, y: 279.

Place the headshot

Go to Finder and drag a headshot into place on the grey square.

Create the list

The Repeat Grid feature can help you create the list of team members. Copy paste the top item, move the copied version down and adjust the margin. Repeat the process for new items. For changing the margins, you must work on one by one manually. If you want an item to repeat, click on ‘Repeat Grid’ on the property inspector.

Edit the text fields

To edit the text fields, first, drag all the headshots onto the grid and then edit the text fields displaying the member’s name and job description.

Create artboards for all team members

Once the details page is ready, you can duplicate it for all the other team members.

Test the prototype

The changes made to the design will show up immediately in the preview.



Discover the right solutions for an efficient organization

Need more Cultivating News?

Never miss an update

Thanks for submitting!

bottom of page