How To Design An App Prototype In Adobe XD

In this week’s tutorial, I’ll be showing you how to design your very own interactive app prototype in Adobe XD. The design for this app is minimalistic and modern.

What You’ll Need

The Design Phase

Step 1

In Adobe XD, click the Artboard tool and select ‘Android Mobile’ from the predefined artboard sizes (right-hand panel). You should have a total of two artboards in your workspace.

Step 2

Now, we’re going to make the gradient background in Adobe Illustrator by creating an artboard that’s 360x640px and using the gradient tool. The two colors used to make the linear gradient are #4ECDC4 and #66CC99. Once the gradient has been made, copy and paste it onto the first artboard in Adobe XD.

Step 3

Now, let’s give this app a name. Place the logo 122px down from the top of the canvas. Then, using the rectangle tool, draw a rectangle that’s 283x47px. There should be a 35px space between the logo and the first rectangle. Round the corners of the rectangle by 27px.

Step 4

Duplicate the rectangle shape two more times to create a total of three, and place them below one another leaving 21px of spacing in between each shape. Fill the first two rectangles with white and then set their opacity to 20%. The last rectangle will have no fill and a white 2px border.

Step 5

Now, we’re going to add some icons. First, we’re going to add the hamburger menu icon to the top left corner. Then, we’re going to add the mail icon to the left-hand side of the first rectangle. Then, add the person icon in the second rectangle. We’re also going to add some text for all the text boxes and for the last button. Finally, we’re going to add three social media icons (Instagram, Facebook, Twitter) near the bottom of the app.

Step 7

Now we’re going to start working on the second artboard. First, we’re going to copy the design on the first artboard and then paste it onto the second artboard. Move the whole design so that less than half of it is showing. Then, slide the gradient background over to fit the entire artboard. This is so that when we add the prototype effect, it will look like the menu is sliding out. Be sure to delete the hamburger icon and add an ‘X’ icon in its place. We’re also going to delete the ‘sign-in’ text and the last two social media icons.

Step 8

To create the slide out menu, draw a rectangle that’s 222x640px on the left-hand side of the artboard. The color fill for this rectangle is black and its opacity will be set to 60%. Then, we’re just going to use the text tool to write out some links that we on the menu.

The Prototype Phase

To make the app interactive, we’re going to go into the Prototype mode. Then, we’re going to select the hamburger menu icon and drag the wire to connect it to the second artboard with the following settings: slide-right, ease-out, 0.2s. For the second artboard, we’re going to select the ‘X’ icon and drag the wire to the first artboard with the following settings: slide-left, ease-out, 0.2s.

To test the app, click the play icon and click the menu icons. It should look like you’re opening and closing the menu.

5 Comments

  1. This is awesome and i’ve tried it. it would be more lovely if you showed them what file types could be directly imported into XD.

    1. Riyof you can go to any icon website and download a set of icons in png format and just drag them into XD

    2. Hi Riyof,

      I’ve provided a link for the icons I used under “What You’ll Need”. Search for the icons you wish to use on the site, download them, and drag+drop them onto the Adobe XD artboard. You can also download Twitter and Instagram assets (icons, logos, etc.) directly on their website by searching for them on google (e.g. “twitter brand assets”).

      Hope this helps!

Leave a Reply

Your email address will not be published. Required fields are marked *

More On XO PIXEL