Prototyping 101: Adobe XD

Download Adobe XD for your machine and to your phone!

Register and Log in to both desktop application and phone application.

Remember to install also Creative Cloud to share files between your machine and your phone!

Create a prototype!

Chose a phone view:

Saving reusable assets

To save reusable asset, (for example, your major colour of the application) choose assets from left down menu (square icon with a rectangle), select the element which has the colour you want to save and then click on a button plus “+”.

Select the element to save its properties

Click button “+” to save your colours!

If you have created a button which should be reused between artboards you can also save is as an asset. Select all elements from which your button consist of and save them as a component.

Saving button as component

Creating a new view (new artboard)

To create a new view of your application you need to select Artboard from the left menu.

Try to use plugins

for example Ready Mobile Components for Adobe XD

Prototype interactions

Try preview:

And the result:

Share your prototype

Use it from your phone

To see file on your phone remember to save the project to the cloud.

Now you can test it on your phone!

👏