UX & Web Design tutorial: 6 Tips for Adobe XD

Learn how to use six brilliant features of Adobe XD such as choosing an artboard, creating layers, symbols, interactive prototypes and more.


Adobe XD is a brand-new application built from the ground up for creating wireframes and prototypes. Any user of Adobe’s Creative Cloud will immediately feel comfortable in this new app. In this article, I would like to share with you six powerful features of this new amazing software.

For more online Adobe XD tutorials, check out our roundup

STEP 1

Artboards

Artboards in Adobe XD will represent each screen for your mobile, tablet, desktop, or web applications. You can have as many artboards as required for your app regardless of presentation. Meaning, you can choose to define artboards for mobile, tablet and desktop-based web experiences within a single file. This of course is not required.

If you prefer, you can also choose to design multiple screens of a user flow within an application for a particular platform in a single file. To start off you can choose a preset size for the artboards when you create a new project from the Start screen. However, you may not want to use the predefined sizes, in which case you can create a custom size. Within the new document you have the ability to add as many artboards as your application would require by using the Artboard tool.

Artboards in Adobe XD offer great flexibility and wide range of options. Copying, resizing, rearranging, and renaming artboards are capabilities available to you. Artboards also support vertical scrolling when you select the option. 


STEP 2

Layers

Adapted from Photoshop and Illustrator, Layers in Adobe XD are re-imagined for UX designers that make them intuitive and easy to use. What makes them especially useful is that only the layers associated with the artboard that you are currently working with are highlighted, which leaves your panel uncluttered of unnecessary elements.

It also serves as a useful project navigation system in the sense that you can view all of the artboards in your project and quickly zoom to a specific artboard, which is incredibly handy. You can access layers by choosing View>Layers or using the shortcut Command + Y on the Mac or Ctrl + Y on Windows.

If you don’t have an active artboard, the layers panel will initially display all the artboards in the document.

Advertisement. Article continues below

STEP 3

If this is the case, you can double click the artboard icon to reveal the layers associated with a particular artboard and zoom to that artboard in the document window.


STEP 4

Symbols

The idea behind a symbol is simple. It’s an object that can be reused multiple times across artboards in your document. When you use a symbol you create something called an instance. All instances of a symbol used in your project are linked, which means an update made to one instance will automatically and instantly reflect in all other instances.

A symbol is an object that can be reused multiple times across artboards in your document. All instances of a symbol used in your project are linked, which means any update made to one instance is instantly reflected in all other instances within the project.

There are a couple different ways you can convert an object to a symbol. The most obvious way is to right-click on the selected object and choose Make Symbol from the contextual menu.


STEP 5

A couple other options include:

  •        Select the object and press Command + K (on Mac), or Ctrl + K (on Windows).
  •        On a Mac, select the object and then choose Object > Make Symbol.
  •        Select the object and click + in the Symbols library.

The Symbols library displays all the symbols in the current project. To open the Symbols library, View>Symbols Library.

Advertisement. Article continues below

STEP 6

Interactive Prototypes

One of my favorite features of Adobe XD is having the ability to quickly create interactive and engaging prototypes with minimal effort and time. Easily switch from design to prototype mode by choosing the option in the top left corner.

Add transitions and interactions visually by selecting the interactive element, mapping it to its destination, and choosing the desired options in the panel that appears. This workflow makes it very easy to create a prototype with minimal effort.


STEP 7

Preview

Once you have a prototype, in the top right corner of the interface there is a play icon that allows you to preview the application. When you do you can interact with the application to get an idea as to how it will function once it’s fully developed. 

If you’re working on a mobile app, you may want to experience how the app will look and behave on an actual mobile device. This is where the Adobe Experience CC mobile app comes in. It lets you preview your designs on iOS and Android devices. If you make design and prototyping changes using XD on the desktop, you will see those changes reflected in real-time on all mobile devices connected through USB (available only on Adobe XD for MacOS), or if the Adobe XD documents are loaded from Creative Cloud Files (available on MacOS or Windows 10).


STEP 8

Collaborate

Finally after creating the prototype and testing in a mobile device (if necessary) you can send a link to team members or clients for feedback on your prototypes. This is also a useful feature that you can share with developers allowing them to build the application to your specifications.

Advertisement. Article continues below

STEP 9

Conclusion

Adobe XD offers a great deal of promise. As a UX designer already familiar with Creative Cloud applications you’ll feel right at home in this app. Adobe will continue to add features in the months to come, which is exciting when you think about all the additional capabilities this already impressive app has. If you’re interested in learning more about Adobe XD, check out Adobe Experience Design Fundamentals on Pluralsight.


STEP 10

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 like Adobe MAX and Social Media Week and has authored several books on Adobe’s products.