Index
A
action setting, 233
Adobe After Effects, 331
Adobe Authorized Training Centers, 5
Adobe Create Magazine, 5
Adobe forums, 5
Adobe I/O developer console, 334
Adobe Illustrator. See Illustrator
Adobe Photoshop. See Photoshop
image formats, 57
installing, 2
starting work in, 10
system requirements, 2
third-party integration, 338
unit-less nature of, 45
vector graphics and, 91
Adobe XD Learn & Support page, 5, 26
Adobe XD product home page, 5
After Effects projects, 331
Align Center button, 69
Align To Pixel Grid option, 107, 109
content to pixel grid, 107–109
guides used for, 92, 111, 145–146
objects to artboard, 139
objects to each other, 142–143
setting up objects for, 139–142
creating, 111
paths and, 112
exporting PNG files for, 328
measurement unit for, 309
mobile device previews, 273, 275
resolution settings for, 310
auto-animating content, 248–250
connection setting for, 233
artboard, 40
repeat grid, 210
appearance changes, 40
browsing on devices, 278
changing multiple, 41
copying and pasting, 39
deleting, 35
distributing, 145
duplicating, 39
home screen, 309
managing with Layers panel, 51–52, 53, 130
measurement unit for, 309
orientation options, 37
responsive resize for, 42, 217–218
Retina (HiDPI) sizing for, 32
review questions/answers on, 53
screens represented as, 31
adding from Illustrator, 71–72
aligning to pixel grid, 107–109
components created from, 162–163
copying and pasting, 118
editing with Pen tool, 117–118
adding to CC Libraries, 179–182
linked, 175
gradient colors viewed in, 193
toggling open/closed, 155
auto-animating content, 248–250, 265
auto-correct functionality, 79
Autosave feature, 32
Available Offline option, 282
B
blend modes, 202
Boolean operations, 104
options for working with, 98–99
Bring Forward command, 127
Bring to Front command, 127, 257
Browse artboards option, 278
previewing prototypes in, 297–298
supported in Adobe XD, 297
viewing design specs in, 308, 309, 310, 311–316
C
deleting, 162
duplicating, 100
image fills in, 76
Classroom in a Book training series, 1
closed paths, 112
previewing on devices, 280–282
saving XD documents as, 280
video on working with, 33
code, embed, 301
coediting documents, 293
color stops, 191, 192, 195, 196
Column Width values, 48
combining shapes, 104–106, 123
deleting, 306
guest, 303
Comments panel, 302, 303, 304–305
breaking links to, 178
defined, 162
footer groups as, 167
instances of, 164–165, 166, 187
multiple states added to, 244–248
connecting handles, 234
adding to component masters, 239–241
copying and pasting, 241
types of, 265
See also links
hiding, 134
locking, 133
saving as a component, 162–163
Sketch, 70
Convert to Path command, 80, 107
Copy Embed Code command, 300, 301
artboards, 39
connections, 241
embed code, 301
guides, 50
replacement images, 62
selected artwork, 118
text, 81
from UI kits, 122
Corner Radius values, 94, 100, 101
corner radius widgets, 100
Create Link button, 296
cloud documents stored in, 32
previewing documents loaded from, 273, 280–282
saving XD documents to, 280
shared prototypes stored in, 317
working with documents from, 33
Creative Cloud Libraries, 179–186, 187
character styles used from, 182–183
editing items in, 186
explanation on using, 179
Illustrator assets added to, 181–182
selecting multiple objects in, 185
Custom Size icon, 31
D
Dash values, 107
dashed lines, 107
artboards, 35
character styles, 162
comments, 306
downloaded XD files, 279
guides, 50
See also removing
toggling Prototype mode and, 15, 230
tools used in, 13
previewing, 24
destination setting, 233
development, sharing for, 289, 308–310
Device Preview option, 276
deleting files from, 279
navigating the mobile app for, 277–279
USB connection for, 274–279, 285
direction handles, 112
direction lines, 112
splitting, 115
direction points, 112
viewing with temporary guides, 150
artboards, 145
cloud, 32
coediting, 293
panning, 21
saving, 33
switching between, 26
cloud documents, 282
lesson files, 3
images, 61
text, 81
grid used for, 112
artboards, 39
lines, 108
shapes, 100
duration setting, 233, 236, 251
E
easing transitions, 233
CC Library items, 186
character styles, 161–162, 187
comments, 306
shapes, 101–103, 106–107, 117–118
educator resources, 5
blend mode, 202
embedding shared prototypes, 301, 317
Export dialog box, 322, 324, 325, 327, 331
Export For option, 309, 310, 326, 330
exporting assets, 320–331, 339
to After Effects, 331
from Illustrator, 72
eye icon, 134
F
feedback icon, 297
for exporting assets, 320, 339
artboard, 40
Comments panel, 307
Fix Height option, 221
fixed-position objects, 258–259, 265
lines, 108
shapes, 103
Font menu, 82
fixing missing, 84
message about missing, 90
used in lesson files, 4
footer components, 167
formatting text, 82–84, 159–162
forums, Adobe, 5
resizing images within, 64
support for inline, 301
G
changing in dashed lines, 107
setting between objects, 148–149
gradient slider, 192, 194, 195, 196
description of, 191
direction and length adjustments, 195–196
linear and radial, 191
grammar check, 86
creating and working with, 91
using from CC Libraries, 184–185
See also raster images; vector graphics
drawing with, 112
See also repeat grids
editing content within, 137–138, 151
guest commenting, 303
deleting, 50
locking, 50
Gutter Width values, 48
H
hand pointer, 235
Helvetica Neue font, 4, 79, 82, 161
content on artboards, 134
square grids, 93
HiDPI (Retina) sizing, 32, 326
high-fidelity (hi-fi) designs, 9
Highlight On Canvas command, 84, 157, 161
history of cloud documents, 283–284
Home screen, 10, 31, 231, 265, 309
hotspot hints, 277
HSB color values, 41, 128, 192, 194
I
adding assets to CC Libraries from, 181–182
bringing in content from, 71–72
editing vector graphics in, 186
exporting artwork from, 72
copying and pasting, 62, 65–66
dragging and dropping, 61
opening from Sketch, 70
ordering in repeat grids, 208
positioning, 63
transforming, 63
using from CC Libraries, 184, 186
drag and drop for, 61
objects with gradients, 191
text, 81
inline frames, 301
inspecting design specs, 311–316
Adobe XD, 2
copying and pasting, 241
example of prototyping, 9
recording in prototypes, 269–272, 285
Invite To Document icon, 290, 291, 292, 317
exporting PNG files for, 329
measurement unit for, 309
mobile device previews, 273, 274
resolution settings for, 310
iTunes, 274
J
described, 320
exporting files as, 330–331, 339
importing images in, 57
jumpstart method, 4
L
grouping objects using, 137
icons indicating object type in, 130
locking and hiding content in, 133–134
managing artboards with, 51–52, 53, 130
opening and working in, 14–15, 22–23
reordering content in, 129–130
searching and filtering in, 134–135
selecting content using, 130–133
toggling the visibility of, 51
explained, 43
downloading files for, 3
jumpstart method for, 4
libraries. See Creative Cloud Libraries
Line Spacing option, 82
linear gradients, 191
dashed, 107
duplicating, 108
flipping, 108
linked assets, 175
breaking links to, 178
explained, 173
Linked Screens icon, 311
managing shared, 316
See also connections
List View button, 164, 174, 260
Lock Aspect option, 37, 58, 63, 76, 77, 140, 147
content, 133
guides, 50
low-fidelity wireframes, 9, 27
M
native zooming, 19
system requirements, 2
workspace, 11
Manage Links command, 316
margin settings, 48
Mark For Export icon, 308
Mark Version icon, 284
Mask with Shape command, 74
removing from content, 76
adding connections to, 239–241
editing, 165
Maximize application option, 10
measurement units, 45, 309, 315
menu bar, 11
Missing Fonts message, 90
mobile app for Adobe XD, 273–274
mobile device previews, 273–282
deleting files from, 279
navigating the mobile app for, 277–279
USB connection for, 274–279, 285
N
groups, 136
nesting repeat grids, 204
New State option, 244, 245, 246
notifications icon, 297
O
object blur effect, 198–199, 225
aligning to artboard, 139
aligning to each other, 142–143
applying multiple interactions to, 252–254
locking, 133
offline cloud documents, 281, 282
on-canvas gradient editor, 192, 195, 196
open paths, 112
images in repeat grids, 208
arranging objects and, 127–128
distributing objects and, 143–145
positioning objects and, 145–150
review questions/answers on, 151
orientation, artboard, 37
Outer Stroke button, 98
setting up content for, 260–262
overriding properties, 166
P
video on working with, 217
See also Assets panel; Layers panel
pasting. See copying and pasting
Path Edit mode, 75, 102, 105, 117–118, 123
components of, 112
converting text to, 80
described, 320
path direction changes and, 114–116
bringing in content from, 65–69, 87
copying and pasting from, 65–66
editing images in, 58, 69–70, 186
pixels, virtual, 43
creating, 334
described, 320
aligning with temporary guides, 145–146
fixed positioning for, 258–259
setting gap distances and, 148–149
viewing distances and, 150
presentation, sharing for, 289
full-screen, 241
See also mobile device previews
Previous Artboard action, 239, 240
Property Inspector, 11, 12, 13–14
Prototype mode, 15–16, 230, 314
auto-animating content in, 248–250
copying/pasting connections in, 241
drag triggers added to, 251–252
editing connections in, 236–239
fixed-position objects in, 258–259
home screen setup for, 231
multiple interactions in, 252–254
preserving scroll position in, 254–258
previewing on a device, 273–282, 285
recording interactivity in, 269–272, 285
review questions/answers on, 265, 285
speech playback added to, 264
testing connections in, 234–235
timed transitions in, 264
timed triggers in, 264
Q
R
radial gradients, 191
sizing for Adobe XD, 58
using from CC Libraries, 184, 186
See also images
real-time preview, 273
recording prototypes, 269–272, 285
Rectangle tool, 73, 92, 99, 101, 127
masks from content, 76
text from text area, 81
See also deleting
renaming. See naming/renaming
reordering. See ordering/reordering
adding content to, 210–211, 225
finishing touches for, 212–214
modifying appearance of, 210
nesting, 204
ordering images in, 208
selecting content for, 203–204
setting up text files for, 209
sizing/resizing, 205
ungrouping, 212
replying to comments, 306
resizing. See responsive resize; sizing/resizing
resolution settings, 310
resolved comments, 306–307, 317
description of, 215
finishing designs after, 222–224
manual constraints for, 220–222
Retina (HiDPI) sizing, 32, 326
review, sharing for, 289, 294–310
artwork, 75
devices, 277
shapes, 102
text, 79
rounded-corner rectangles, 99–101
S
documents, 33
scaling images, 58
device size options for, 31
See also artboards
scroll position preservation, 233, 254–258
Select tool, 13, 34, 38, 40, 41
artboards using Select tool, 37, 38, 40, 41
content using Layers panel, 130–133
multiple objects in CC Libraries, 185
Send Backward command, 127, 128
Send To Back command, 127
duplicating, 100
editing, 101–103, 106–107, 117–118
flipping, 103
rotating, 102
Share mode, 289, 294, 295, 301, 309, 316
embedding in web pages, 301
file storage for, 317
working with comments in, 305–307
managing links for, 316
overview on methods of, 289
prototypes for review, 294–307
review questions/answers on, 317
repeat grids, 205
See also responsive resize
Sketch files, 70
smooth points, 113, 114, 115, 123
speech playback, 264
spelling check, 86
explained, 43
hiding/showing, 93
shape creation and, 101
snapping function and, 94, 103, 112
turning off, 94
stars, creating, 95
principles for editing, 248
styles, text/character, 82–84, 159–162
Subtract option, 105
described, 320
swatches. See color swatches
Swatches button, 186
symbols. See components
T
tap triggers, 233, 238, 250, 253, 256
viewing distances with, 150
converting, 80
importing, 81
removing, 81
rotating, 79
spelling/grammar check, 86
text files, for repeat grids, 209
Text tool, 79, 80, 83, 159, 166
third-party integration, 338
timed transitions, 264
timed triggers, 264
Design mode, 13
Prototype mode, 16
transforming images, 63
timed, 264
U
UI Faces plugin, 333, 334, 335
copying/pasting from, 122
Ungroup Mask command, 76
grouped icons, 147
repeat grids, 212
units of measurement, 45, 309, 315
Unlink Component option, 204
cloud documents, 282
USB-connected previews, 273, 274–279, 285
user experience (UX) design workflow, 8–9
user testing, sharing for, 289
V
Adobe XD and, 91
Illustrator content as, 71
using from CC Libraries, 184, 186
working with shapes as, 91–109
versions of cloud documents, 283–284
video recording prototypes, 269–272
on cloud documents, 33
on coediting documents, 293
on exporting Illustrator artwork, 72
on padding, 217
on speech playback, 264
on timed transitions, 264
on timed triggers, 264
on voice triggers, 264
View Specs button, 312
distances, 150
virtual pixels, 43
W
Web Edition of book, 3
embedding shared prototypes in, 301, 317
measurement units for, 309
resolution settings for, 310
widgets, corner, 100
native zooming, 19
system requirements, 2
workspace, 12
wireframes, low-fidelity, 9, 27
workspaces, 10
macOS, 11
Windows, 12
X
XD program. See Adobe XD
XDX file format, 332
Z
Zeplin tool, 338