How to Design & Prototype in Adobe XD

Name: How to Design & Prototype in Adobe XD
Rating: 4.5 (7670 reviews)

Everything you need to know about Adobe XD to start designing & prototyping awesome apps.

Created byDaniel White

Last updated 1/2025

English

English [Auto],

What you'll learn

You will learn how to use the tools in Adobe XD.
You will learn how to design an app screen in Adobe XD.
You will learn how to design icons and other popular UI elements.

Course content

6 sections • 22 lectures • 1h 12m total length

Course Overview0:45
Welcome to the Learn Adobe XD training course. The images used throughout the lessons in this course can be downloaded in the attached zip folder.

Creating Artboards3:36
In this lesson, we're going to learn how to create artboards, and understand the Property Inspector.
Lines & Shapes4:18
In this lesson, we're going to learn how to draw lines, and shapes such as rectangles and circles.
Adding Text4:29
In this lesson, we're going to learn how to add and edit text.
Borders, Fills & Shadows4:31
In this lesson, we're going to learn how to add borders, fills and shadows to shapes.
The Pen Tool2:37
In this lesson, we're going to learn how to use the Pen Tool to draw and edit custom shapes.

Importing & Masking Images2:11
In this lesson, we're going to learn how to import and mask images.
Importing SVG Files2:16
In this lesson, we're going to learn how to import SVG (Scaleable Vector Graphic) files.
Combining Shapes2:39
In this lesson, we're going to learn about the different ways that we can combine shapes.
Aligning & Positioning Objects4:18
In this lesson, we're going to learn how to align and position objects.
The Repeat Grid Tool4:05
In this lesson, we're going to learn how to save time by using the Repeat Grid Tool.

Menu Icon3:05
In this lesson, we're going to learn how to draw a menu icon.
Location Icon2:07
In this lesson, we're going to learn how to draw a location icon.
Select Icon4:52
In this lesson, we're going to learn how to draw a select icon.
Search Icon2:57
In this lesson, we're going to learn how to draw a search icon.
Options Icon2:18
In this lesson, we're going to learn how to draw an options icon.
Navigation2:42
In this lesson, we're going to look at developing the navigation.
Tags5:16
In this lesson, we're going to learn how to design tags.

Requirements

You will require a copy of Adobe XD.

Description

In this Adobe XD (Adobe Experience Design) training course, you will become familiar with all of the tools you need to create awesome app designs. Throughout the course, we’ll be covering the different options available in Adobe XD, with each lesson contributing to us designing an app screen together, step-by-step.

Once you have completed the course, you will confidently be able to transform your own ideas into on-screen designs, and then bring these designs to life, by creating working prototypes that you can share online.

If you get stuck, or have any questions, please let me know and I’ll do my best to help. I look forward to seeing you in the course.

Who this course is for:

Web Designers, UI Designers, UX Designers.
Students interested in learning app design and prototyping.
Students already familiar with similar Adobe apps, and looking to transition into Adobe XD.

How to Design & Prototype in Adobe XD

What you'll learn

Explore related topics

Course content

Introduction1 lecture • 1min

Basic Tools5 lectures • 20min

Advanced Tools5 lectures • 15min

Designing Assets7 lectures • 23min

Prototyping3 lectures • 13min

What's Next?1 lecture • 1min

Requirements

Description

Who this course is for: