Getting started with Adobe XD — Part I
By Lukas Steyer
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 thepossibilitiesyou 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 secondpart 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.
2. Change the Artboards 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
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
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
5. The Repeat Grid (one of my favourite 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
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
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
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!
Originally published at www.lukas-steyer.de
Share this article if you liked it!