Make mobile app mock by Adobe XD

I used Adobe XD to make mockup application for internal hackathon-like project. Though it was my first time to use XD in my job, the process was very straight forward.

1 Install

Install from Adobe XD official site.

• It’s enough to select starter plan for free - that is for small size mock. You can share one link for your app.

2 Design

Draw just like power point. Here are some specific tips.

Art board

It’s a canvas for drawing. You can select many size including mobile devices like “iPhone 12 Pro Max”

Layers

Every object is assigned to each “layer”. After locating object, you can change the order of the object(back to front) by changing the order of layer in side menu.

Note

Layer is useful when selecting multiple specific objects at one time.

Plugin

Plugin > Manage plugin and search/install plugin.

Note

Icon 4 Design worth using to embed svg icons to sketches.

3 Prototype

Make screen transition by connecting arrow between the origin of parts or entire screen to target screen.

4 Share

Make link and share that. Shared person can open the web link and can see, comment to the prototype.

Reference

• Adobe XD official site