Contents

GETTING STARTED

About Classroom in a Book

Prerequisites

Installing the program

Minimum system requirements

Online content

Lesson files

Web Edition

Accessing the lesson files and Web Edition

Recommended lesson order

Jumpstart

Additional resources

Adobe Authorized Training Centers

1 AN INTRODUCTION TO ADOBE XD

Introducing Adobe XD

A typical UX design workflow

Starting Adobe XD and opening a file

The Home screen

Exploring the workspace (macOS)

Exploring the workspace (Windows)

Working in Design mode

Getting to know the tools

Working with the Property Inspector

Working with panels

Prototype mode

Changing the view of artwork

Using view commands

Using the Zoom tool

Scrolling through a document

Navigating artboards

Previewing your designs

Sharing your designs

Finding resources for using Adobe XD

2 SETTING UP A PROJECT

Starting the lesson

Creating and saving a new document

Working with cloud documents

Creating and editing artboards

Creating artboards with the Artboard tool

Editing artboards

Changing artboard appearance

Working with multiple artboards

Aligning artboards

Adding grids and guides to artboards

Working with square grids

Applying a layout grid

Creating artboard guides

Managing artboards with the Layers panel

3 ADDING IMAGES, GRAPHICS, AND TEXT

Starting the lesson

Assets and Adobe XD

Importing an image

Importing multiple assets

Importing assets via drag and drop

Replacing an image

Transforming images

Resizing an image in its frame

Bringing in content from Photoshop

Copying and pasting from Photoshop to XD

Opening a Photoshop file in Adobe XD

Editing an image in Photoshop

Bringing in content from Adobe Illustrator

Exporting artwork from Illustrator for Adobe XD

Masking content

Masking with a shape or path

Editing a mask

Masking with an image fill

Editing an image fill mask

Working with text

Adding text at a point

Creating a text area

Importing text

Styling text

Duplicating text

4 CREATING AND EDITING GRAPHICS

Starting the lesson

Graphics and Adobe XD

Creating and editing shapes

Creating rectangles

Creating ellipses

Creating polygons

Changing fill and border

Working with border options

Rounding corners

Editing shapes

Combining shapes

Editing combined shapes

Aligning content to the pixel grid

Drawing with the Pen tool

Drawing straight lines

Drawing curves

Changing path direction

Editing artwork with the Pen tool

Copying the cloud icon

Working with UI Kits

Downloading the UI kit

Opening and copying from the UI Kit

5 ORGANIZING CONTENT

Starting the lesson

Arranging objects

Working with the Layers panel

Reordering artboards and layer content

Selecting content using the Layers panel

Locking and hiding content

Searching and filtering in the Layers panel

Working with groups

Creating a group

Editing content within a group

Aligning content

Aligning objects to the artboard

Setting up objects for alignment

Aligning objects to each other

Distributing the icons

Positioning objects

Aligning with temporary guides

Positioning icons for the Memory artboard

Setting gap distances

Viewing distances with temporary guides

6 WORKING WITH ASSETS AND CC LIBRARIES

Starting the lesson

Managing assets with the Assets panel

Saving colors

Editing saved colors

Saving text formatting as a character style

Editing character styles

Creating components

Adding a component instance to the design

Editing a master component

Editing an instance

Making the footer a component

Swapping components

Ungrouping components

Using components in other documents

Updating linked components

Breaking the link to a component

Working with Creative Cloud Libraries

Adding assets in XD to a Creative Cloud Library

Adding Illustrator assets to the library

Using CC Library character styles in XD

Using graphics from a CC Library

Editing library items

7 USING EFFECTS, REPEAT GRIDS, AND RESPONSIVE LAYOUT

Starting the lesson

Applying and editing gradients

Applying gradients

Editing gradient colors

Adjusting the direction and length of a gradient

Understanding effects

Working with background blur

Working with object blur

Applying a drop shadow

Applying blend modes

Using repeat grids

Adding content for a repeat grid

Creating a repeat grid

Editing content in a repeat grid

Editing content appearance in a repeat grid

Adding content to a repeat grid

Finishing the repeat grid

Responsive content and layouts

Responsive padding with content-aware layout

Padding examples

Getting started with responsive resize

Grouping content

Setting manual constraints

Finishing the design

8 CREATING A PROTOTYPE

Starting the lesson

Starting with prototypes

Design mode vs. Prototype mode

Setting the home screen

Linking artboards

Previewing links locally

Editing links

Adding a connection to a component master

Taking prototypes further

Adding a hover state to components

Adding multiple states to components

Auto-animate content

Adding a drag trigger

Applying multiple interactions to a single object

Setting up content for preserving scroll position

Preserving scroll position

Working with fixed positioning

Setting up content for overlays

Creating overlays

Setting a timed trigger

Setting timed transition content

Adding a voice trigger

Adding speech playback

9 PREVIEWING A PROTOTYPE

Starting the lesson

Recording a prototype

Recording on macOS

Recording on Windows

Previewing on a mobile device

Setting up the XD mobile app

Setting up preview via USB

Navigating the XD mobile app

Previewing cloud documents

Document history

10 SHARING YOUR DESIGNS

Starting the lesson

Methods of sharing

Sharing a cloud document

Coediting

Sharing a prototype or design for review

Updating a shared prototype

Commenting on a shared prototype

Pinning comments

Working with comments

Sharing designs or prototypes with developers

Inspecting design specs

11 EXPORTING AND INTEGRATION

Starting the lesson

Exporting assets

Exporting as PDF

Exporting as SVG

Exporting as PNG

Exporting as JPG

Using plugins

Installing a plugin

Using a plugin

Finishing the design

INDEX