Adobe XD

User Experience Design Essentials

L540
Brian Wood
bri43240@adobe.com
Who am I?

My name is Brian Wood

• Been working in Illustrator for eons and
loving most of it

• Written 20+ books on Illustrator and

other related products

• An instructional designer on the Learn

team at Adobe. I’m responsible for the
graphic design segment

• I heart woodworking

2
Contents
An intro to Adobe XD 4 Make copies of your artboard 28

Create a file 5 Transform your design from low-fidelity to

Adding and editing artboards 5 high-fidelity 30
Adding shapes as content placeholders 7 Importing images 31
Saving and editing color 8 Bonus: Masking images 32

Working with text 10 Working with repeat grids 33

Add text 10 Adding images to the Repeat Grid 36
EXTRA: Adding guides and grids to artboards 12 Responsive content and layouts 37
Adding guides for alignment 13
Getting started with responsive resize 37
Creating and editing icons and more 14 Setting responsive resize options 39
Draw a chef hat 15 Prototyping and sharing 40
Combine shapes 15
Setting up an initial connection 40
Managing content with the Layers panel 18 Previewing connections 41
Previewing on device 42
Create a button 19
Share your designs 43
Use content from UI kits 22 Sharing a flow 43
Extra: Downloading a UI kit 22 EXTRA: Invite others to edit the XD document 45
Copying UI kit content into your design 23

Intro to components 24
Make a component 24
BONUS! Working with component states 26
Adding multiple states to components 28

3
An intro to Adobe XD
Welcome to Adobe XD! With Adobe XD, you can design,
prototype, preview, and share in the same tool.

In Adobe XD, you can create designs for websites,

presentations, apps, and more by designing all the screens or
pages in a single Adobe XD file. You can add artboards of the
required screen size and define interactivity between them and
the design content to visualize how users navigate through the
screens or pages. You can then test the prototype you create
locally or on a device and easily share prototypes with others to
gather feedback via commenting and annotations. You can then
incorporate that feedback into the design.

We start with a design, ranging from a low-fidelity hand-drawn

sketch or low-fidelity (low-fi) wireframe to a high-fidelity (hi-fi)
design. Early in the days of the mobile web, we would sketch,
wireframe, and design. These days, we design, prototype, and
collaborate. To test the user experience, we create an interactive
prototype, a tool for gathering feedback on the usability of
a design.

Below is an example of a hand-drawn sketch vs. a low-fidelity

design vs. a high-fidelity design.
Create a file
Let’s jump in and create our first project file.

1 In the Welcome screen that is open

when no files are open, click the Web
1920 option to reveal other screen
sizes. Choose Web 1920 (1920 x 1080),
and a new document opens with a
single artboard.

2 Choose File > Save As Local Document

if you want to save it on your desktop,
or choose File > Save As if you’re going
to save it as a cloud doc.

This file is your working file and

will include all of the content for
your project.

Adding and editing artboards

Artboards represent the pages in your web design, screens in
your presentation, or app design and are very similar to artboards
in Illustrator or Photoshop. You can have as many artboards in a
single XD document as you like, and most documents you create
in Adobe XD start with a single artboard. You can easily add,
remove, and edit artboards after the document is created.

5
In Adobe XD, there are several ways to create new artboards,
including drawing them or duplicating existing artboards. Next,
you’ll create and edit artboards.

1 Select the Select tool and double-click

the artboard named Web 1920– 1.
Change the name to Home - 1920
and press Enter or Return to accept
the name.

Naming your artboards can help you

keep track of your content, or, in the
case of an app or web design when
you’re targeting specific artboards for
interactivity during prototyping. With
the artboard still selected, you can now
see artboard options you can set in the
Property inspector on the right.

2 Select the Select tool in the toolbar

and click on the Home artboard to
select it. Drag the bottom handle down
to make the artboard taller. You can
see the size in the Property Inspector
to the right.

You can also edit properties for the

artboards you select. Changing the size
or orientation of an artboard will not
affect the artwork on that artboard.

Tip: Press Command+D (macOS) or

Ctrl+D (Windows) to duplicate a
selected artboard.

Tip: Press the spacebar to access the Hand tool. You can drag
around in the document window to see everything.

6
Adding shapes as content placeholders
You’ll start your design by creating some placeholder shapes
using the shape tools. These shapes will become graphic elements
like a masthead and more.

1 Select the Rectangle tool in the toolbar.

Move the pointer over the upper-left
corner of the Home - 1920 artboard
until the border of the artboard turns
aqua. Drag to draw a rectangle that
covers the top part of the artboard.
When Smart Guides appear on the
right edge of the artboard, release the
mouse.

Smart Guides are always on and can be

very helpful for aligning, snapping, and
spacing content you create
or transform.

2 You will see the options you can set

in the Property Inspector on the right
with the rectangle selected. Click the
fill color and change the color to blue.

If you click the plus in the Color

Picker, you can save the color with the
document. Next, you’ll save the color in
the Libraries panel—which is better.

7
Saving and editing color
While you create your placeholder shapes for your low-fidelity
design, you will want to save color. In the Libraries panel, you can
preserve colors, text formatting (styles), and components (similar
to symbols).

1 Open the Libraries panel by clicking the

icon in the lower-left.

2 Click the plus in the Colors section to

save any color from the selected object
with the shape still selected.

Now to create some more

placeholder rectangles.

3 Select the Rectangle tool again.

Draw a few placeholder boxes for the
main heading text to go over (so it’s
readable) and another below the
masthead.

4 Click the blue color you saved in

the Libraries panel to apply it to the
second rectangle.

8
 When you create rectangles, by default, they have a white fill
and gray stroke.

5 With the rectangle you just applied the

blue to still selected, click the plus (+)
in the Colors section of the Libraries
panel, to save the stroke AND fill
colors—if either was not already saved
in the panel.

Next, you will edit the border gray that

you saved to use for other things.

6 Right-click the gray color you saved in

the Libraries panel. You’ll see some
options like editing, deleting, and one
of my favorites—Highlight On Canvas.
Choose Edit to edit the color, making it
a light blue.

7 Click to apply the light blue color to

the selected rectangle. See the figure.

9
Working with text
In Adobe XD you can add text as text at a point or text in an
area. Text at a point is a horizontal line of text that begins where
you click and keeps going to the right until you stop typing. Text
in an area uses the boundaries of the text frame to control the
flow of characters. When the text reaches an edge, it wraps inside
the text frame. Text in an area is helpful for creating paragraphs
of text.

Add text
1 Click the white rectangle in the masthead and press
Command+3 (Mac) or Ctrl+3 (Windows) to zoom in to the
selected rectangle.

2 Select the Text tool in the toolbar on

the left. Click in the white rectangle
and type Happiness is to create text at
a point.

If you were to keep typing, the text

would continue to the right until you
either press Return or Enter for a
paragraph return or press Shift+Return
(Mac) or Shift+Enter (Windows) for a soft return.

Tip: XD has spellcheck turned on by default (Edit > Spelling and

Grammar). Any misspelled word will have a red squiggle under
the word. You can right-click and select the correct spelling from
the menu.

3 Press Esc to select the text object. A single point appears on

the box around the text. This is one way to tell that this is text
at a point.

4 Drag the point on the text, down to see

the font size change. Make it larger.

5 Select the Select tool, and drag the

text so it’s within the bounds of the
white rectangle.
Tip: To move around within the document, two-finger pinch on
your trackpad to zoom in or out or two finger drag to pan in
the window.

6 To make a copy of the text box,

Option-drag (macOS) or Alt-Drag
(Windows) the text box. Release the
mouse button and then the key.

7 Double-click the text to edit the text.

Type BAKING.

8 Press the Esc key to select the text box,

then drag the point at the bottom of
the box to make the text larger.

11
EXTRA: Adding guides and grids to artboards
There are a lot of properties you can set for each of the artboards
in your document, including the background color, size, grid, and
more. In the session, I mention some of these options in case you
want to make changes to selected artboards.

1 Click the Home - 1920 artboard name

to select the artboard.

In the Property Inspector on the right,

you’ll see all sorts of properties for the
selected artboard. You can change the
dimensions, position, and background
color of artboards. For the background
color, you may want to make it
transparent for an overlay or black if your overall web design
has a black background instead of making a shape.

You will also see the Grid options: Layout and Square in the
Grid options menu.

2 Select the Layout option in the

Property inspector on the right to turn
the grid on for all selected artboards.

By default, the Layout grid is a 12

column-based grid. You can change
the number of columns, the margins,
the color, and more, to use the column
grid to help align content.

3 Turn off the column grid, unless you want to refine the
appearance and keep it on!

Tip: Only selected artboards show the property changes you

make to the grid. To apply those same properties to other
artboards, select all artboards you want to affect before making
the changes to the grid OR click Make Default with the artboard
that has the changes made selected. Select other artboards, and
click Use Default to apply the property changes.
12
4 Select Square from the Grid menu that
currently has Layout chosen.

A square grid is a vertical and

horizontal grid that covers the entire
artboard. This type of grid can be
helpful when designing apps or icons
where pixel precision is necessary.

The content you add to your artboards

will snap to the grid.

5 Turn off the Grid option unless you want to keep it on!

Adding guides for alignment

If you don’t want to apply a grid for alignment, you can create
individual guides to align content. Sometimes, I will add guides
to align content to, ensuring that it is a certain distance from the
edge of the artboard or align content horizontally in the design.

1 To create a vertical guide, drag from just off the left edge of
the artboard into the artboard. As you drag the guide, press
the Shift key to snap it to every 10 pixels.

Tip: To create a horizontal guide, you can drag from just

above the artboard down into the artboard.

13
2 Drag both text boxes so their left edges
align with the guide. See the figure
for positioning.

You’ll see that the BAKING text

doesn’t line the left edge of the text
up—rather the edge of the box.

3 Press the left arrow key to nudge

the box over. You can also press
Shift+Arrow to move it farther.

Tip: There are lots of options for

guides once you create them. You can
hide them all, lock them all, delete
them from selected artboards (Clear
Guides) from an artboard, and more.

4 Choose View > Guides from the menu

above the document to see them all.

One of my favorite guide commands is

copying and pasting guides from one
artboard to any selected artboards.
ALL guides on an artboard are copied
to ALL selected artboards—great way
to work smarter.

Creating and editing icons and more

Thanks to the array of drawing tools available, you can create
all kinds of vector artwork in Adobe XD. If you’re coming from
other Adobe applications, you’ll find the drawing tools in Adobe
XD to be streamlined and efficient, with a few differences. For
more complex vector content, you can use Illustrator and quickly
bring the vector artwork into XD. To practice creating and
editing vector art, you’ll make a chef’s hat icon for the bakery site. 14
Draw a chef hat
1 Select the Rectangle tool in the toolbar.
Drag to create a rectangle.

Don’t worry about the size for now.

Just make it large enough to work
with. That’s the great thing about
vector artwork—you can make it large
enough to work with easily, then scale
it later without loss of quality.

2 With the rectangle still selected, zoom in to it with a two-

finger pinch.

3 Select the Ellipse tool in the toolbar

and Shift-drag to make a perfect circle
above the rectangle. Release the mouse
button and then the key.

4 Draw two more circles of varying sizes.

See the figure for where to draw them.

Combine shapes
1 With the last circle still selected, Shift-
click the other two circles and the
rectangle to select them all.

15
2 Click the Add button toward the top of the Property
Inspector to combine the four selected shapes into a hat.

If you look in the Property Inspector,

you’ll see that the Add option is
highlighted. That means it’s “on” for
the selected shape. The four buttons
you see to the right of the Repeat Grid
button are called Boolean operations.
The Add option can be toggled off
later, returning the shapes to four
separate shapes!

3 Click the chef’s hat to select it. In the

Property Inspector, on the right, apply
a border, if it isn’t already. Then change
the size of the border.

There are a lot of border options you

can set. In the session, I turn off the
border. In this workbook, you will
turn it off later to better illustrate the
editing you are about to do.

16
4 Double-click the larger circle to select it. You can then drag or
resize any of the circles or the rectangle.

The hat is treated as a special group.

Tip: You can double-click ANY group in XD to edit the

individual objects within. You can then press the Esc key to select
the group again.

Super-user tip: You can select any object within a group by

Option-clicking (macOS) or Alt-clicking (Windows) the object
within the group.

If you were to double-click an

individual shape or a selected shape
within a group, you can edit the
anchor points and control the path.

5 Press the Esc key to select the whole

group again.

6 Shift-drag a corner to make the hat

much smaller.

Notice that the border is the same

width, even though you made the
shape much smaller.

7 Deselect the Border option in the

Property Inspector to remove it.

17
8 Drag the hat into the upper-left corner
of the artboard and align it with the
guide you made.

Managing content with

the Layers panel
Next, I’ll introduce you to the Layers panel to see how you can
manage content and artboards.

1 With the Select tool selected, click in the gray area to

deselect everything.

2 Press Command+Y (Mac) Ctrl+Y

(Windows) to open the Layers panel if
it isn’t open already.

In the Layers panel, with nothing

selected, you’ll see all of the artboards
in the document. The artboards are
listed in the order they were created,
with the last artboard you made at the
top of the list. When you select an artboard in the list, the
artboard is selected in the document.

3 Click the chef hat and look at it in the list of the Layers panel.
You can see the Union object is highlighted.

4 Double-click the name of the object to

rename it to Hat icon.

18
5 Click on an object or artboard in the Layers panel to select it
in the document window.

Tip: Click the sort menu at the top of the Layers panel, and
you can sort based on object types like images, groups,
and text.

6 Click the icon to the left of the “hat

icon” name in the Layers panel to
reveal all of the shapes within that
special hat group.

I use the Layers panel to select content

more quickly or change the ordering of
objects by dragging them up and down
in the layer stack.

Create a button
Next, you’ll use what you’ve learned to make a button quickly. It
will be composed of nothing more than a rectangle with rounded
corners and a text box.

1 Select the Rectangle tool and draw a rectangle below the

BAKERY text in the masthead.

2 To round the corners, drag a circle

(corner radius widget) in any rectangle
corners and drag toward the center of
the shape.

Tip: To round select corners, you can do

that in the Property Inspector or Option-
drag (macOS) Alt-drag (Windows) a
single corner.

3 Change the fill color and remove the

border in the Property Inspector on
the right.

19
4 Click on the shape to add some text. Type Learn More.

5 Center align the text by clicking the Center button in the

Property Inspector. Change any other formatting like the font
family, size, etc.

Note: You currently can’t activate Adobe fonts from within XD,
but you can choose activated Adobe fonts from the font
family menu.

6 With the Select tool selected, align the text with the button
rectangle by selecting the text and rectangle, then clicking
Align Middle (Vertically) and Align Center (Horizontally).

7 You will need to select only the text

object and bump it vertically with your
arrow keys to make it visually aligned.

Moving objects with arrow keys show

Smart Guide distances between the
thing you are moving (the text) and the
shape’s edges in this case.

20
8 Shit-click the button shape again and group them by pressing
Cmd+G (macOS) or Ctrl+G (Windows).

Next, you’ll save the white from the rectangle beneath the text
and button, then apply it to the button text.

9 Right-click the white rectangle and

choose Add Color To Assets to save
the fill (white) and border in the
Libraries panel.

10 To select the button text object within

the group, double-click on it.

11 Open the Libraries panel in the lower-

left and apply the white color.

Why don’t you practice by saving the

button fill color in the Libraries panel
and applying that color to the heading
text.

21
Use content from UI kits
In Adobe XD you can access UI kits for Apple iOS, Microsoft
Windows, Google Material (Android), and more. UI kits and
wireframes can save time when you’re designing for different
device interfaces and platforms. The kits you download are
XD files that include common design elements such as icons,
keyboard layouts, navigation bars, inputs, and buttons. You can
use a UI kit as a starting point or copy and paste elements into
your design. These resources can help you create a design that
matches a specific design language (like iOS).

Extra: Downloading a UI kit

In the session, I just mentioned this, BUT you can download UI kits
from XD resources website and copy elements into your design.

Here’s how you would do that. If you don’t want to see how to do this,
just to the next section, “Copying UI kit content into your design.”

• Choose File > Get UI Kits > More UI Kits.

• On the XD resources website (https://

www.adobe.com/products/xd/features/
ui-kits.html#panel-3), you can choose
from a variety of start kits like Google
Material Design, Apple Design,
and more.

• If you scroll down on that page, you can

see UI Kits made exclusively for XD.

• Click Get the Kit for a UI Kit that you

like to download the files.

• With the kit downloaded, unzip the files

and open the XD file(s) inside.

• Copy content, switch back to your

project file and paste it. DONE!
Copying UI kit content into your design
I copied some of the UI Kit content from a wireframe kit into the
Bakery-site file you can download for the session. Next, you’ll
copy some of that content into your project.

1 Open the Bakery-site file.

2 Zoom into the UI Elements - Footer

artboard and select a footer.

3 Copy it, switch back over to your

project file, and paste.

4 Drag it into the lower-left corner.

5 Resize the footer group, so it stretches

across the whole page.

You may notice that the content within

the footer doesn’t resize. Instead, the
background light blue rectangle does.
That’s because the footer content has
a feature called Responsive Resize
applied. You will learn more about responsive resize in a bit.

The footer object is also a component—which is a reusable

element. In the next section, you’ll explore working with
components and other assets in the Libraries panel as a way
to work smarter.

NOTE: in the session video, I mention that the footer is

linked. A bar appears at the bottom of my screen in the video,
telling us that that feature is going away. Well, it has. The
footer is no longer linked.

23
Intro to components
Components in Adobe XD are a great way to work faster and
wiser. A component is an object that can be reused across
artboards and documents. When you create a component, it
is known as the main component. Suppose you place multiple
copies of a component in your design, called instances. You
can change any properties of the main component, and the
instances are also changed because the instances are linked to the
main component.

Make a component
Changes you make to an individual instance are specific to that
element. Still, changes you make to the main component affect
all instances where that specific property hasn’t been customized.
Next, you’ll save button artwork as a component.

1 On the Home - 1920 artboard, click the chef hat icon in the
upper-left.

2 Click the plus to the right of

Components to add the selected
content to the Components library for
this document (currently).

The content is now a component.

You can tell because it has a green
border. Let’s make a button on a new
artboard that we can use for our UI
components.

Tip: Click List View toward the top of the Libraries panel to
show the assets in a list. You can now double-click the name of a
component and rename it.

With the hat selected, you will also now see COMPONENT
(MAIN) toward the top of the Property Inspector on the
right. In this part of the Property Inspector, you can add
states to the component. BEST PRACTICE!

24
Making the button into a component is an excellent example
of a best practice. You will probably want to use the button in
different situations, but the text might change, so making it a
component is a great idea.

We don’t cover this in the session due to time—but it’s good to

see why we use components.

1 Make your button a component!

After making your button a component, you can then

understand why we use components.

2 With the Select tool selected, drag the button component

from the Libraries panel into the document..

Instance Main Component

You just dragged out an instance. You can tell the difference
between the main component and the instance. The main
component has a green-filled diamond on the box
surrounding it, and the instance has a hollow green diamond
on the box surrounding it. Now you’ll change the text in each
of the component instances.

3 Double-click the component instance

to edit the content within. Double-
click the text and change it to HOME.

4 You can edit the instance without

affecting the main component. Try
changing the color of the button shape.

25
 Tip: If you want the instance to look
like the main component again, you
can right-click it and choose Reset To
Main State.

If you delete a main component from

the canvas, XD generates a main
component next to the objects you’re
currently editing.

5 Double-click the main component

button shape (the original) and drag
one of the corner radius widgets
toward the center to round the
button’s corners.

You will see that the instance

also updates.

Try making some UI content like other buttons, UI elements,

text elements, and more and saving them as components!

BONUS! Working with component states

In XD, you can create a component, add multiple variations or
states, and wire it to mimic real-world user behavior. States make
it easier to manage assets and create interactive design systems.
Common examples of components with states are buttons,
checkboxes, and animated toggle buttons. These components
need to change when users interact with them by tapping or
hovering over them.

1 Click to select one of the button components. I selected the

Main component. All of the instances will reflect the changes
you make because you are editing the main component.

26
 In the Property Inspector, you will
see Component (Main or Instance). A
component can have multiple states.
The initial state that appears for every
component is the default state. You
can add two types of states for your
components—New State and Hover
State. A new state shows variations of a component, such as
a disabled or clicked version of a component. Add a hover
state if you want your component to change appearance, for
instance, when a user hovers over the component. The figure
shows a hover state, but you won’t see one yet.

2 Click the plus (+) to the right of the Default State name in
the Property Inspector. Choose Hover State from the menu.
Leave the state name as Hover State and press Return or
Enter to accept it.

The lightning bolt to the right of the Hover State name in the
menu indicates that the hover state has an interaction
automatically wired to switch the state appearance when a
user interacts with the button.

3 With the Hover State selected in the

Property Inspector, Command-click
(macOS) or Ctrl-click (Windows) the
button rectangle to select it within the
component.

4 Click the Fill color box in the Property

Inspector to open the color picker and
change the color.

5 Press Esc to hide the color picker.

27
6 To select the whole component, press the Esc key. In
the Property Inspector, click Default State to show the
original appearance of the button. You can preview the
states on the component by clicking between them in the
Property Inspector.

7 Click Desktop Preview ( ) in the upper-right corner of the

application window. In the Preview window that opens, move
the pointer over the button to see the hover state change the
appearance of it.

8 Close the Preview window.

Adding multiple states to components

Aside from adding a hover state to a component, you can also
add other states whose actions and appearance you can control.

For instance, you can have a single icon component with three
nested icons. You can use the generic New State option to
create a different state for each, so any time you want to show
one of the icons, you select that state. New State does not have
any interactivity by default. You have to wire the interaction in
Prototype mode.

Make copies of your artboard

Now you’ll make copies of your low-fidelity artboard so you can
start to make other screens/pages. You’ll have two low-fidelity
artboards: Home - 1920, Products - 1920, and two high-fidelity
artboards of the same name.

28
1 With the Select tool selected, click the name of the artboard
Home - 1920 to select the artboard.

2 Make two copies of the artboard and

arrange them as you see in the figure.

Tip: You can choose Edit > Copy, then

Edit > Paste to make a copy, you can
Option-drag (macOS) or Alt-drag
(Windows) the artboard by the name,
or press Cmd+D (macOS) or Ctrl+D
(Windows).

3 You can rename the artboards to make

more sense. For instance, the artboard
to the right of the original, you can
name Products - 1920.

4 Resize the blue placeholder box to

become a navbar. Delete the masthead
from the Products - 1920 page.

5 Make a copy of the Products - 1920

artboard below it. You should now
have four artboards.

29
Transform your design from
low-fidelity to high-fidelity
In this part, you’ll take the low-fidelity design and convert it to
a high-fidelity design by adding imagery, color, and more. You’ll
focus on UI design workflows and working smarter in XD using
the Libraries panel.

Tip: Import Illustrator and Photoshop

Adobe XD supports PSD, AI, PNG, GIF, SVG, JPEG, and TIFF
images. In Adobe XD, images that you import are embedded in
the XD file, since there is no default image-linking workflow, like
in Adobe InDesign.

There are a lot of ways to bring content from Photoshop into XD:

• Copy and paste, export from Photoshop, and import

into XD
• Import a Photoshop file (.psd) (which places the PSD
content into the XD file)
• Open a Photoshop file (.psd) directly in XD (which opens
the PSD as a separate XD file)
• Place the content in a Creative Cloud Library and drag it
into your design from the Creative Cloud Library panel
in XD.

There are also several ways to bring content from Illustrator into
Adobe XD:

• Open the Illustrator file directly in Adobe XD

• Copy and paste from Illustrator to XD
• Export assets from Illustrator, add the Illustrator artwork
to a Creative Cloud library
• Import into XD.

30
Importing images
Normally, you would import an image using one of the methods
described on the previous page. I usually drag from a folder into
my XD doc or choose File > Import to bring in assets.

For this session, I had to supply a Library for you to be able to

import images. So you will drag images from a library into your
XD document.

1 Make sure that you click Copy Library from the session page
to be able to access the library.

By default, in the Libraries panel, you will see the asset saved
with the current document.

2 To see the library in XD, in the Libraries panel on the left,

click DOCUMENT ASSETS at the top of the panel.

3 From the list of libraries (yours might only contain one!), click
L540_XD_Wood to open the library.

4 With XD and the folder showing,

drag an image from the library onto
the header rectangle. When you
see it highlight, release to fill it with
the image.

Note: JPEG images you import into Adobe

XD are placed at half size. That means a

31
JPEG that is 400 pixels x 400 pixels will be placed at 200 pixels
x 200 pixels. The image is placed in the center of the selected
artboard and is larger than the artboard. Any image content that
is outside the bounds of the artboard is hidden. With the image
selected, XD shows the masked content as semi-transparent to
give you a preview of what is hidden.

Tip: If you want to move an image within a frame, double-click

the image to select it and not the frame, then you can drag or
scale it within the frame.

Tip: If you want to replace an image, you can always drag another
image on top of the shape.

5 Try dragging other images into

other shapes.

Bonus: Masking images

Masking is useful and can be done in
several ways. In the previous section, you
saw how to drag images into frames to
mask them. I wanted to include another
method since you won’t always drag
images into your design.

1 Draw a shape to be used as your mask.

2 Place it on top of what you want to mask.

3 Select the shape and image.

4 Right-click and choose Mask with Shape.

32
 If you drag a corner of the shape, the mask will change and
the image will stay the same size and simply reposition in the
mask. If you press the Shift key and drag a corner, the image
and the shape will both resize proportionally.

Tip: In order to edit the image or the shape independently,

double click the image.

Working with repeat grids

When designing mobile apps or websites, you may create
repeating elements or lists, such as a series of employee profiles
or a list of entrées available at a restaurant. The repeating
elements share a common design and general elements, but the
images and text may differ.

In Adobe XD, you can select an object or group of objects and

turn it into a repeat grid. With a repeat grid applied to content,
you can pull a handle at the bottom or right side of the content,
and the content repeats in the direction you pull.

If you have a text in the repeat grid, only the style of the text
element is repeated across. The text itself can be changed for
each occurrence. So you can style text elements quickly while
keeping the content different in the grid elements.

1 On the Products page (high-fidelity),

select the Rectangle tool and draw a
rectangle to insert an image.

33
2 Drag an image into the rectangle from
your library.

3 Select the Text tool and add a bit of

text below the image to serve as
a description.

4 Select the Select tool selected and drag

across the image and the text to select
both. Right-click and choose Group to
group them.

5 Click Repeat Grid in the Property

Inspector to make it a repeat grid
object with the group selected.

6 Drag the handle on the right to add or

remove repeat columns.

Tip: You could also drag the handle on

the bottom to add or remove repeat
rows. In this instance, you won’t.
7 Move the cursor between the images.
When you see a pink highlight,
you can drag to increase the gap
between them.

If you find that the images don’t fit

width-wise, you can double-click on
one of the images to select it in the
repeat grid, then make it narrower,
making all images in the grid narrower.

You can then press the Esc key to

select the whole grid again, drag from
between the images again to refine the
gap, and drag the handle on the right
side of the grid to ensure that only two
images are showing.

35
Adding images to the Repeat Grid
You can add images to the repeat grid placeholder frames by
dragging a series of images onto the repeat grid placeholder
rectangle. The images are added in alpha-numeric order.

1 You can drag two images you select

from the Library you copied on the
session page for this session.

Tip: Another way is with XD and a

folder of images you want to add to the
repeat grid showing, select and drag a
series of images onto one of the images
in the repeat grid. When you see it
highlight, release to add the images.

2 To see the document assets again, you

can click Document Assets at the top
of the Libraries panel.

Any time you need, you can switch

back to the session library (L540_
XD_Wood)) using the technique you
learned in the previous sections.

3 Double-click the text below each

image in the repeat, and change it if
you like.

Note: My text was center-aligned, so

it appeared to move when I edited
the first bit of text. You can set the
alignment for one of the text boxes to
the left, then drag it where you want
it. The other text box in the repeat grid
will follow suit!

36
Responsive content and layouts
When designing in XD, it can be essential to consider how
content acts across various screen sizes, especially when
designing a website. To solve this problem, Adobe XD has several
layout features.

The first feature, content-aware layout, allows you to set padding

values on groups or components and automatically scale the
background when content changes are made. This can be useful
if you have versions of buttons, drop-downs, tooltips, or even
dialogs that need to be resized.

The other feature is called responsive resize. With responsive

resize, XD automatically predicts which constraints you are
likely to apply and then automatically applies those constraints
as objects are resized. Unlike responsive resize that acts when
you resize an entire group, padding works when you change the
content within a group.

Getting started with responsive resize

In this section, you’ll explore responsive resize to create a tablet
design from the desktop design. You’ll explore how to turn on
responsive resize and see how it affects different artboards.

1 With the Select tool selected, click the Home - 1920 artboard
name to select it.

2 To make a copy of the home artboard,

Option-drag (macOS) or Alt-drag
(Windows) the artboard by it’s name,
down to below the original. Release the
mouse button and then the key.
Tip: You can change the artboard
name if you like.

37
3 Zoom in to the artboard and drag the
right-middle point to the left to make
it narrower.

The content on the artboard doesn’t

resize or move by default. By default,
the responsive resize option is turned
off for artboards, but you can turn
it on for selected artboards. Turning
it on for an artboard will allow the
content on that artboard to resize.

4 Press Command+Z (macOS) or Ctrl+Z (Windows) to undo the

artboard resizing.

5 With the artboard still selected, in the

Property Inspector click Responsive
Resize to turn it on.

The content on the artboard is now set

to resize as the artboard is resized.

6 Make the artboard narrower again to

see how it reacts.

Some of the content is reacting by

resizing or moving. Notice that the
repeat grid is just hiding rather than
scaling. With responsive resize turned
on for the artboard, Adobe XD looks
at the objects on the artboard, their
grouping structure, their proximity to
the edges of the parent group (such
as the artboard), and the layout information when resizing.
When resizing either objects on the artboard or the artboard
itself, pink crosshairs appear on the content that is being
resized. These crosshairs indicate what constraint rules are
applied to a group. Constraint rules are used to determine
how objects behave when you resize them. You’ll explore
38
constraint rules in the next section.
7 Press Command+Z (macOS) or Ctrl+Z (Windows) to undo the
artboard resizing.

Tip: When you resize an artboard with the responsive resize

option enabled, Adobe XD does its best to recreate the placement
of your elements on a larger or smaller artboard. Before resizing
content, you can group similar objects to establish relationships
between them. When resized, grouped objects stay together by
default and allow you to establish a hierarchy in your projects.

Setting responsive resize options

When you apply Responsive Resize to an artboard, the content
reacts to the resizing in different ways. You can either resize
the artboard and then adjust the content to work with the new
artboard size, and/or you can set resize options for the content so
that you have less finessing to do after you resize the artboard.

Tip: One way to try and get the heading, button, and white
rectangle, which I manually resized in the session, to resize—is to
group it.

1 Click the main masthead image on the artboard.

Notice that Responsive Resize is on. That means that if you

resize the image OR the artboard that it is on, it will resize in
some way.

Auto means that auto settings are applied to the image. If you
want to control how the image resizes, you can set the option
to Manual in the Property Inspector.

2 Click Manual below Responsive Resize

in the Property Inspector.

You can now see some options like

Fix Width and Fix Height and see how
setting those affects the image when
you resize the artboard.

3 After resizing the artboard, adjust the

content so it looks good.
39
Prototyping and sharing
Now you’ll test the user experience of your design by creating an
interactive prototype. That way, you and others can interact with
the prototype by testing the links between screens. A designer
could use it to visually describe an interaction between screens to
a developer and much more. In this section, you’ll explore how to
create links (connections) and test those links.

Setting up an initial connection

1 Click Prototype in the upper-left
corner to get into Prototype mode.

2 Click the name “Home - 1920” above

the high-fidelity Home artboard (the
Home artboard you added images to).

In Prototype mode, when you select an

artboard, you’ll see a small white arrow in a circle on the right
side of the artboard. It’s circled in the previous figure. This is
called the connecting handle and is what you use to make a
connection.

3 Drag the connecting handle away from the artboard, and

you’ll see a connector (blue line). Drag the connector within
the bounds of the artboard to the right. When a subtle blue
highlight appears around the artboard, release the mouse
button to connect the two artboards.

Note: I added a hover state to the button in this workbook, not in

the session. That’s why the curved line is coming out of the plus (+)
on the right side of the button. Without the hover state, you will
just see a plus (+).

40
 When you test the prototype, either in the Desktop preview
in XD or in the Adobe XD mobile app on your device,
tapping anywhere on the home screen will transition to the
artboard to the right. Now you’re tasked with setting the
options for the interaction.

4 Set any connection properties in the

menu that appears on the right.

To learn more about the connection

properties, visit: https://www.adobe.
com/products/xd/learn/design/
productivity/how-to-wireframe-xd.
html

5 Try creating connections from other

content to artboards. If you want to
remove a connection, you can select
the object and drag the line connecting
it with an artboard into an empty area
of the window.

Previewing connections
As you begin to add connections and create your prototype,
you’ll want to preview and test those connections. You can do
this using several methods, including a desktop preview and the
Adobe XD mobile app. In this section, you’ll be introduced to the
Preview window for testing.

1 Click Desktop Preview arrow in the

upper-right corner.

The Preview window is opened at

the size of the artboard currently in
focus. You can edit the design and
interactions in your prototype while
previewing in the Preview window.
The changes are instantaneously available for preview.

41
2 Click the button in the preview window to show the
next artboard.

Tip: You can easily navigate between screens in the Preview

window by pressing the left or right arrow keys.

3 Close the Preview window.

4 Try adding more interactivity and exploring what you can do.

Previewing on device
Previewing locally in Adobe XD using the Preview window can
be an effective way to test links and get an idea of what your
design will look like. To truly experience your prototype, you
should test on a device such as an iPhone. The free Adobe XD
mobile app lets you preview designs you create in Adobe XD on
iOS and Android devices.

There are several methods for testing on devices using the

mobile app:

• Real-time preview via USB: You can connect multiple devices

via USB to a computer that is running Adobe XD, make
changes to your designs and prototypes on the desktop, and
preview them in real time on all connected mobile devices.

• Invite people to review your prototypes by sharing a

private link.

• View and comment on XD cloud documents in the XD mobile

app on your device, and share them with others.

• To learn more, visit: https://helpx.adobe.com/xd/help/ 42

preview-mobile.html
Share your designs
You can share your designs and prototypes with others using
Share mode so you can edit a cloud document collaboratively,
gather feedback on a design or prototype, create a presentation,
or share design specifications with a developer. You may
choose to share at any point during the design process,
from an in-progress design with no interactivity to a fully
interactive prototype.

Adobe XD has default sharing presets that you can

use, including:

• Design Review: Get feedback on your design or prototype. By

default, commenting is enabled when viewing in-browser, and
the prototype is not in fullscreen mode.

• Development: Share your design or prototype with

developers. By default, commenting is enabled when viewing
in-browser, and the prototype is not in fullscreen mode. Specs
mode is also available in the browser for viewing project
specifications.

• Presentation: Optimized for presenting your design.

• User Testing: Ideal for testing your prototype. By default,

commenting is NOT enabled when viewing in-browser, and
the prototype is in fullscreen mode.

• Custom: Customize the viewing experience.

Sharing a flow
1 Click Share in the upper-left of the
document window.

By default, XD will share every

artboard in the document as a link to
users. They can click the link and open
it in their browser to review.

43
 If you want to send a specific set of artboards—in our
case, the high-fidelity version, you can create a “flow” in
Prototype mode.

2 Click Prototype in the upper-left to got to Prototype mode.

3 Click the little gray box attached to the

upper-left of the Home artboard (the
high-fidelity home artboard). This
creates a flow from the home artboard
and includes all artboards that are
connected to the home artboard
indirectly or through another artboard.

4 Click the Flow 1 blue tab and

rename it.

When you share, you can choose

between the different flows you make
in a document.

5 Click back on Share in the upper-left.

6 Click the Create Link button on the

right after you set the share options
you want.

Note: The share options are described on

the previous page.

Your prototype is uploaded and a link

is generated that you can share with
others. If you click that link, you can
see the design in the browser that
others will see.

44
EXTRA: Invite others to edit
the XD document
1 With the project you want to share open, click the Invite To
Document icon in the upper-right corner of the application
window to open a window. If the document you are sharing is
not a cloud, XD will ask you to save it as one.

2 Save the document as a cloud doc.

3 Back in the Invite To Document window, enter an email

address or multiple in the field and add a message.

Once you share a document, collaborators receive a

notification from the Creative Cloud desktop application and
email. Your recipient will only receive a notification in the
Creative Cloud desktop application if you enter the email
address that serves as their username for their Creative Cloud
membership.

4 Click Invite. After XD sends the invite,

you, as the initiator, will see a message
indicating that it has sent.

5 If you click Invite To Document again,

in the window you’ll see all of the users
you’ve shared the cloud document
with, including the owner.

This is one place where you can track

who has access to the document. You
can also remove invited collaborators

45
from the shared cloud document. To do so, you would move
the pointer over an email address in the list (not the owner)
and click Remove. You would then need to click Save to
remove them.

46