Adobe Xd is a free prototyping tool that makes it easy to create wireframes and working mock-ups.
Welcome to part two of a series that explores how to prototype a book shop website in Abobe Xd. As with most projects there is some setting up to do. Just follow the steps below. This post assumes that you have no experience with Xd. Each step will be explained as we go.
- Create a free Adobe Creative Cloud account.
- Download and install the Creative Cloud app.
- Download and install Abobe Xd
- Download a UI kit from the Abobe site
- Open Xd and then open the UI kit, Save it to the cloud.
- Link the UI kit to your project
Steps 1 and 2 – Create a free Adobe Creative Cloud account. Download and install the Creative Cloud app.
Create an abode account and download the creative cloud app. This app acts as the control centre for all Adobe apps. It allows you to download and install any of their apps.
Step 3 – Download and install Abobe Xd
Once the CC app is installed open it and click on the install button next to the Xd button, see the image below. this will download and install Xd on your local machine.
To move the pasteboard (the background where the artboards sit) around, hold down the shift key and drag.
Step 4 – Download a UI kit from the Abobe site
Download the responsive UI kit, Extract the zip file to your project folder. Click the image below to go to the download page for Xd resourses.
Step 5 – Open Xd and then open the UI kit, Save it to the cloud
In order to link the UI kit to your Xd project you need to save it to the Abobe cloud platform. Open Xd and then open the UI kit. Click on save as and save it to the cloud.
Step 6 – In the assets panel link the UI kit to your project
In Xd create a new project and name it book site. Open the assets panel and click on the + at the top of the panel. Find the UI kit and click on it, this will link the UI kit to your project.
Part 3 looks at creating a simple wireframe of the site using no colour, just functional blocks and placeholders.