Solution Manual for Adobe XD Classroom in a Book (2020 release)

Name: Solution Manual for Adobe XD Classroom in a Book (2020 release)
Brand: Academic Documents Platform
Price: 10 USD
Availability: InStock
Author: Lily Green

Unlock key concepts with Solution Manual for Adobe XD Classroom in a Book (2020 release), a structured guide for better understanding.

Lily Green

Contributor

4.3

4 months ago

Preview (16 of 62)

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

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.

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.

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.”

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 6...

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 7...

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 8...

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 9...

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 10...

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 11...

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 12...

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 13...

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 14...

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 15...

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 16...

13 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

Document Chat

Document Details

Subject

Information Technology

Solution Manual for Adobe XD Classroom in a Book (2020 release)

Study Now!

Document Details

Related Documents

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

DevOps and Its Importance Study Notes

Veeam Certified Engineer VMCE-V12

Modules 1 - 3 Basic Network Connectivity and Commu

Notes CCNA

CCNA 200-301 Portable Command Guide 5th Edition 20

CCNA 200-301 Portable Command Guide 5th Edition 22

CCNA 200-301 Portable Command Guide 5th Edition 36

Foundations of Novell Networking Section 26

Modulo 7 DHCPv4

Company

Explore

Study Tools