Adobe XD for Beginners


Digital Arts

Adobe has put its legendary graphic design know-how into the UX space with the all-new Adobe Experience Design – better known as Adobe XD.

Many Creative Cloud users have probably done UX design in other applications like Illustrator or even Photoshop. Well, Adobe XD is here as a purpose-built tool for UX design. Leave the amazing – but mostly unnecessary – features of your favourite graphics apps behind. The trade-off? An incredibly responsive and intuitive program that allows you to quickly wireframe and prototype apps and websites.

Getting Started in Adobe XD

The first thing you’ll notice when you launch the application is the Start Screen. As a new user of Adobe XD, I would strongly suggest clicking the Begin Tutorial button. At which point you’ll be brought to a screen with panels explaining the process of working with XD.

The information quickly walks you through the fundamentals of the app. You’ll learn how to complete important tasks like creating artboards, importing images, using the repeat grid, and how to link artboards together for prototyping. If you are a Creative Cloud user, many elements will instantly make sense.

Once you’re done reviewing the tutorial project, it’s time to create a new one. You can do this by choosing File>New. This will return you to a screen similar to the Welcome Screen. Here you can quickly choose a target screen resolution based on device, web size, or enter values for a custom size. 

After selecting a size for your project, you’ll enter the Adobe XD interface. You’ll quickly see that the interface is broken up into tabs: Design and Prototype. Within the Design tab you’ll construct all of your elements on artboards, with each artboard representing a different screen XD also offers some drawing tools for creating basic shapes or you can import artwork from outside the application.

Powerful Features

Adobe XD provides many of the features you would expect in a UX tool. Many of the tools will be familiar out of the gate, while others have been reimagined to best support UX design. For example, you’ll find drawing tools that function much like they do with other Adobe applications. On the other hand, layers are a bit different, again to accommodate how UX designer work.

You’ll notice that each element resides on its own layer. The layers contain icons indicating what type of content lies on that layer whether it’s an image, shape, folder, etc. You quickly get a sense of what lives in each layer. Of course, you can drag the layers to change their order and toggle the visibility by clicking the eye icon, much like you would expect.

UX Kits

Adobe XD comes complete with UX Kits making it easy for you to quickly mock-up native applications for Apple iOS, Windows, and Google platforms. To access these kits, simply choose File>Open UI Kits 

 

These kits give you access to standard UI elements found with each of the platforms. This will allow you to visualize what your app will look like in its native environment. You can also use some of these standard UI elements to save time when prototyping your design.

Repeat Grid

A truly killer feature found within Adobe XD is the Repeat Grid. Create one or more objects one time, then select the objects and enable the repeat grid. Now you’ll be able to repeat the contained objects on both the x-axis and y-axis. You can even adjust the spacing between the objects and adjust the appearance of the objects as a group or individually.

 

Just think of all the different scenarios where this will provide automation of tedious tasks! A table, for example, or a list of text and images. Imagine a grid of images to create a gallery. These types of tasks previously required a great deal of manual effort to get the desired appearance. The ease of the Repeat Grid allows you to spend more time exploring layout options and to see how your layout will work with more data quickly. 

Symbols

The symbols in Adobe XD work in a very similar way to other applications like Illustrator or Axure. If you have an object that you want to use across multiple artboards, which isn’t uncommon, you can make the object a symbol. Any changes to the object will be reflected anywhere else it’s used in the design. For example, if you need to change a colour in the object, just make the change once, and you are done. All instances will be updated throughout the design. 

Creative Cloud Libraries

As a Creative Cloud user, you may already be sharing your assets such as colours, character styles, images, and other elements across all of your Adobe creative applications. In August of 2017, Adobe added the capability of Adobe XD being able to access those assets. This can be a huge time-saver if you find yourself using products like Photoshop or Illustrator to create assets for your Adobe XD projects.

Prototype

Once you are done designing all your artboards, you’ll probably want to see how your app will function. Click the Prototype tab in the top left corner and you can start building links between artboards, which will represent screens in the app. It’s an incredibly simple solution, yet invaluable and powerful to see your apps come to life.

To create the link between the screens, select any object, and an arrow appears to the right of the bounding box. You can either drag-and-drop this arrow to another artboard to link it or click it and choose from the drop-down. 

Preview

When you do link objects to other artboards, you can choose a transition either ease-in or ease-out. Then, once you’ve linked everything, you can click the Play button top-right to preview the application. Alternatively, you can download the XD app for iPhone/Android and preview your work on your actual device in real-time; either by USB or via Creative Cloud.

Finally, you can easily share your prototypes by creating a link directly from the application. Once you do, colleagues and other stakeholders will be able to add comments.

Export Assets

 

If you’re designing a native app, you’ll most likely need to export your assets to hand over to a developer. As long as you use vector objects, you can design in 1:1 and the tool will automatically provide the @2x and @3x versions for you that are required by iOS and the necessary assets for Android, depending on your export option. 

About the Author

Matthew Pizzi is an Adobe Certified instructor with over 15 years of experience teaching Adobe applications and Curriculum Director for Pluralsight. He has been a speaker at industry events such as Adobe MAX and Social Media Week and has authored several books on Adobe’s products.

Comments