Getting started with Adobe Experience Design –  Part I

If you take a look at the new Adobe Experience Design or Adobe XD for short, offered through the Adobe Creative Cloud, you will quickly discover that it’s a rainbow pooping unicorn for Webdesigners. But you’re wrong… It’s even better! 

That being said, I want to give you a quick introduction about the possibilities you have with Adobe XD. Quick reminder: the program is still in its preview version and there is a lot more to come, so here we go!

1. Create your first design project in Adobe XD

By opening Adobe XD, you will see various options for creating designs for mobile devices, tablets, desktop and Custom Size projects. Or you can click on “Get Started with a Sample File”. (We will use those sample files in the second part of this guide to learn how to use the prototype mode.) Lets start by creating an Artboard for the iPhone 6. The first thing you should do is to give the Artboard a name, “Home” for example. Double-click the Artboard’s title to then change it’s name to whatever you like.

Creating a new project in Adobe XD
Creating a new project in Adobe XD

2. Change the Artboard’s background

After selecting the Artboard, you will get its properties panel on the right side of the window. By clicking the fill option under “appearance”, you can easily change the background color of the Artboard.

Changing the background color of an Artboard in Adobe XD
Changing the background color of an Artboard in Adobe XD

3. Create a Screen Header

For the Screen Header we will use an image and some text to create a great header section. You can go to File > Import to import the image from your file browser or you can drag and drop the image into the Artboard. Next we use the Text tool with the shortcut “T” and create some sample text. I will go with “Adventures” and “Hiking Through The Utah Backcountry”. You can adjust your text properties like font, font-size, font-weight, kerning, etc. in the properties panel on the right.

Quick Tip: You can use the complete UI kits of the Apple iOS, Google Material and Microsoft Windows by clicking File > Open UI Kit and selecting what you need. I will use the Apple iOS Kit to copy and paste the iPhones statusbar into our design.

Creating a Screen Header with an image and text in Adobe XD
Creating a Screen Header with an image and text in Adobe XD

4. Add a content area

Add a content area below the Screen Header by selecting the Rectangle tool with the shortcut “R”. As always you can change its properties in the right panel of Adobe XD. Now you can edit the content area by inserting a image and some text as you learned it in step 3.

Creating a content area in Adobe XD
Creating a content area in Adobe XD

5. The Repeat Grid (one of my favorite tools!)

To duplicate the content area, you can use the Repeat Grid. Just select all the content elements you want to duplicate by holding shift. Select the content area, the image and the text elements, than press the Repeat Grid button in the properties panel. Now your content area has a green border and two new handles that you can use to duplicate the content vertically or horizontally.

Quick Tip: Now you can select different images and drag and drop them onto the image that you duplicated. The old image will be replaced by your selected images. Now you can also change the text for every content area individually, but remember, if you change the style of one element, the style will also be applied to all other content areas!

Using the Repeat Grid in Adobe XD
Using the Repeat Grid in Adobe XD

6. Create more Artboards for your project

After you created the “Home” design you might want to add more Artboards to our design, (more “Detail” pages for your adventures, for example). The shortcut “A” will give you the Artboard tool where you can select the size of your new Artboard on the right side of the application. Just click somewhere near your first design and the new Artboard will appear.

Creating more Artboards in Adobe XD
Creating more Artboards in Adobe XD

7. Learning by doing

Now you can play around with what you’ve learned so far and create more awesome Artboards for your Adventure design!

Project in Adobe XD
Project in Adobe XD

Getting started with Adobe Experience Design — Part II

Prototyping: This is what is coming up in the second part of this guide!

Definitely check out the part two of this guide to learn how easy it is to create a prototype with your designs, record the prototype and even share it with the developers, stakeholders or whomever you like!

Please share your thoughts about this guide and Adobe XD. If you have any questions, don’t hesitate to ask! Feel free to share this article and follow me on Twitter.

All the pictures I used in my projects are from www.unsplash.com.

308 thoughts on “Getting started with Adobe Experience Design –  Part I

Leave a Reply

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