FM-AA-CIA-15 Rev.

0 10-July-2020

Study Guide in (HCI 101 – Human Computer Interaction) Module No. 5

STUDY GUIDE FOR MODULE NO. 5

Unit 5 – Adobe XD
MODULE OVERVIEW

Adobe XD is a vector-based user experience design tool for web apps and mobile apps,
developed and published by Adobe Inc. It is available for macOS and Windows, although
there are versions for iOS and Android to help preview the result of work directly on mobile
devices.

MODULE LEARNING OBJECTIVES

At the end of this, students are expected to:

1. Explain the Adobe XD.
2. Demonstrate how to use it for creating interactive prototypes.
3. Share design and prototypes.

LEARNING CONTENTS (Adobe XD)

Adobe XD is a complete end-to-end solution for designing user experiences for mobile apps,
websites, and more. You can design, prototype, preview, and share using the same tool.

Figure 1. Adobe XD Workflow

In Adobe XD, you can create prototypes for websites or apps by designing all the screens or pages
in a single Adobe XD file. You can add artboards of the required screen size and then define
interactivity between them 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. That feedback can then be incorporated into the

PANGASINAN STATE UNIVERSITY 1

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in (HCI 101 – Human Computer Interaction) Module No. 5

design. Finally, you can send design specs and exported production-ready assets to a developer to
create the app or website outside of Adobe XD.
Adobe XD CC is a powerful tool for working quickly and efficiently during the design and prototype
phase of the web or app development process.

A typical UX design workflow

In the early days of the web, designers created the user experience (UX) for websites on desktops,
making sure to optimize that experience across different browsers, browser versions, and operating
systems. Since the rise of touchscreen devices, such as the Apple iPhone, designers have had to
consider the overall user experience of apps and websites on different devices. These days, with
the multitude of screen sizes and devices, operating systems, screen pixel densities (think Retina or
hiDPI), and other factors, creating a consistent and pleasurable user experience is an integral part
of the web or app design process. To get our products to market on time and on budget, and to gain
and retain users, we need to work quickly and efficiently. In a typical web or app design workflow
today, we follow the general process shown in the following figure:

Figure 2. Adobe XD General Process

Your design process may be different, depending on the project scope, budget, size, and type, but
this is generally how the process works. First, we gather information through research. This can be
accomplished by simply asking questions of clients and your potential target audience, working with
focus groups, checking existing analytics, and more.

Note:
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. It is a quick way to explore the basic
structure and the relationships between the content, or information, contained within an app or
website.

PANGASINAN STATE UNIVERSITY 2

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in (HCI 101 – Human Computer Interaction) Module No. 5

We then start a design, which can be a low-fidelity, hand-drawn sketch—also called a low fidelity
(low-fi) wireframe—or a high-fidelity (hi-fi) design. Early in the days of the mobile web, we would
sketch, wireframe, and design. Today we typically design, prototype, and collaborate (share).

Figure 3. Low-fi and Hi-fi

To test the user experience, we will create an interactive prototype at some point in the design
process. The prototype is a tool for gathering feedback on the feasibility and usability of our
designs. In the following figure, you’ll see an example of prototyping interactivity in a highfidelity
design.
Note:
The smaller blue area at the bottom of the artboard on the left (covering the Continue button)
represents a hotspot, or interactive area that users will tap or click. The larger blue area on the right
represents the resulting screen that shows. The blue connector (also called a wire) indicates the
connection between the hotspot and the resulting screen.

In the past, several tools were needed to complete this process. Adobe XD CC was born out of the
need for a single all-in-one cross-platform tool for designing and prototyping websites and mobile
apps.
Starting Adobe XD and opening a file
To start working in Adobe XD, you’ll open a document and explore the XD workspace. You’ll create
and manipulate your design content using various elements such as panels, bars, and windows,
all of which make up the workspace.

PANGASINAN STATE UNIVERSITY 3

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in (HCI 101 – Human Computer Interaction) Module No. 5

The Home screen

When you first launch Adobe XD, the Home screen will appear. The Home screen gives you easy
access to presets, a list of recent files (if available), a list of add-ons, resources, a jumpstart tutorial,
and more. The Home screen appears when you create a new file, regardless of whether a file is
already open, or when you click the Home button ( ) in the upper-left corner of the application
window with a document open.
1. Start Adobe XD CC.
Note The Home screen you see may look different. If you’ve opened files previously, it will look a bit
different.
2. Click Your Computer on the left side of the Home screen. Navigate to the Lessons > Lesson01
folder and open the L1_start.xd file.

Figure 4.Home Screen in XD

After the file opens in XD, if fonts used in the document aren’t available on your system, a listing of
missing fonts will appear in the Assets panel on the left. If any of the missing fonts are Adobe fonts
in the Adobe Fonts Library, they are automatically activated and available on your machine.
You will use the L1_start.xd file to practice navigating, zooming, and investigating an Adobe XD
document and the workspace.
Add-ons
You can access plug-ins, UI Kits, and app integrations from the Add-ons tab on the left pane of the
home screen.

PANGASINAN STATE UNIVERSITY 4

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in (HCI 101 – Human Computer Interaction) Module No. 5

Plug-ins extend the functionality of XD by automating complex and repetitive tasks, or integrating
external services or applications within the native XD workflow.
Graphic elements native to various platforms are available in the UI kits.
App integrations such as JIRA provide a complete solution for designers and stakeholders.
Cloud documents
View the list of cloud documents that you have saved from within XD.
Shared with you
Lists the various cloud documents that other stakeholders have shared with you for review.
Manage links
Manage links directs you to assets.web.com. You can view and access the cloud documents from
within the Cloud documents section in the Files menu. You can view the documents in a grid or list
view and sort the documents by name or by date of modification or select the documents to delete
them.
Deleted
Lists the cloud documents that are tagged to be deleted. You can either restore the files tagged to
be deleted or permanently delete them.
Exploring the workspace (Windows)
With the L1_start.xd project file open on Windows, you’ll see the default XD workspace. Press
Ctrl+0 (zero) to see everything.

Figure 5. Adobe XD workplace in windows

PANGASINAN STATE UNIVERSITY 5

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in (HCI 101 – Human Computer Interaction) Module No. 5

A. On Windows, there is no top-level menu bar. Right-click an object and use the context menu
instead. XD on Windows has a “hamburger” menu ( ) in the upperleft corner that allows you to
create or open files, save, export assets, and more.
B. The application modes (Design and Prototype) provide a way to switch between Design mode
and Prototype mode.
C. Adobe XD uses artboards to represent the screens in your app or website.
D. The Property Inspector is docked on the right side of the application window. Adobe XD
consolidates many of the most frequently accessed options in the Property Inspector. The
properties shown in the Property Inspector are contextual, which means they are based on the
content selected in the document.
E. Access to the Layers panel and Assets panel are located in the lower-left corner of the
application window.
F. The toolbar contains tools for selecting, drawing, and editing shapes, paths, and artboards.
G. The pasteboard is the gray area around the artboards; it’s where you can place content that you
don’t want to associate with an existing artboard. The pasteboard and artboards are contained
within the document window.
Working in Design mode
When working on your project in Adobe XD, there are two modes you will be using: Design and
Prototype. When you select a mode, certain features and tools specific to that mode become
available in the application window. Each mode represents a stage in the design process.
When you open a file in Adobe XD, the program starts out in Design mode. In Design mode, you
create and edit artboards and add your design content to them.
Getting to know the tools
In Design mode, the toolbar on the left side of the workspace contains selection and editing tools,
drawing tools, a text tool, an artboard tool, and a zoom tool. As you progress through the lessons,
you’ll work with all of these tools.

Figure 6. Adobe XD tools

PANGASINAN STATE UNIVERSITY 6

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in (HCI 101 – Human Computer Interaction) Module No. 5

Move the pointer over the Select tool ( ) in the toolbar. Notice that the name (Select) and keyboard
shortcut (V) are displayed in a tooltip.

Figure 7. Using Select Tool

Adobe XD was built for speed. To work faster, you can switch between tools using the keyboard
command associated with each of the tools. For instance, pressing the letter Z will switch to the
Zoom tool, and pressing the letter V will switch back to the Select tool.
Working with the Property Inspector
The Property Inspector is the docked panel on the right side of the workspace. It offers quick access
to options and commands relevant to the currently selected content. It’s also where you’ll set
appearance properties for most of your content.
1. Select the Select tool ( ) in the toolbar, and click the image at the top of the artboard
named Hike Detail.

Figure 8. Working with Property Inspector

The options for the selected content appear in the Property Inspector on the right, including color
options, border, effects, and more.

PANGASINAN STATE UNIVERSITY 7

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in (HCI 101 – Human Computer Interaction) Module No. 5

2. In the Property Inspector, click the checkmark to the left of the Fill option to deselect that option
for the selected content (turn the fill off). The image disappears. Select the same Fill option to show
the image again.
3. Click in the gray pasteboard area, away from the artboards, or choose Edit > Deselect All so that
the content on the artboard is no longer selected.
Working with panels
The two main panels in Adobe XD, aside from the Property Inspector, are Layers and Assets.
They are each opened by clicking a button in the lower-left corner of the workspace. By default,
these panels are docked on the left, and they give you quick access to assets and layers. Next,
you’ll experiment with closing and opening these panels.
1. Click the Layers panel button ( ) in the lower-left corner of the application window to
open the Layers panel, if it isn’t already open.

Figure 9. Using the Panel Button

The Layers panel lists all of the artboards in the document when nothing in the document
window is selected. You can think of an artboard as a page in a web design or a screen in an app
design. Later in this lesson, you’ll learn more about artboards and how to navigate them.
2. With the Select tool ( ) selected in the toolbar, click the same image on the Hike Detail artboard
you selected earlier.

PANGASINAN STATE UNIVERSITY 8

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in (HCI 101 – Human Computer Interaction) Module No. 5

Figure 10. Layer Panel View

When you select content on an artboard, all of the content of that artboard is listed in the Layers
panel. The Layers panel is contextual, which means it shows different content depending on what is
(or isn’t) selected.
3. Click the Assets panel button ( ) in the lower-left corner of the workspace to show the
Assets panel.
The Assets panel is where you will find content you save in the current document, like
colors, text styles, and symbols.
4. Click the Assets panel button ( ) in the lower-left corner of the workspace to hide the
Assets panel.
Prototype mode
As a step in the design process, you may wish to connect artboards (screens) to each other to
visualize how users navigate your app or website. With Adobe XD, you can create interactive
prototypes to visualize the interactions between screens or wireframes in Prototype mode. You can
preview the interaction to validate the user experience and iterate on your design to save time on
development. You can also record the interactions and share them with stakeholders to get their
feedback.
1. Press Ctrl+0 (Windows) to make sure you can see all of the design content.
2. Choose Edit > Deselect All or click in a blank part of the gray pasteboard area to deselect all.
3. Click Prototype in the upper-left corner of the application window to enter Prototype mode.

PANGASINAN STATE UNIVERSITY 9

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in (HCI 101 – Human Computer Interaction) Module No. 5

Figure 11. Prototype Mode View

In Prototype mode, notice that the only tools available in the toolbar are the Select tool and Zoom
tool, and the Property Inspector on the right is now hidden. The main purpose of Prototype mode
is to add interactivity to your designs. So for the purpose of visualizing how a transition from one
screen to another might look, for instance, you can add the interactivity between those screens
here.
4. To select all of the content in the document, press Command+A (macOS) or Ctrl+A (Windows).
As you add interactivity to your designs, you can test that interactivity either within the desktop
version of Adobe XD or on a mobile device using the Adobe XD mobile app.
5. To deselect the artwork, choose Edit > Deselect All (macOS) or press Command+Shift+A
(macOS) or Ctrl+Shift+A (Windows).

Keyboard Shortcuts
General shortcuts

Result Keyboard shortcut on macOS Keyboard shortcut on Windows

Quit ?Q Alt + F4

Keys for Edit menu

Menu Keyboard shortcut on macOS Keyboard shortcut on Windows

Undo ?Z Ctrl + Z

Redo ??Z Ctrl + Shift + Z

Cut ?X Ctrl + X

Copy ?C Ctrl + C

PANGASINAN STATE UNIVERSITY 10

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in (HCI 101 – Human Computer Interaction) Module No. 5

Paste ?V Ctrl + V

Paste Appearance (in Design mode), and ??V Ctrl + Alt +V

Paste Interaction (in Prototype mode)

Duplicate ?D Ctrl + D

Delete ? Delete

Select All ?A Ctrl + A

Deselect All ??A Ctrl + Shift + A

Keys for File menu

Menu Keyboard shortcut on macOS Keyboard shortcut on Windows

New ?N Ctrl + N

Open... ? + Shift + O Ctrl + Shift + O

Close ?W Alt + F4

Save... ?S Ctrl + S

Save As... ??S Ctrl + Shift + S

Export Batch ??E Ctrl + Shift + E

Export Selected ?E Ctrl + E

Export to an integrated third-party ??E Not available

application (if an application integrated with
XD is installed on your computer)

Import ??I Ctrl + Shift + I

Keys for Path/Pen

Menu Keyboard shortcut on macOS Keyboard shortcut on Windows

Switch to Pen tool P P

Convert Point Double-click Double-click

Asymmetric Control Point ? Alt

Snap Control Point Angle ? Shift

Snap Anchor Point Angle ? Shift

Add ??U Ctrl + Alt + U

Subtract ??S Ctrl + Alt + S

Intersect ??I Ctrl + Alt + I

Exclude Overlap ??X Ctrl + Alt + X

Convert to Path ?8 Ctrl + 8

Keys for Layers (Objects), Groups, and Artboards

Menu Keyboard shortcut on macOs Keyboard shortcut on Windows

Group layers ?G Ctrl + G

PANGASINAN STATE UNIVERSITY 11

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in (HCI 101 – Human Computer Interaction) Module No. 5

Ungroup layers ??G Ctrl + Shift +G

Make symbol ?K Ctrl + K

Lock/Unlock layer ?L Ctrl + L

Hide/Show layer ?; Ctrl + ;

Mask with shape ??M Ctrl + Shift + M

Make repeat grid ?R Ctrl + R

Directly select a layer in a group/symbol ?Click layer in canvas Ctrl + click layer in canvas

Change layer opacity 1 to 9 (0 for 100%) 1 to 9 (or 0 for 100%)

Select artboard ?Click on blank part of artboard Ctrl + click on blank part of artboard

Draw shape from center ?Drag Alt + drag

Draw shape with 1:1 aspect ratio (perfects ?Drag Shift + drag
square/circle)

Keys for Align

Menu Keyboard shortcut on macOS Keyboard shortcut on Windows

Left ??? Ctrl + Shift + ?

Center (horizontally) ??C Shift + C

Right ??? Ctrl + Shift + ?

Top ??? Ctrl +Shift + ?

Middle (vertically) ??M Shift + M

Bottom ??? Ctrl + Shift + ?

Keys for Arrange

Menu Keyboard shortcut on macOS Keyboard shortcut on Windows

Bring to Front ??] Shift + Ctrl + ]

Bring Forward ?] Ctrl + ]

Send Backward ?[ Ctrl + [

Send to Back ??[ Shift + Ctrl + [

Keys for Distribute

Menu Keyboard shortcut on macOS Keyboard shortcut on Windows

Horizontal ??H Ctrl + Shift + H

Vertical ??V Ctrl + Shift + V

Keys for Text

Menu Keyboard shortcut on macOS Keyboard shortcut on Windows

Bold ?B Ctrl + B

Italic ?I Ctrl + I

Increase font size ??> Ctrl + Shift + >

PANGASINAN STATE UNIVERSITY 12

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in (HCI 101 – Human Computer Interaction) Module No. 5

Decrease font size ??< Ctrl + Shift + <

Keys for Operations menu

Menu Keyboard shortcut on macOS Keyboard shortcut on Windows

From Center ? Alt

Copy Paste Object ? Drag Alt + Drag

Constrain ? Shift

Edit Text Enter Enter

Constrain Rotate ? (15°) Shift (15°)

Line Constrain Rotate ? (45°) Shift (45°)

Constrain From Center ?? Shift + Alt

Direct Select ? Ctrl

Switch between Design and Prototype mode Ctrl + Tab Ctrl + Tab

Keys for Tools menu

Menu Keyboard shortcut on macOS Keyboard shortcut on Windows

Select V V

Rectangle R R

Ellipse E E

Line L L

Pen P P

Text T T

Artboard A A

Zoom Enter zoom mode: Z Enter zoom mode: Z

Zoom to Selection ?3 Ctrl + 3

Eyedropper I I

Keys for Interface and Viewing Options

Menu Keyboard shortcut on macOS Keyboard shortcut on Windows

Zoom In • ?+, • Ctrl + +

• Option-Scrollwheel,
• Option-swipe (Magic Mouse)
• Pinch out (trackpad)
Zoom Out • ?-,
• Option-Scrollwheel,
• Option-swipe (Magic Mouse)
• Pinch in (trackpad)
Zoom to Fit ?0
• Ctrl-Scrollwheel
• Pinch out (trackpad)
• Ctrl + -
• Ctrl-Scrollwheel
• Pinch in (trackpad)
Ctrl + 0

PANGASINAN STATE UNIVERSITY 13

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in (HCI 101 – Human Computer Interaction) Module No. 5

100% ?1 Ctrl + 1

200% ?2 Ctrl + 2

Pan Spacebar Spacebar

Assets ??Y Ctrl + Shift + Y

Layers ?Y Ctrl + Y

Show Layout Grid ??' Shift + Ctrl + '

Show Square Grid ?' Ctrl + '

Fullscreen Mode ^?F Not available

Switch between design and prototype mode ^Tab Ctrl + Tab

Switch between Windows (Files) ?-Tilde (~) Not available

Increase or decrease a value in a field by 1 ? or ? ? or ?

Increase or Decrease a value in a field by 10 Hold ? and hit ? or ? Hold Shift and hit ? or ?

Keys for Window menu

Menu Keyboard Shortcut on macOS Keyboard shortcut on Windows

Maximize WIN ?

Minimize ?M WIN ?

Preview ?? Ctrl + Enter

Keys for Window menu

Menu Keyboard Shortcut on macOS Keyboard shortcut on Windows

Maximize WIN ?

Minimize ?M WIN ?

Preview ?? Ctrl + Enter

Keys for operation modifiers

Menu Keyboard Shortcut on macOS Keyboard shortcut on Windows

Horizontal Pan Shift + Scrollwheel Shift + Scrollwheel

Vertical Pan Scrollwheel Scrollwheel

Keys for Selection and measuring distances between elements

Menu Keyboard Shortcut on macOS Keyboard shortcut on Windows

Enable measurements Option (with an object selected) Alt (with an object selected)

Distance from Selected Layer Hold ? and Hover over object/group/artboard Hold Alt and Hover over
object/group/artboard

Distance relative to Selected Group Hold ?? and Hover over an object in the group Hold Ctrl + Alt and Hover over an object in the
Group

Keys for Design Specs

PANGASINAN STATE UNIVERSITY 14

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in (HCI 101 – Human Computer Interaction) Module No. 5

Menu Keyboard Shortcut on macOS Keyboard shortcut on Windows

Zoom ? + Mousewheel Ctrl + Mousewheel

?+, ?- Ctrl +, Ctrl -

Reset zoom ?0 Ctrl + 0

Pan ?, ?, ?, ? ?, ?, ?, ?

Spacebar + Click-and-drag Spacebar + Click-and-drag

Faster pan Shift + ?, ?, ?, ? Shift + ?, ?, ?, ?

Go from Spec view to UX flow view Esc Esc

Remove focus from artboard in UX flow view Esc Esc

Navigate across artboards for overlay support Shift + Click Shift + Click

Keys for Vector Editing

Menu Keyboard Shortcuts on MacOS Keyboard Shortcuts on Win

Start Editing Selected Vector Object Return Enter

Stop Editing Selected Vector Object Esc Esc

Switch Between Straight and Mirrored Control Double-Click Double-Click

Points

Disconnect Control Point Handle ?Drag Alt + drag

Keys for Prototyping

Menu Keyboard Shortcuts on MacOS Keyboard Shortcuts on Win

See all connections in prototype mode ?A Ctrl + A

Preview ?Return Ctrl + Enter

Start or stop recording the preview ^?R Not available

Stop recording Esc Not available

Share prototype online ??E Ctrl + Shift + E

Navigate artboards in preview or shared Right or Left Arrow ? or ?

Prototype

LEARNING CONTENTS (Create Interactive Prototypes)

Set the Home screen

The Home screen is the first screen of your app or website. Your users begin to navigate the app or
the website from the Home screen.
Also, when you preview your prototype and nothing is selected, the preview begins with the Home
screen. That is, by default, your Home screen is set to the first artboard you add a wire to.
1. Switch to Prototype mode.
2. Click the artboard that you want to set as the Home screen. A gray home icon appears in the
upper left corner.
3. Click the Home icon. It turns into blue indicating that the artboard or screen is now successfully

PANGASINAN STATE UNIVERSITY 15

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in (HCI 101 – Human Computer Interaction) Module No. 5

set as the Homescreen.

Figure 12. Set a Home screen option Figure 13. Home Screen Set
To set a different artboard as the Home screen, simply click the Home icon associated with that
artboard.
Link interactive elements to target screens
Before you begin to link artboards or screens, name the artboards appropriately. Doing so helps you
identify the screen to which you want to link a given screen.
1. Switch to Prototype mode.
2. Click the object that you want to link.
A connecting handle with an arrow appears on the object. When you hover your mouse over the
handle, the cursor changes to a connector.

Figure 14. Linking interactive elements to target screen

PANGASINAN STATE UNIVERSITY 16

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in (HCI 101 – Human Computer Interaction) Module No. 5

3. Click and start dragging your mouse to see the connector. Release your mouse on the target
artboard or screen.
When you wire up the first element, the artboard of that element is set as the home artboard.
4. In the pop-up window that appears, you can specify the following:
• Transition options and the duration for the transition: If you want to maintain scroll position when
you transition to another artboard, select Preserve Scroll Position. This option is useful for when you
are prototyping navigation bars or fixed footers. If the user scrolls in the original artboard, the next
artboard recognizes the scroll position from the original artboard. When you click an artboard or any
element in the artboard, you can control the scroll position to keep the original place from one
screen to the next. The control prevents repeated scrolling back and forth in the project file. For
example, if a user scrolls down to y=1000 on artboard A, the transition to artboard B defaults to
y=1000. If the original artboard has no scrolling defined, the Preserve Scroll Position option is
inactive.
• Overlay: If you want to simulate the states or transitions such as menu dropdowns and sliding
keyboards, select Overlay.
Press Esc or click outside the pop-up to dismiss it.

Figure 15. Working with Overlays

5. Repeat the steps above to link all the interactive elements in your project.
In Prototype mode, to make the process of creating interactions faster:
• You can copy and paste objects across artboards. The object is copied and pasted along with its

PANGASINAN STATE UNIVERSITY 17

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in (HCI 101 – Human Computer Interaction) Module No. 5

interaction.
• You can also copy and paste an interaction alone. Copy an object, right-click another object, and
then select Paste
Interaction. Only the interaction is pasted.
• To point the element to a different screen, click the handle again and drag it to the required
screen.
• To view the connections to or from a particular artboard, select the artboard title.
• To delete an interaction, drag the connector's destination handle off a target artboard on to the
draft area.

Figure 16. Interactive elements linked to target screens

A Home screen B Linked artboards C Outgoing connection D Incoming connection

Use timed transitions

Timed transition in Adobe XD enables you to create rich prototype experiences such as
onboarding flows, automatic redirection to a different screen, or progress bars. Just like you
Tap to trigger transitions, you can use Delay to specify the transition duration. For example, when
you create onboarding workflows, you can use the Delay option to link and transition between
artboards.
As a designer, you can also use time to trigger transition to another artboard. For example, if you
are designing onboarding flows, you can use timed transition to get start with a splash screen of an
app flow and automatically transition between a few onboarding screens.

PANGASINAN STATE UNIVERSITY 18

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in (HCI 101 – Human Computer Interaction) Module No. 5

Create a timed transition for onboarding workflows

Figure 17. Timed Transition

1. In XD, switch to Prototype mode.
2. To view the connector, select the artboard and use the mouse hover on the handle.
3. Click drag-and-drop the connector from the source artboard to the destination artboard. When
you wire up the first element, the artboard of that element is set as the home artboard.
4. In the Trigger pop-up window, set the following options:
• Trigger: set it to Time.
• Time delay: set the transition delay period in Seconds.
• Duration: set the transition duration in Seconds.
• Action: set it to Transition.

PANGASINAN STATE UNIVERSITY 19

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in (HCI 101 – Human Computer Interaction) Module No. 5

Figure 18. Set Trigger, Delay, Duration, and Action

A Set Trigger to Time B Set Delay in Seconds C Set Action to Transition D Set Duration to
Seconds
5. Select the Desktop Preview icon to preview the changes.
Link to previous artboard
1. In the Prototype mode, select the element you want to link. When a small arrow appears, click the
arrow, and it
automatically sets the action as previous artboard. You can also link the element to an artboard,
and select Action > Previous Artboard.

PANGASINAN STATE UNIVERSITY 20

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in (HCI 101 – Human Computer Interaction) Module No. 5

Figure 19. Select previous artboard

2. When the Action is set to Previous Artboard, the icon changes.
3. Use the preview window to preview the linking.
Unlink artboards
1. In Prototype mode, select Target > None.
2. Preview the linking in a browser.
Any target link previously set from the element is removed.
You can also drag the wire from the artboard to the draft area (the gray space between the

artboards).
Figure 20. Unlink Artboards
Preview and record interactions
Note:
Recording prototypes is not supported in Adobe XD on Windows. However, there's a workaround.
Press the Windows + G keys and use the native recorder to record the Preview window.
To test your prototype and the interactions, you can preview the prototype. You can also record the
preview and save the recording as a .mp4 file. You can then choose to share the .mp4 file with your
stakeholders, who can view (or review) the walkthrough of the prototype and provide feedback.
1. Click the Desktop Preview icon. The Preview window appears and displays the artboard in focus.
To test the navigation between screens, click the interactive elements.
You can edit the design and interactions in your prototype while previewing in the preview window.
The changes are instantaneously available for preview.

PANGASINAN STATE UNIVERSITY 21

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in (HCI 101 – Human Computer Interaction) Module No. 5

2. To record the interaction, click Record icon in the preview window. To end the , press Esc or
click the Record icon again.
3. Specify a name and location where you want to save the recording. The recording is saved as
a .mp4 file.

Figure 21. Record prototype interactions

LEARNING CONTENTS (Share Designs and Prototypes.)

The Share mode in XD consolidates different sharing capabilities into a centralized location and
makes sharing your designs and collaborating with stakeholders and designers a breeze!
You can use the built-in presets, such as Design Review, Development, Presentation, User
Testing, and Custom to share your documents and manage your shared links.
Prepare to share your designs
You can share your design specs or prototypes having single or multiple flows with your
stakeholders. Read on to learn how to work with presets and create shareable links to share single
or multiple flows.
Work with presets
XD provides scenario-based presets to create shareable links for your designs with ease. For
example, when creating a design link for review, all you have to do is select the available preset
based on your requirement, set link access permission, and share it with your stakeholders. You no
longer have to worry about setting commenting options or navigation controls.

PANGASINAN STATE UNIVERSITY 22

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in (HCI 101 – Human Computer Interaction) Module No. 5

Read on to learn how you can set link access permission, update, and manage design or prototype
review links using these built-in presets.

Figure 22. Built-in Presets

How do I create links for sharing a design spec or a prototype?
Once artboards and interaction flows are defined in the Prototype mode, your design spec or
prototype is ready to share. The title of your defined interaction flow appears in the Title pane. You
can modify the title based on your design need.
In the View Setting drop-down, select any of the presets and set link access permissions to share
your design specs or prototypes. Click Create Link. The URL appears in Link Settings pane.

Set link access permissions

You can set link access permissions for shareable design specs and prototypes with the help of
public, private, or password links.
While sharing a prototype or a design spec, you can choose to publish either a public link, or a
secure private link and still change its access setting interchangeably at any given point.

PANGASINAN STATE UNIVERSITY 23

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in (HCI 101 – Human Computer Interaction) Module No. 5

Figure 23. Set link access permission

When you change the link access setting from public to private or from private to public:
The link URL remains the same.
Invitees added on the link are preserved.
After password links are published, you cannot change the link access setting. If you want to
change the access settings, you must create a new link.
Share single interaction flow as a shareable link
You can define, share, and publish single interaction flow as a shareable link with your
stakeholders. Single flows are mostly used when sharing designs specs or prototypes having
end-end workflows on a single target surface.
Before you share a single flow, keep these pointers in mind:

Figure 24. Share single interaction flow as a shareable link

A. Set the Home page (Home artboard) B. Grayed out artboards (not wired)

PANGASINAN STATE UNIVERSITY 24

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in (HCI 101 – Human Computer Interaction) Module No. 5

1. Set the Home artboards for your design. Define the starting point of navigation to other
artboards.
2. Arrange artboards in the correct sequence:
3. Wire the artboards as you would like them to be published in the navigation sequence.
4. Confirm if the wired artboards are visually highlighted on the design canvas. Artboards that are
wired and not connected to the Home artboard will be grayed out in Share mode.
5. For artboards that aren’t wired, the navigation sequence defaults from left to right or top to
bottom. If you want to change the navigation sequence, go back to Prototype mode and wire
them again.
When sharing a single flow, you can:
 Share a single artboard: select the artboard in the Prototype mode and set it as the Home
artboard. Ensure to remove any interactions to other artboards.

 Share all artboards irrespective of wired connections: click the Home icon ( ) in Prototype
mode to disable an existing Home artboard.

Share multiple interaction flows as shareable links

You can define, share, and publish multiple interaction flows having of 2 or more artboards wired
together as shareable links across various target surfaces. For example: A marketing brochure
designed in one design screen can be viewed across target surfaces such as mobile, desktop,
tablet, Apple watch, and Alexa show.
Multiple flows are most commonly used when designing interfaces such as login screens,
registration screens, playlists, and so on.
Before you share multiple flows, keep these pointers in mind:
1. For each interaction flow, set the Home artboard to define the starting point of your design.
2. Enter a flow name in Prototype mode.
3. If your design consists of multiple flows, set Home artboards for each of those flows.
4. Wire the artboards in the correct navigation sequence.
5. Select any of the defined flows in Share mode and publish them as shareable links to gather
instant feedback.
I have modified my design project or flows; should I create a new link?
No, you don't have to create a new link for an XD document. As you change your design or your
preset, you can update an existing link that you have shared for review.
Example 1 - If you have created single or multiple flows within your prototypes and shared them for
review, all the created links appear in the URL picker. You can now pick and choose any link to
update by clicking Update Link.

PANGASINAN STATE UNIVERSITY 25

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in (HCI 101 – Human Computer Interaction) Module No. 5

Figure 25. Example 1 Figure 26. Example 2

Example 2 —If you have created a prototype link and shared it for feedback, and now want to share
the prototype with your developer, navigate to View Setting, switch to Development, and
click Update Link. 
Once you update the link, the same URL is updated with the latest preset information while
preserving previous comments, changes, and conversations.
How do I view previously generated links and delete them?
You can manage published links of your XD document by navigating to Manage Links website from
XD.

Figure 27. Manage Links and delete

PANGASINAN STATE UNIVERSITY 26

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in (HCI 101 – Human Computer Interaction) Module No. 5

End-to-end experience of share workflows

As a designer, you can share your designs or prototypes using any of the available sample presets
and set permissions to reshare them further. Reviewers can add, remove, or accept requests from
other set of reviewers who want to access or view the secure private link.
Watch this sample animation to learn how to share your designs for review and help reviewers
reshare the designs or prototypes further.
As a reviewer, you can access the review invite from the Creative Cloud application or email and
comment on shared designs or prototypes. Watch this animation to learn how to access the review
invite and comment on the shared design.

LEARNING ACTIVITY 3

Create an interactive prototype of the following:

a. Ecommerce (Web)
b. Food App (Mobile)
Create an Interactive Prototype for your Proposed Application

SUMMARY

 Adobe XD is a complete end-to-end solution for designing user experiences for mobile
apps, websites, and more. You can design, prototype, preview, and share using the same
tool.
 The Property Inspector is the docked panel on the right side of the workspace.
 When working on your project in Adobe XD, there are two modes you will be using: Design
and Prototype. When you select a mode, certain features and tools specific to that mode
become available in the application window. Each mode represents a stage in the design
process.
 The Home screen is the first screen of your app or website. Your users begin to navigate
the app or the website from the Home screen.
 Timed transition in Adobe XD enables you to create rich prototype experiences such as
onboarding flows, automatic redirection to a different screen, or progress bars. Just like you
Tap to trigger transitions, you can use Delay to specify the transition duration.
 Recording prototypes is not supported in Adobe XD on Windows. However, there's a
workaround. Press the Windows + G keys and use the native recorder to record the Preview
window.
 The Share mode in XD consolidates different sharing capabilities into a centralized location
and makes sharing your designs and collaborating with stakeholders and designers a
breeze!

PANGASINAN STATE UNIVERSITY 27

 FM-AA-CIA-15 Rev. 0 10-July-2020

Study Guide in (HCI 101 – Human Computer Interaction) Module No. 5

 You can use the built-in presets, such as Design Review, Development, Presentation, User
Testing, and Custom to share your documents and manage your shared links.
 You can share your design specs or prototypes having single or multiple flows with your
stakeholders.
 XD provides scenario-based presets to create shareable links for your designs with ease.

REFERENCES

Woord, Brian (2019). Adobe XD CC Classroom in a Book.

E-SOURCES:
https://www.adobe.com/products/xd.html?promoid=PYPVQ3HN&mv=other

https://helpx.adobe.com/xd/help/create-prototypes.html

https://helpx.adobe.com/ca/xd/help/share-designs-prototypes.html

PANGASINAN STATE UNIVERSITY 28