AS2106

UI/UX DESIGN WITH ADOBE XD

Adobe XD is one of the tools that the industry use for UI/UX design. This is an easy-to-use vector-based
experience design platform. You can use it for wireframing, prototyping, and design. It’s available both for
Mac and Windows; however, it has no web-based version, only a desktop version. One good feature of XD is,
you can preview your design in the Adobe XD app in mobile., you can download it for Apple and Android. It is
a paid app, but there is a 7-day free trial. It also includes collaboration features wherein you and your team
can work on a design simultaneously.
THE INTERFACE
This is the latest version of Adobe XD Interface.

The welcome screen. This is where you’ll set up your document.

Once you’ve set up your document, you will be routed to the work area so you can begin to design your
product.

02 Handout 3 *Property of STI

 [email protected] Page 1 of 4
 AS2106

THE TOOLS AND FUNCTIONS

Here are some basic tools and functions in Adobe XD to get familiarized with.

The Basic Workspace

Image from Adobe

Access File, Edit, Object, View, Window, and Help menus and the submenus within
A. Main Menu
them
Create and design the artboards that make up your project. You can choose to import
B. Design Mode
assets created using other tools or from the web or produce graphics in XD.
Link artboards together, create video demos of the design (currently only on macOS),
C. Prototype
prototype your design in a browser or a device, and share them with stakeholders for
Mode
review.
Create and share links for design reviews, development, presentations, and user
D. Share Mode
testing.
E. Preview on Connect multiple devices through USB to your desktop machine, set them up to
Device transfer data, and view them live.
Test your prototype within Adobe XD using the desktop preview or the Adobe XD
F. Preview
app on your iOS or Android device.
G. Zoom Increase or decrease the view size of your artboard

02 Handout 3 *Property of STI

 [email protected] Page 2 of 4
 AS2106

Define various properties of objects and manipulate them using different options in
the Property Inspector. For example, you can specify the backgrounds, fills, borders,
shadows, alignments, and dimensions of objects. You can also combine objects to make
entirely new objects.
H. Property
Inspector To layout repeating elements, use the Repeat Grid option in the Property Inspector.

Use the Fixed Position option to fix the position of multiple elements on the scroll. You
can also use math calculation to create designs with greater precision, move objects to
a new location, or modify their width and height.
This is where you will put your design objects or put the artboards. In short, this is
I. Pasteboards
where your work area will be.
It represents the screens that you are designing for your mobile app, website, or other
J. Artboards
products.
This is where you can find and install apps from third-party developers that will help
K. Plugins
you enhance your design workflows.
This is just similar to other Adobe products like Photoshop and Illustrator. This is where
you can see the hierarchy of the elements that you put in your canvas. You can also
L. Layers
organize it. Only the layers that are associated with the artboard that you’re working
on are highlighted.
This includes all the elements from character styles, colors, graphics to components
M. Libraries
shared across a team or between projects.
Access the selection tool, drawing tools, text tool, artboard tool, the Assets, and Layers
N. Toolbar
panel.

CREATING PROTOTYPES IN ADOBE XD

How to Do Prototyping in XD?

1. After you design your product, go to the Prototype Tab.

02 Handout 3 *Property of STI

 [email protected] Page 3 of 4
 AS2106

2. On your specific artboard, select the element that

you would like to connect to the other element.

3. Connect your selected element to the next page or

element where you would like it to be connected.

4. When you do the prototyping, the Interaction panel

will show up, and that is where you can put some
interactivity in your project, such as different
actions, animations, triggers, etc.

References

Cucukovic, A. (2021). Adobe Xd 2021 Basics - UI / UX Design Class. Lecture, Skill Share.

Rae, M. (2020). What is Adobe XD and What is it Used for?. Adobe.com. Retrieved 9 July 2021, from https://www.adobe.com/sea/products/xd/learn/get-started/what-is-
adobe-xd-used-for.html.

Adobe XD User Guide. Helpx.adobe.com. Retrieved 9 July 2021, from https://helpx.adobe.com/xd/user-guide.html/xd/help/workspace-basics.ug.html.

02 Handout 3 *Property of STI

 [email protected] Page 4 of 4