SitePoint
  • Premium
  • Library
  • Community
  • Jobs
  • Blog
LoginStart Free Trial
Jump Start Adobe XD
Jump Start Adobe XD
Notice of Rights
Notice of Liability
Trademark Notice
About Daniel Schwarz
About SitePoint
Why Adobe XD Exists
Photoshop vs. Sketch vs. Adobe XD
So Who Should Read Jump Start Adobe XD?
Conventions Used
Supplementary Materials
Before We Begin
Workspace
Toolbar
Layer List
Property Inspector
Application Toolbar
Next: Learning the Basics with Low-Fidelity Prototyping
Welcome Screen
Low-Fidelity Prototyping
Getting Started with Shape Layers
Text Layers
Duplicating Layers
Grouping Layers
Smart Guides
Fast-Forward
Repeat Grids
Next: Prototyping User Flows and Receiving Feedback
Prototyping Interactions
Previewing Prototypes
Recording Your Tests
Sharing Prototypes and Gathering Feedback
Next: Getting Visual with the Property Inspector
Styling Layers with the Property Inspector
Quick Exercise: Styling Layers
Next: Hi-Fi Prototyping with Symbols and Repeat Grids
Maintaining Visual Consistency With Symbols
Automating Content With Repeat Grids
Next: Designing Icons and Exporting
Designing a Search Icon
Boolean Operations
Editing Vector Paths
Designing a Location Pin Icon
Copying Icons into the Design Itself
Exporting Image Assets
It’s a Wrap
Keyboard Shortcut Workflows
Keyboard Shortcuts for macOS
Keyboard Shortcuts for Windows

Getting Familiar with the UI

In the first chapter of this book we'll familiarise ourselves with the XD interface before taking a very hands-on approach to low-fidelity prototyping. All of the screenshots in this book are taken from the macOS version of Adobe XD. However, the walkthroughs (and shortcuts) are applicable to Windows, too.

If you're switching from Sketch, you'll notice many similarities in Adobe XD (both visually and in terms of features). Although if you're switching from Photoshop, Adobe XD will still feel like an Adobe app in some ways, even if it doesn’t look like it, or some of the features seem a little unfamiliar to you.

Here's a swift comparison of XD (above) and Sketch (below).

Sketch vs. XD

Before We Begin

You can download Adobe XD via Creative Cloud like any other Adobe app. So if you already have a Creative Cloud subscription, you're all set. If not, you can start your Creative Cloud trial right here.

Let's dive in.

Adobe XD Is Still Under Active Development

It's worth noting that Adobe are actively developing XD. It is already a very versatile and powerful tool, but new features are continually being added in monthly updates. It is also important to note that, as of this writing, the Windows version of the app hasn't yet got all the features of the macOS version, but the Adobe team are working hard to get both versions on par. The best place to stay up-to-date with the latest XD developments is the official Adobe blog.

Workspace

Your workspace is comprised of an unlimited canvas and the artboards inside it. Artboards typically represent one webpage or one app screen in your design, where their size depends on the dimensions of the browser window or device screen that you’re designing for. Your workspace can contain as many artboards as necessary, even if they’re all different sizes.

Welcome Screen

When you open the app you'll see a welcome screen that asks you to specify what type of artboard you'd like to start with. It's commonplace to demonstrate what your design would look like on different desktop and device screens, effectively creating an adaptive design (that is, a design that adapts to the device/screen it’s been viewed on). It’s also widely accepted that you should start with the smallest-sized screen first (if you’re designing for the web, this is known as a mobile-first approach to design).

Why Mobile-First

Why? Because designing on smaller screens forces you to design with simplicity in mind. It’s much harder to scale down a design for smaller screens than it is to scale up a design for larger screens. If you were creating a responsive web design you would start with a mobile artboard and work up to tablets and then desktop screens. If you were designing an iOS app, you’d start with the smallest iPhone and work up to iPad, then iPad Pro.

Over the course of this book we’ll be designing and prototyping an iOS app, so choose iPhone 6/7 to start off.

Welcome screen

Here's our very first artboard!

First artboard

Ready-Made UI Kits

Like Sketch, Adobe XD has three pre-made UI kits – Apple iOS, Google Material and Microsoft Windows. You can extract native OS design elements from these to use in your mockups, although we’ll be focusing on designing a custom UI.

UI kits

Canvas

As I mentioned, the canvas is unlimited. All artboards will be visible on the canvas at once, making it easy to flip back-and-forth between the different screens. Any objects that aren't inside an artboard are automatically inserted into what's called the pasteboard – a separate artboard for scattered objects.

Artboards

When you need to create new artboards, tap A and select a device from the inspector on the right-hand side. If you need a custom-size artboard (maybe you'd like to have your app icons in the same document), tap A and draw out the artboard using the mouse, rather than select one from the inspector.

Creating new artboards

In some cases, your content will exceed the dimensions of the screen. If you select the artboard and drag the handles you'll be able to resize it, but you'll also notice a dashed, blue line, which indicates the boundaries of the viewport (the above-the-fold content). Anything below the fold is accessed by scrolling, which you can do when testing prototypes in real devices. We'll definitely explore that later in the book!

Resizing the viewport

You can change the viewport height at any time using the inspector, and you can also turn the viewport off completely if you don't want the screen to be scrollable in live preview mode.

Viewport options

Over the course of the book we’ll create many artboards, eventually wrapping up with the following end result:

End result

Prototype Workspace

Adobe XD has an equally important secondary workspace called the Prototype workspace, and this is where we:

  1. Link screens together with transitions
  2. Create video demonstrations of our design
  3. Prototype (test) the design in a browser or device
  4. Share the prototype with teammates to request feedback

Prototyping is where Adobe XD outshines Photoshop and Sketch, and we’ll be using this workspace almost as often as the Design workspace.

Prototyping isn’t about throwing together a few fancy transitions to impress our clients and teammates; creating prototypes and testing them in real devices is integral to crafting exceptional UX. It helps us identify flaws that we wouldn’t ordinarily discover by simply looking at the design.

Toolbar

As in Photoshop, the toolbar appears on the left-hand side, so let's run through the tools, along with their keyboard shortcuts (the same on both macOS and Windows):

  • Move (M)
  • Rectangle (T)
  • Ellipse (E)
  • Line (L)
  • Pen (P)
  • Text (T)
  • Artboard (A)
  • Zoom-In (Z)

Accessing the toolbar

Use the Shortcuts

I find that the zoom-in and zoom-out keyboard shortcuts are easier than using the zoom tool or the application toolbar, which are Cmd + and Cmd - on macOS and Ctrl + and Ctrl - on Windows.

Layer List

In Adobe XD, the layer list appears on the left-hand side when you use the keyboard shortcut Cmd + Y (Ctrl + Y in Windows), or when you click the layer list icon in the very bottom-left corner of the app window. Photoshop, by default, always displayed the layer list on the right -hand side, but Adobe took a little inspiration from Sketch on this one.

Layers are the smallest of components that make up your design. Layers can be shape layers, text layers, bitmap layers, etc.

Opening the layer list

It's here that you'll see a hierarchical tree of your artboards, groups and layers. But what makes this interface so special, compared with other design apps, is that the layer list only displays the contents of the currently selected artboard, which reduces distraction. You only see what you need to see.

Layer hierarchy

Property Inspector

When you need to style layers, the inspector is your friend. It's here that you define your backgrounds, fills, borders, border radii, shadows, widths, heights, rotation degrees, and so on. You can also activate Repeat Grids from here, as well as specify alignments and boolean operations. As you may have seen earlier, there are settings unique to artboards and so only appear when an artboard is selected (and the same for text).

Accessing the inspector

Don't worry, we'll learn how to use all of these features in the following chapter.

Application Toolbar

Aside from the zoom dropdown, this toolbar mostly deals with prototyping tools. Here you can switch between the Design and Prototype workspaces, connect to a mobile device (for testing user flows and interactions), preview prototypes in Adobe XD itself, or share prototypes to receive feedback and comments.

In the six chapters to come, we're going to learn all about prototyping with Adobe XD, while designing a sample app. But if you're not into hands-on learning, you can still follow us on the journey using the screenshots in this book. It's totally up to you!

Accessing the app toolbar

Next: Learning the Basics with Low-Fidelity Prototyping

In the next chapter we'll dive straight into low-fidelity prototyping. Now that we're familiar with the UI of Adobe XD, we'll be learning how to use the basic design tools while digitally mocking up the rough idea for our app.

As mentioned earlier, the end result will contain various screens that will make up our finished app design. This app design will be based on Adobe XD’s official iOS app, Dishy — a location-based food-ordering app.

See you there!

End of PreviewSign Up to unlock the rest of this title.

Community Questions