Historically, Adobe Creative Cloud hasn’t had a tool for designers to quickly and efficiently prototype layouts, or get team feedback before creating the final UI design. This missing gap has been recently filled by Adobe Experience Design CC (Adobe XD). The application first introduced as “Project Comet” during Adobe MAX 2015 is now available for download as beta version from Adobe Creative Cloud. It’s a desktop application allowing designers to prototype interfaces for web, mobiles, and tablet devices. Let’s take a look at what it can do!
Introducing Adobe XD
Adobe XD uses a remarkably simple yet efficient interface; a style inherited from its sister applications in the Creative Cloud package. It provides tools to prototype for different platforms including web, mobile, tablet, and others.
When launching the application, the welcome screen provides you with a variety of standard screen size templates and the ability to add your own custom document size. Additionally, the screen includes access to number of assets that can be used as a starting point to learn more about the application, UI design elements for different mobile devices such as iOS and Android, and access to online resources such as tutorials, and more.
The Adobe XD workspace is divided into two views; Design and Prototype, which can be accessed from the top right side of the application. In the Design view, designers can use a number of tools and features to create design layout elements, add artboards which are used to represent the layout pages, and import resources from other applications such as Adobe Illustrator and Adobe Photoshop.
Tip: Designers can copy design elements directly from these applications and paste them into the selected artboard as vector-based graphics. This allows for modification of the imported artwork by changing the color or even modify the path anchor points.
The second view in Adobe XD is the Prototype view which allows designers to link between artboards (pages) and define the relationships between them through interactions. Once the project is done, designers can preview it by clicking the preview icon on the top right, or sharing it with the team through a web-based link. Designers can also save different screens in bitmap or vector-based formats.
Adobe XD Tutorial
After exploring the basic anatomy of the Adobe XD interface, the following example demonstrates the step-by-step process of creating your first UI prototype in Adobe XD. We’ll build something for the iPhone 6 screen size. You can download the practice files by visiting the Github repository for this tutorial. Alternatively download the images directly from Pixapay:
The first part of this tutorial will focus on creating a layout in the Design view of Adobe XD.
1. Create the Prototype Project
Once Adobe XD is opened, the Welcome screen appears and allows you to choose the project type. Select the iPhone 6 (375 × 667px). Then click on the iPhone icon to create the project. From the Apple iOS, you can access iPhone UI elements that can be used in your prototype. Once the artboard is created, double-click the artboard name, and change it to “Home”.
2. Create the Prototype Background
Click the artboard to display its properties in the Properties panel on the right side of the application, and click on the Fill color to open the Colors selection dialog box. Set the color to dark gray and close the dialog box.
3. Setup the Screen Header
Next go to File > Import. In the file browser, navigate to the header image and click Import. Use the controls around the image to resize it to fit in the screen header. You can also double-click the image to crop the image.
Select the Text tool from the Tools panel, click on the header area and type “Nature”. Double-click the text and from the right Properties panel, select “Helvetica”, set its weight to “bold”, and size to “32”. Double-click the Fill color and set it to “dark gray”.
4. Build the Content Area Background
Select the Rectangle tool from the Tools panel on the right side, then create a rectangle under the header. From the right Properties panel, set the Fill color to dark gray, and uncheck the Border option to remove the stroke.
5. Add the Content
Import the content thumbnail and add the text as highlighted in step 3. Setup the thumbnail to fit in the content area background and on the right side add the text as shown in figure 5 below. In order to crop the thumbnail to a specific area, you can double-click the image and use the four corners to crop it.
6. Creating Content Grid
One of the most useful tools in Adobe XD is that you can create a grid out of existing content without duplicating them manually. Press Shift on your keyboard and select the thumbnail, content background, and text. Then, click on the Repeat Grid button in the Properties panel. This translates the created content into a grid.
Drag the bottom green icon to create vertical grid of the content. Then, you can double-click the repeated content to modify it. Finally, select the content and choose Ungroup Grid to break the linkage between them.
7. Create New Page (Artboard)
In order to create a new layout page, click on the Artboard tool from the Tools panel on the left. Then, select the iPhone 6 template from the right to create a new page.
8. Create More Pages
Repeat the above steps to create more pages and add content to the pages as shown above. The final look for the layout should be something like the image below.
Once the design layout is complete, we will jump to Prototype view to build the linkage between the created pages.
9. Setup the Project Homepage
Before setting up the linkage between pages, we need to assign a homepage for the project. The homepage can be any of the created pages. In this example, we will assign the first layout we created as the homepage by clicking on the Home icon that appears to the top left of the artboard.
10. Build the Linkage Between Pages
In order to link between the pages, select the homepage, click on the blur arrow to the right side. The Target floating menu appears; select the next page, and set the transition animation type (for example “Dissolve”). Repeat this step to link between the other pages.
11. Creating Interaction
In this prototype, the first content block on the homepage should jump to the first content artboard, and the second content block should link to the second artboard…etc. So, select the first content block, and click the right blue arrow to set the target similarly to what we did in step 10. Repeat the step with the second content block.
After creating the prototype, there are two main methods to preview it. The first is the Preview feature within Adobe XD itself, and the other is through the web link that can be sent to team members.
12. Preview the Prototype
Click on the Preview icon to the top right of the application. This will display a preview screen which allows us to view and navigate the different pages. As a nice extra, it has a Record icon which allows us to record the flow between pages and save it to Quicktime (MOV) format.
13. Sharing the Prototype
We’re done! Now we just need to share our document with other team members or stakeholders who aren’t necessarily using XD. Click on the Share icon at the top right of the application; a floating menu will appear, providing a URL that can be copied and shared between team members:
As we’ve seen, the current beta version of Adobe XD provides a simple, yet effective tool for UX professionals to visualize their research for web, mobile, and tablet devices. It allows them to integrate artwork elements from other Adobe applications such as Adobe Illustrator with maintaining its editable vector format.
In upcoming versions of Adobe XD, we’re promised more features; such as improved colors, ability to add layers, improved share features, support for scrolling, and adding more interactive elements to the Prototype View. If you’ve tried Adobe XD already we would love to hear your first impressions; giving feedback now will help shape future releases.