Lecture Notes for Adobe XD Classroom in a Book (2020 release)

Name: Lecture Notes for Adobe XD Classroom in a Book (2020 release)
Brand: Academic Documents Platform
Price: 7.99 USD
Availability: InStock
Author: Isabella White

Lecture Notes for Adobe XD Classroom in a Book (2020 release) simplifies complex topics with easy-to-understand notes.

Isabella White

Contributor

4.5

118

about 2 months ago

Preview (20 of 66)

CLASSROOM IN A BOOK®
Instructor Notes
Brian Wood
XD
Adobe
2020 release

Adobe® XD Classroom in a Book® (2020 release), Instructor Notes
© 2020 Adobe. All rights reserved.
Adobe Press is an imprint of Pearson Education, Inc. For the latest on Adobe Press books, go to www.
adobepress.com. To report errors, please send a note to errata@peachpit.com. For information regarding
permissions, request forms, and the appropriate contacts within the Pearson Education Global Rights &
Permissions department, please visit www.pearsoned.com/permissions/.
If this guide is distributed with software that includes an end user license agreement, this guide, as well
as the software described in it, is furnished under license and may be used or copied only in accordance
with the terms of such license. Except as permitted by any such license, no part of this guide may
be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, electronic,
mechanical, recording, or otherwise, without the prior written permission of Adobe. Please note that
the content in this guide is protected under copyright law even if it is not distributed with software that
includes an end user license agreement.
The content of this guide is furnished for informational use only, is subject to change without notice, and
should not be construed as a commitment by Adobe. Adobe assumes no responsibility or liability for any
errors or inaccuracies that may appear in the informational content contained in this guide.
Please remember that existing artwork or images that you may want to include in your project may be
protected under copyright law. The unauthorized incorporation of such material into your new work
could be a violation of the rights of the copyright owner. Please be sure to obtain any permission required
from the copyright owner.
Any references to company names in sample files are for demonstration purposes only and are not
intended to refer to any actual organization.
Adobe, the Adobe logo, Acrobat, Classroom in a Book, Illustrator, InDesign, After Effects, Photoshop,
and XD are either registered trademarks or trademarks of Adobe in the United States and/or other
countries.
Apple, Mac, Macintosh, macOS, and Safari are trademarks of Apple Inc., registered in the U.S. and
other countries. Microsoft and Windows are either registered trademarks or trademarks of Microsoft
Corporation in the U.S. and/or other countries. All rights reserved. Sketch is a registered trademark of
Bohemian B.V. All other trademarks are the property of their respective owners.
Unless otherwise indicated herein, any third-party trademarks that may appear in this work are the
property of their respective owners and any references to third party trademarks, logos or other trade
dress are for demonstrative or descriptive purposes only. Such references are not intended to imply any
sponsorship, endorsement, authorization, or promotion of Pearson Education, Inc. products by the
owners of such marks, or any relationship between the owner and Pearson Education, Inc. or its affiliates,
authors, licensees or distributors.
Adobe Inc., 345 Park Avenue, San Jose, California 95110-2704, USA
Notice to U.S. Government End Users. The Software and Documentation are “Commercial Items,” as that
term is defined at 48 C.F.R. §2.101, consisting of “Commercial Computer Software” and “Commercial
Computer Software Documentation,” as such terms are used in 48 C.F.R. §12.212 or 48 C.F.R. §227.7202,
as applicable. Consistent with 48 C.F.R. §12.212 or 48 C.F.R. §§227.7202-1 through 227.7202-4, as
applicable, the Commercial Computer Software and Commercial Computer Software Documentation
are being licensed to U.S. Government end users (a) only as Commercial Items and (b) with only those
rights as are granted to all other end users pursuant to the terms and conditions herein. Unpublished-
rights reserved under the copyright laws of the United States. Adobe Inc., 345 Park Avenue, San Jose, CA
95110-2704, USA. For U.S. Government End Users, Adobe agrees to comply with all applicable equal
opportunity laws including, if appropriate, the provisions of Executive Order 11246, as amended, Section
402 of the Vietnam Era Veterans Readjustment Assistance Act of 1974 (38 USC 4212), and Section 503 of
the Rehabilitation Act of 1973, as amended, and the regulations at 41 CFR Parts 60-1 through 60-60, 60-
250, and 60-741. The affirmative action clause and regulations contained in the preceding sentence shall
be incorporated by reference.
Main Title ISBN
ISBN-13: 978-0-13-658380-6
ISBN-10: 0-13-658380-6
Instructor Notes ISBN
ISBN-13: 978-0-13-658373-8
ISBN-10: 0-13-658373-3

ADOBE XD CLASSROOM IN A BOOK (2020 RELEASE) 3
INSTRUCTOR NOTES
Getting Started
The Adobe XD Classroom in a Book™ (2020 release) course presents students with
tips, techniques, and solutions for using the Adobe XD software. The Instructor
Notes are intended to complement the information in the Lessons. The information
presented here is organized to follow the sequence of instruction in each lesson.
About the workbook
It is recommended that each student in the class have an individual copy of the
Adobe XD Classroom in a Book (2020 release). Students will use this book as you
lead them through projects. Additionally, the book can be used as a self-paced
tutorial. There are separate lesson files that are available to those who purchase
the book as well, and those are separate from the lesson files supplied with these
instructor notes. Purchasers will find instructions for accessing the lesson files
in the Getting Started section of the book, in “Accessing the lesson files and
Web Edition”
Web Edition
This book comes with a free Web Edition that enhances the instructional value
of the book itself and can be accessed from any device with a connection to the
Internet. The Web Edition contains the complete text of the book, plus hours of
instructional video keyed to the text and interactive quizzes. In addition, the Web
Edition will be updated when Adobe adds significant feature updates between
major Creative Cloud releases. See the “Web Edition” section in the book’s
Getting Started section for more information.
Course strategy
If you’re teaching an 11-session class, you can teach one lesson of this book per
class. The book contains 11 lessons, some of which may take a while to complete. If
you are teaching a class with fewer sessions, you may want to combine some of the
lessons into a single class. For example:
1 Lessons 1 and 2 could be combined since lesson 1 is shorter. If you have a class
where students are already familiar with other Adobe tools, such as Illustrator
or Photoshop, you can move more quickly through the parts of the workspace
in lesson 1.
2 Lessons 3 and 4 could be combined and shortened. If you have a class where

Loading page 4...

4 INSTRUCTOR NOTES
students are already familiar with drawing tools, such as the Pen tool, you can
skip or move more quickly through the vector creation section in Lesson 4.
Make sure to point out what’s different in the drawing tools as compared to
other Adobe apps (Illustrator, etc.). For instance, there is no Direct Selection
tool in XD, editing requires double-clicking a shape, etc.
3 Lessons 8 and 9 are focused on creating and previewing a prototype. You
could combine and shorten these two lessons by not covering as many of the
prototyping features.
We recommend that you teach all lessons. You can, however, shorten or minimize
sections that students may already be familiar with in other Adobe apps. The
majority of the basic Adobe XD features and the XD work environment are
covered in these lessons. However, completing all the lessons makes a far
superior introduction.
Before beginning a lesson, encourage students to browse through it, and read
any sidebars.
� Note: Make sure that all Notes found in the text and in the sidebar are read! They can contain
helpful, even problem-solving information.
Managing student projects
One way to simplify file storage and retrieval in classroom situations is to ask
students to create a folder on their hard disks, name it [Student’s] Lessons
(substituting the student’s actual name for “Student”), and then copy each project
folder into the main Lessons folder. Having students keep all their working files in
their own Lessons folder makes it easy for you to clean up files when a class is over.
This method for organizing folders is also discussed in the Getting Started section
at the beginning of the book.
Fonts in the lesson files
The lesson files were set up using the default font on macOS (Helvetica Neue),
and for some of the lessons, the Apple San Francisco font (SF Pro) that comes
with the Apple UI Design Resources kit. If students are learning on Windows,
they can simply replace the fonts used with the default Windows font, Segoe UI,
or another font.

Loading page 5...

ADOBE XD CLASSROOM IN A BOOK (2020 RELEASE) 5
Additional resources
Adobe XD Classroom in a Book (2020 release) is not meant to replace
documentation that comes with the program or to be a comprehensive reference
for every feature. Only the commands and options used in the lessons are
explained in this book. For comprehensive information about program features and
tutorials, please refer to these resources:
Adobe XD Learn & Support: helpx.adobe.com/support/xd.html (accessible
in Adobe XD by choosing Help > Learn & Support [macOS] or clicking the menu
button on Windows and choosing Help > Learn & Support) is where you can find
and browse tutorials, help, and support on Adobe.com.
Adobe Forums: community.adobe.com lets you tap into peer-to-peer discussions,
questions, and answers on Adobe products.
Adobe Create Magazine: create.adobe.com offers thoughtful articles on design
and design issues, a gallery showcasing the work of top-notch designers, tutorials,
and more.
Resources for educators: www.adobe.com/education and edex.adobe.com offer
valuable information for instructors who teach classes on Adobe software. Find
solutions for education at all levels, including free curricula that can be used to
prepare for the Adobe Certified Associate exams.
Also check out these useful links:
Adobe XD product home page: See adobe.com/products/xd.html.

Loading page 6...

6 INSTRUCTOR NOTES
LESSON 1: AN INTRODUCTION
TO ADOBE XD
This lesson provides an overview of the work area and basic functionality of XD. By
the end of the lesson, students should understand how all the basic XD elements
work together to create designs and the overall workflow for app and web design.
They should also understand the overall interface of XD, including how to access
panels, where tools are located, and get an idea of prototyping, previewing and
sharing as well.
Introducing Adobe XD
Page 8: It’s important for students to understand that XD does NOT create code.
When they create a design and/or prototype in XD, they are creating a proof of
concept. At the end of the design process in XD, students can export production-
ready assets, design specs, design system, and a working prototype. The app or
website is developed in another tool, outside of Adobe XD.
We also wanted to point out that XD does not have to be used solely for app or
web design. We know of classrooms that use XD to create working presentations
or even student portfolios, maybe for a review. When you design something in XD,
you can share it out to the world using several methods. A link is created to the
project that is hosted on Creative Cloud.
The UX design workflow
Pages 8–9: This introductory section is meant to give an overview today’s UX
workflow which includes all of the stages of design. You can skip this if students
already grasp UX design and generally understand what prototyping and
wireframing are. Once again, this is a general workflow for an app design and may
not accurately reflect steps taken for another type of project like a presentation.
The Home screen
Page 10: The Home screen is the first thing students will see when they open XD.
It is a place where they can create a project, open a previous project, check out a
tutorial, access UI Kits and other resources. When XD is first launched, the Home
screen will look a bit different than after students have saved and closed their
first project.

Loading page 7...

ADOBE XD CLASSROOM IN A BOOK (2020 RELEASE) 7
On Page 10, step 2, We ask them to close the Assets panel if it opens on the left
side of the workspace because of missing fonts on the document. If the font is an
Adobe font (formerly Typekit), then it is automatically synced. If it is a local font,
then the missing font will show in the Assets panel, where the student could right-
click the name to highlight where it is used on canvas or replace it.
Exploring the workspace (macOS)
Page 11: We split out the macOS and Windows workspaces since Windows does
not have a menu bar with commands. If students are used to working in other
Adobe apps, they will find that the workspace in XD is very streamlined. Panels are
permanently docked and cannot be moved.
They can think of the Property inspector on the right as the Properties panel in
Illustrator or InDesign, for instance.
Exploring the workspace (Windows)
Page 12: On Windows, the XD workspace is minimal with no menus showing.
Instead, there is a “hamburger” menu in the upper-left part of the application
window that, when opened, will reveal some of the options available in the menus
on macOS. On Windows, you will find that all of the same commands are available
as on macOS, but on Windows, they are accessed either by right-clicking on
content or through keyboard commands.
Adobe XD is a native macOS and native Windows application. That means that it
takes advantage of some of the typical OS features available on each.
Working in Design mode
Pages 13–15: This section introduces modes in Adobe XD and gives students
an overview of Design mode. Students will most likely stay in Design mode
initially and later switch between the three modes (Design, Prototype, and Share),
depending on what they want to achieve.
Getting to know the tools
Page 13: The toolbar in XD is one of the smallest in any Adobe app. That’s mostly due
to efficiencies in creating and editing, found in XD. For instance, in Illustrator and
InDesign, you’ll find Selection and Direct Selection tools. In XD, you only have one
Select tool which doubles as the Selection and Direct Selection tools, as you’ll see.
The figures for the lessons in this book were taken using macOS. Make sure that
students read the notes available in each lesson, since they can lead to information
on finding options in their workspace, especially on Windows.

Loading page 8...

8 INSTRUCTOR NOTES
Working with the Property inspector
Pages 13–14: The Property inspector offers access to all of the formatting options
and features. It is permanently docked on the right side of the screen and will be
transformed in Prototype mode to show interactions. At the top of the Property
inspector, you’ll find some options that are always there: alignment, repeat grid,
pathfinder operations, and transform options. The panel is contextual and the
content within changes depending on what is selected.
Working with panels
Pages 14–15: The other panels available in XD, aside from the Property inspector,
are on the left side of the workspace. They are the Assets panel, the Layers panel,
and the Plugins panel. To show or hide each panel, students can click the icons in
the lower-left corner.
It would help speed up work in XD if students learn the keyboard commands
for them. To toggle the visibility of the Layers panel, press Cmd+Y (macOS)
or Ctrl+Y (Windows). To toggle the visibility of the Assets panel, press
Cmd+Option+Y (macOS) or Ctrl+Alt+Y (Windows), Cmd+Shift+P (macOS) or
Ctrl+Shift+P (Windows).
Prototype mode
Pages 15–16: Initially students will not have much need to go into Prototype
mode when they start their own projects since a file needs to at least have
multiple artboards to do anything in Prototype mode. Prototyping is not required
in your XD project, but it is necessary when wanting to show the interactions
between artboards.
A good shortcut to remember is to press Control+Tab (macOS) or Ctrl+Tab
(Windows) to toggle between the three modes: Design, Prototype, and Share.
To learn more about prototyping, see Lesson 8, “Creating a Prototype.”
Changing the view of artwork
Page 17–23: Adobe XD was built for speed. While the Zoom tool works well, I’ve
personally rarely used it in XD. You can utilize the native zooming features on
Windows and mac OS. To understand them better, check out the sidebar on page
19 titled, “Using macOS or Windows native zooming.”

Loading page 9...

ADOBE XD CLASSROOM IN A BOOK (2020 RELEASE) 9
Using view commands
Pages 17–18: You can work more efficiently in XD by holding down the modifier
keys to temporarily activate the Zoom tools. Press Command+spacebar (macOS)
or Ctrl+spacebar (Windows) to temporarily activate the Zoom tool, which allows
you to quickly increase your magnification without having to switch tools.
Page 17, step 4: The Zoom menu on Windows has more viewing options than
macOS. You may need to either give two sets of instructions for zooming to
selection, and other commands, or have students use the keyboard commands for
Zoom To Fit All (Cmd+0/Ctrl+0) and other menu commands.
Using the Zoom tool
Pages 19–21: The Zoom tool is something that we rarely touch in Adobe XD. There
are so many other methods for zooming, including pinch-zoom on the trackpad or
Option/Alt scroll-wheel zooming.
Page 20, after step 4 figure: The shortcuts to access the Zoom tool are relatively
picky about the order of keys pressed. For instance, pressing Command and then
spacebar sometimes won’t work on my machine. We have to press spacebar and
then Command.
Scrolling through a document
Page 21: Since XD has the ability to create multiple artboards, navigating and
scrolling are important. The Hand tool does not appear in the toolbar in XD, it is
only accessed via keyboard commands. You can use the spacebar to temporarily
activate the Hand tool to scroll through a document. When entering text, use the
Alt (Windows) or Option key (macOS) to temporarily access this tool.
Page 21, step 2: Windows users need to pay attention to the note after the figure for
step 2. In order to use the Hand tool, Windows users may need to press and hold
the spacebar and while pressing, press and let go of another key (like the Alt key).
Then, while still pressing the spacebar, pan in the document window.
Navigating Artboards
Pages 22–23: The Layers panel can be (but doesn’t have to be) used for navigating,
editing, naming, and more. In order to navigate to another artboard, make sure
that students are not double-clicking the name of the artboard in the Layers
panel, but rather, double-clicking the thumbnail to the left or to the right of the
artboard name.

Loading page 10...

10 INSTRUCTOR NOTES
Previewing your designs
Page 24: Previewing the prototype is essential in order to test the connections you
make. Not only can you test connections in the Preview window in XD, but you
can also test on device using the Adobe XD mobile app.
A great shortcut for the Preview window is Command+Return (macOS) or
Ctrl+Enter (Windows). That keyboard command only works to open the window,
not close it.
To learn more about previewing designs, see Lesson 8, “Creating a Prototype.”
Sharing your designs
Page 25: When you are ready to share your design with others, you can do so easily
in a few ways—one is using the Share workspace. Sharing a prototype is meant to
gather feedback in the form of comments and sharing design specs is meant to
share the specifications such as fonts, colors, and more with developers at the end
of the process.
To learn more about sharing your designs, see Lesson 10, “Sharing Your Designs.”
Switching between documents
Page 26: Switching between documents is different between macOS and Windows.
On macOS, you can choose an open document from the Window menu or press
Command+~ to toggle between open documents. On Windows, the Window
menu is not available, so you will use the OS document switching (Alt+Tab).

Loading page 11...

ADOBE XD CLASSROOM IN A BOOK (2020 RELEASE) 11
Review questions
1 What is a wireframe?
2 What do artboards represent in XD?
3 What are the three modes found in XD?
4 What shows in the Layers panel with no content selected?
5 What are the options for sharing?
Review answers
1 A low-fidelity wireframe is one way to determine the functional elements of a
page or screen without diving into design specifics like colors and fonts. They
are a quick method of exploring the basic structure and the relationships
between information of an app or website..
2 Artboards in XD represent the screens in an app or web design, typically.
3 The three modes found in Adobe XD are: Design, Prototype, and Share. When you
select a mode, certain features and tools specific to that mode become available in
the application window. These modes represent a stage in the design process. As
you design, you will most likely be switching back and forth between them.
4 When all content in the document is deselected (except for an artboard), a listing of
artboards and any content on the pasteboard appears in the Layers panel.
5 The options for sharing a design or prototype in XD are Invite to Edit, Share For
Review, and Share For Development.
Exploring on your own
You will open a sample file from Adobe XD to investigate and use some of the
navigational and organization features learned in this lesson.
1 Open the file named L1_explore.xd.
This file is included in the instructor notes Zip file you downloaded from here:
www.adobepress.com/XDCIB2020
2 Perform the following on this document:
• Practice zooming in and out.
• Navigate between artboards using the Layers panel and using keyboard
commands.
• Open another document and practice navigating between open documents.
3 Choose File > Close without saving.

Loading page 12...

12 INSTRUCTOR NOTES
LESSON 2: SETTING UP
A PROJECT
This lesson provides an overview of creation and setup up of students’ first project
in Adobe XD. By the end of the lesson, students should have a better understanding
of creating a new document, creating and editing artboards, adding grids to
artboard, working with multiple artboards, and managing artboards with the
Layers panel.
Starting the lesson
Page 30: At the start of each lesson, you will find an initial step that offers several
alternatives for opening a file on both macOS and Windows. Unfortunately on
Windows, if you close all open files, there are no menus to choose from, so you will
click Your Computer in the Home screen to open a file.
Creating and saving a new document
Pages 31–33: Pay close attention to the sidebar “Adobe XD and Retina (HiDPI)”
on page 32. When creating new documents from a default artboard size, you are
creating the design at 1x or non-Retina (non-HiDPI). That is fine and a perfectly
suitable way to design apps or web sites. If you decide that designing at 2x or
another sizing is necessary, then you will need to double or triple the size of the
artboards. This is very important when exporting assets in the last lesson. Adobe
XD will generate as many raster assets (PNG, JPEG, etc.) as necessary for the
device chosen. As students proceed, they will need to ensure that, if they care
about generating production-ready assets, they will need to import images with
enough pixel data. That will be covered more in later lessons.
On page 32, students are introduced to cloud documents. It’s important for you to
understand cloud documents so you can explain them to students. When you first
create a document it’s a cloud document. This is a temporary file, and you need to
save it at least once to start with. Any files saved as a cloud document are saved in
and counted towards their personal storage limit.
Saving an XD file locally gives the students an XD file on their machine that they
can do what they want with. Know that auto-save, which is a great feature, will not
work unless the file is saved as a cloud document.
I encourage you to watch the video, “Working with cloud documents,” found in the
web edition of the book.

Loading page 13...

ADOBE XD CLASSROOM IN A BOOK (2020 RELEASE) 13
Creating artboards with the Artboard tool
Pages 34–36: When attempting to select artboards in the Document window,
students need to be aware of what tool is selected. With the Artboard tool selected,
you can select an artboard by clicking the artboard name above the artboard. If
they attempt to click within an artboard with the Artboard tool selected, they
will create a new artboard. With the Select tool selected, they can click the name,
drag across, or click (if empty)/double-click on an empty spot if it has content, to
select it.
Page 34, step 4: Students may only see default artboard sizes in the Property
inspector if nothing is selected. They may need to scroll in the Property Inspector
to see them.
Make sure that students name the artboards the same as they see in the book. We
will reference those artboards all throughout the lessons.
Changing artboard appearance
Pages 44–45: Changing the appearance of artboards can be a useful feature when
designing. For instance, if you are designing an app and want to set a screen
background color, you can draw an object behind all other content and assign a
color, or you could assign a color to the artboard. A color set in the background of
an artboard is also discoverable when it comes to design specs.
Working with multiple artboards
Page 41: Since there are currently no templates in XD, being able to select and
apply formatting and add content to multiple artboard at once will be very helpful.
Used in combination with components (what used to be called Components ),
selecting multiple can be very powerful for maintaining design consistency.
Adding grids and guides to artboards
Pages 43–50: There are two types of grids that can be applied to artboards: layout
and square. Layout grids are great for setting margins and columns in your designs.
A square grid can be useful for creating icons or other artwork that requires a
visible grid to snap to. We should also mention that XD has an invisible 1 pixel grid
in the background that all content snaps to by default.
Working with square grids
Pages 43–46: Square grids are very useful for mobile app design and not used as
often with web design. As students make their way through the lessons, they will
be asked to zoom in and out, drag content to align to the square grids, and more.
Content will snap to a square grid when dragged, but it may also snap to the pixel

Loading page 14...

14 INSTRUCTOR NOTES
grid if zoomed in far enough. If students find that they can’t snap to the square grid
or can’t achieve the same width or height values when dragging, ask them to either
zoom in or out and what the content they are dragging snaps to and the values
achieved will be different.
Units in Adobe XD
Page 45, sidebar: This sidebar carries some important information. Throughout the
lessons, We try not to reference any kind of unit when referring to measurements,
sizes, and more. The reason why is because XD is unit-less. That means, you can
treat the sizings in whatever unit you need. For instance, if you design a website in
XD, you would assume pixels. If designing for iOS, pt, and so on. When you export
design specs, the dev that views them can set the correct unit when they copy
measurements, sizes, etc.
Applying a layout grid
Pages 47–48: Layout grids are what most of us design to when deigning responsive
web sites. They make it easy to align content to columns by snapping so that later,
when a CSS grid (or other) is used, the content is set to a similar grid.
Page 48, step 9: We found that in later versions of XD, setting margins for each
side was not adding up properly (how we expected it to anyway). You may find
that students need to adjust the values of the Gutter Width and Column Width to
achieve the 0, 32, 0, 32 values we suggest in the book.
Students can always change the layout grid settings later, but to affect the grids on
the artboards in the document, the artboards need to be selected.
Creating artboard guides
Pages 49–50: Artboard guides are newer (May 2019) and can be a very useful tool
for alignment. I find that students accidentally create guides when attempting to
drag across artboard content for selection—so watch for that. Also note that guides
currently cannot be set on an artboard by typing in values.
Managing artboards with the Layers panel
Pages 51–52 At times, managing artboards via the Layers panel will be easier than
attempting to do so in the Document window. When it comes to dragging the
artboards to change the ordering (step 4, page 51), that’s up to the user as to how
to order them. Some of us want to keep all of the app artboards in close proximity
in the Layers panel listing or all of the website artboards. It really depends. Remind
students that dragging and reordering the artboards has no effect in the document,
unless artboards overlap.

Loading page 15...

ADOBE XD CLASSROOM IN A BOOK (2020 RELEASE) 15
Review questions
1 Why might you rename artboards?
2 Describe the process for adding an artboard to an open document using a
default artboard size.
3 What are the two types of grids that can be applied to artboards?
4 Name several methods for selecting multiple artboards.
5 Name two methods for duplicating an artboard.
Review answers
1 You will most likely rename artboards to keep track of them when designing.
Another reason for renaming will show later when you prototype. In order to
create connections between artboards, you will select an artboard by name.
2 In order to add a new artboard using a default size, you can click or drag in
the document window with the Artboard tool, then adjust the size of the
artboard to match a default size in the Property inspector. You can also select
the Artboard tool and click a default artboard size that appears in the Property
inspector to create a new artboard at that size.
3 The two types of grids that you can apply to artboards in XD are square
and layout.
4 In order to select multiple artboards, you can Shift-click or Command/Ctrl-
click artboards in the Layers panel, drag across multiple artboards with the
Select tool, or Shift-click artboard names in the Document window.
5 To duplicate an artboard, you can select an artboard in the Document window
and press Command+D (macOS) or Ctrl+D (Windows), Option-drag/Alt-
drag an artboard in the Document window or Layers panel, copy and paste an
artboard, or right-click an artboard in the Layers panel and choose Duplicate.

Loading page 16...

16 INSTRUCTOR NOTES
Exploring on your own
Now you’ll experiment with a few of the tools you learned in this lesson.
1 If the Home screen isn’t already showing, choose File > New (macOS) or on
Windows, click the menu icon ( ) and choose New. The Home screen appears.
2 Create a new web design document based on the 1366x768 screen size.
3 Perform the following on this new document:
• Add more artboards of the same size.
• Add several artboards for an app design.
• Add layout grids to all of the artboards and adjust the grid settings.
• Change the background color of one of the app artboards.
4 Close the file without saving.

Loading page 17...

ADOBE XD CLASSROOM IN A BOOK (2020 RELEASE) 17
LESSON 3: ADDING
IMAGES AND TEXT
This lesson starts out by teaching students about the different types of assets, then
has students import and work with all different types of assets. The lesson finishes
with adding and styling text.
I wanted to draw your attention to the sidebar “Sizing raster images for Adobe
XD” on page 58. If you want to be able to export production-ready assets when
finished with your design, you will need to ensure that there is enough pixel data
in each placed asset. For vector content (SVG, AI) you won’t need to worry about
any of this since that content is made of vector and is infinitely scalable. It’s the
image assets you place. This really makes more sense when you choose File >
Export > Export Selection with something selected, to see the different number of
assets generated for each file type. For instance, choosing PNG, and exporting for
iOS, you get 3 PNG files at different sizes for every selected image in the design.
When you place raster assets, the ruler of thumb is for web assets, make sure they
are twice the size they are used in the design. For iOS, 3 times the size, and for
Android, 4 times the size.
Starting the lesson
Page 56: Since this section in each lesson is meant to show the completed lesson
file (for that lesson), you can skip this section if time is at a premium.
Assets and Adobe XD
Page 57–64: In the case of XD, assets are both vector and raster. You can bring in
assets from a lot of different sources including Illustrator, Photoshop, Sketch, and
other apps, in a variety of ways.
Importing an image
Pages 57–58: The reason the image is so large is because it is meant to be exported
as an iOS PNG later. That means it should be 3 times the size used in XD. Because
JPEG files are placed at half-size, it will be scaled to half size for the final sizing.
Page 58, step 6: By default, raster images are scaled proportionally when a handle is
dragged. That is assuming that the Lock Aspect option is selected in the Property
inspector, which it is, by default.

Loading page 18...

18 INSTRUCTOR NOTES
Importing multiple assets
Pages 59–60: I find that importing via drag and drop from a folder into XD is the
easiest since you can control where the images are placed in the document. By
placing multiple images using the File > Import command, they are placed in a
row in the middle of the document window and may sometimes seem to disappear
since they are placed on an artboard and may be hidden. If students find it
challenging to find/select placed images, they can open the Layers panel and click
on an artboard to see what is there.
Importing assets via drag and drop
Page 61: Setting up to drag and drop may be tricky if the student doesn’t know the
keyboard commands for switching between open apps in their OS. Also, if students
drag and drop images onto an artboard, the images may seem to disappear. That
may be due to the fact that they have been associated with an artboard and image
content outside of the bounds of the artboard will be hidden.
Replacing an image
Page 62: You’ll find that replacing raster images is one thing. Trying to replace
vector graphics, such as an imported SVG file or other is another. For instance, if
you import a vector logo composed of multiple vector objects, dragging another
logo on top of the existing logo will most likely only replace a part of it.
Transforming images
Page 63: Copy and paste between artboards is currently one of the best methods
for adding the same content, in the same position, to each artboard. You can easily
select a range of artboards and paste content on them.
Resizing an image in its frame
Page 64: In step 4, students may accidentally deselect the image if they don’t press
and drag right on the anchor point. Have them double-click the image and try
again, if that’s the case.
Remind students that if they care about the resolution (quality) of the images for
exporting, they need to be careful about scaling images too much (larger) since the
larger they make raster images in XD, the lower the resolution when it’s exported.
Copying and pasting from Photoshop to XD
Pages 65–66: If students don’t have the latest version of Adobe Photoshop installed
on your machine, in Adobe XD you can choose File > Import (macOS) or click the
menu icon ( ) in the upper-left corner of the application window and choose

Loading page 19...

ADOBE XD CLASSROOM IN A BOOK (2020 RELEASE) 19
Import (Windows). Navigate to the Lessons > Lesson03 > images folder and import
the screen_header.png file.
Page 66, step 6: Students need to Command-click (macOS) or Ctrl-click (Windows)
the layer thumbnail, NOT the name of the layer to make a selection from the layer
content. Know that there are a bunch of ways to copy and export content from
Photoshop—this is not the only way.
Opening a Photoshop file in Adobe XD
Pages 67–69: Opening a Photoshop file (.PSD) directly in XD is a great way to
convert a PSD to an XD document. Almost all content from the PSD will be
converted and editable in XD. Students do not have to have Photoshop installed to
open a PSD file in XD.
Editing an image in Photoshop
Pages 69–70: Obviously for this to work, Photoshop needs to be installed on the
students machine. The file associations are not important in this case. In other
words, if a student machine has .JPG files set to open in Preview, rather than
Photoshop, that shouldn’t matter.
Bringing in content from Adobe Illustrator
Pages 71–72: As was stated in the chapter text, you can bring Illustrator content
into XD a bunch of ways—depending on your needs. Sometimes I’m working in
Illustrator and need to bring a simple icon to XD, so I’ll copy and paste to embed it
in the XD document. Know that students can also copy content from XD and paste
it into Illustrator and it’s still editable!
Note: In order to open an Illustrator document (.AI) in XD, you don’t need to have
Illustrator installed.
Masking content
Pages 73—78: There are two main ways to mask and the correct masking method
for the situation should be used. You cannot easily convert from one mask type to
another. Also, know that masked content that you export is cropped.

Loading page 20...

17 more pages available. Scroll down to load them.

Preview Mode

100%

Study Now!

XY-Copilot AI

Unlimited Access

Secure Payment

Instant Access

24/7 Support

AI Assistant

Document Details

Subject

Information Technology

Lecture Notes for Adobe XD Classroom in a Book (2020 release)

Study Now!

Document Details

Related Documents

VCP-DCV for vSphere 7.x Exam 2V0-21.20 Official Cert Guide, 4th edition (2021)

Test Bank for Managing and Using Information Systems: A Strategic Approach, 7th Edition (Chapters 1-13)

A+ Guide to Hardware, 9th Edition Test Bank

Test Bank for Essentials of MIS, 12th Edition

Test Bank for Introduction to Android Application Development Android Essentials, 5th Edition

Guide To Networking Essentials, 7th Edition Solution Manual

Solution Manual for Introduction to Information Systems: People, Technology and Processes, 3rd Edition

Solution Manual for Fluency With Information Technology, 7th Edition

Solution Manual for Essentials of System Analysis and Design, 4th Edition

Solution Manual for Concepts of Programming Languages, 12th Edition