1. Web Design
  2. UX/UI
  3. UI Design

Adobe XD for Beginners (Free Course)

Scroll to top
Read Time: 8 min
Duration: 2 hours 27 mins | Lessons: 15

Welcome to this beginner’s introduction to Adobe XD. We’ll cram so much into the next two and half hours you won’t believe this course is free! 

We’ll fly straight out the gate with relevant, helpful information, so you don’t have to worry: there’s no filler here. Every minute counts, so why not jump right in?

Introduction to Adobe XD

1. Welcome to the Course!

Watch video lesson [0:00] ↗

Let me give you a quick introduction to what you can expect to learn throughout this course. For the uninitiated, Adobe XD is a super popular app for UI and UX design that allows you to create websites, mobile apps, icons, and more -- effortlessly. 

Adobe XD is powerful and comes with lots of features and tools, so I’ll take you through each of them step-by-step with an overarching structure that consists of three chapters: 

  • The basics of how to work with Adobe XD, from artboards to shapes. 
  • Advanced features of XD including components, layouts, and plugins 
  • Prototyping features, including auto-animate.
image from the adobe xd home pageimage from the adobe xd home pageimage from the adobe xd home page
Hero from Adobe XD’s homepage

The Basics of Working With Adobe XD

2. Creating and Managing Artboards

Watch video lesson [1:20] ↗

In this all-important first lesson, you’ll learn all about how to use artboards. But I actually start the lesson by discussing how to get access to Adobe XD, as well as a thorough tour of the app’s interface. 

3. Working With Lines and Shapes

Watch video lesson [14:08] ↗

Once you’ve gotten familiar with artboards, you can start making use of the line and shape tools within Adobe XD. They’re basic, but super-important.

To get started with lines, you need to click and drag with the line tool selected. It’s truly that simple. You’ll also learn how to adjust how lines appear, including angles, sizes, borders, and colors. You can even adjust the ends of lines, shadows, and more. 

Adobe XD linesAdobe XD linesAdobe XD lines

Similarly, you can create all sorts of shapes, give them rounded corners, adjust their border colors, fill colors and gradients, shadows, and many more attributes. 

We’ll also discuss the variety of ways to adjust the dimensions of shapes. 

4. Working With Text Elements

Watch video lesson [36:28] ↗

Text elements are the focus of this lesson, with a discussion of how to add text elements in straightforward fashion. We also delve into the options that are available to you in the inspector for working with text once it’s been inserted into an artboard.

You also have control over line and character spacing, text boxes, and more. 

5. Importing and Editing Images

Watch video lesson [43:20] ↗

Next up is an in-depth review of how to work with images within Adobe XD. You’ll learn all about how to import images, make edits, scale images, add masks, and more. You have control over images in a similar way you do as shapes, including adjusting dimensions, adding rounded corners, and so forth.

This lesson also covers how to work with vectors from CC libraries. 

The Advanced Functionality of Adobe XD

6. Combining Shapes

Watch video lesson [57:33] ↗

With some of the basics under your belt, you can move onto the more advanced features of Adobe XD. This is where the app really shines! Here, you’ll learn how to combine two or more shapes in Adobe XD. This is super useful for when you want to create a more complex shape than the standard options on offer. 

Boolean operationsBoolean operationsBoolean operations

These more complicated shapes are made possible thanks to boolean operations. Boolean options are made available to you in the inspector whenever you select two or more shapes on the artboard. The four operations available to you include: 

  • Add 
  • Subtract 
  • Intersect 
  • Exclude

7. Aligning Objects

Watch video lesson [01:05:43] ↗

Adobe XD has some super smart guides that are always available to help you align things on the canvas, however it comes with a few other on-demand tools you can pull up whenever you need more control. 

These tools allow you to take control over how objects align with one another with just a few clicks. 

8. Working With Assets

Watch video lesson [01:12:52] ↗

Assets are reusable bits of your project that you can save to use at a later time. These are broken down into three distinct categories:

  • Colors
  • Character styles
  • Components 

This is great for when you’re building an app or website and need to have consistent assets across multiple pages, screens, or sections. 

9. Working With Components

Watch video lesson [01:24:14] ↗

As you learned in the previous lesson, components are one type of asset available to you. A component is basically an object or group of objects you can reuse across your documents. 

Button as component in Adobe XDButton as component in Adobe XDButton as component in Adobe XD

In our example, we’ll discuss how to create and save a button as a component that can be used across multiple parts of your project. And when you make a change to this component, how it appears will change across every place it’s currently being sued. 

10. Working With the Repeat Grid

Watch video lesson [01:36:31] ↗

Next, we dive into the repeat grid and how you can put it to work. The repeat grid is unique to Adobe XD, is certainly one of my favorites, and is a feature that doesn’t appear in any other apps as of yet. 

This feature is fantastic for creating photo galleries or something similar. It allows you to create a pattern of objects within a given space and then adjust the spacing between each item all at once.

11. Adobe XD Responsive Design

Watch video lesson [01:44:22] ↗

Since one of the main uses of Adobe XD is to create website designs, it makes sense that responsive layouts are a much sought after feature. Within this app, you can create responsive web designs by using a feature called responsive resize. Traditionally, to achieve this responsive behavior you would need to manually set constraints to certain parent objects so that when that parent is resized, those objects are resized as well. 

XD does this automatically for you by analyzing selected objects—including how they’re grouped and positioned —and will apply these constraints for you. In this lesson, you’ll learn how to put this feature to work. 

12. Working With Adobe XD Plugins

Watch video lesson [01:56:46] ↗

Plugins serve as great add-ons for adding more features to XD that don’t come natively with the app. Here, we show you how to open the plugins page, how to install them, and how to use them to enhance your designs.

Adobe XD pluginsAdobe XD pluginsAdobe XD plugins

13. Exporting in Adobe XD

Watch video lesson [02:00:01] ↗

Once you’ve created your design, you likely want to export it to use elsewhere. Here, you’ll learn how to export assets and artboards from Adobe XD as well as how to export these items to third-party apps like Zeplin and Avocode.

Prototyping With Adobe XD

14. Creating and Sharing Prototypes in Adobe XD

Watch video lesson [02:11:17] ↗

Protoyping is what elevates products like XD above static design applications. So the focus of this lesson is on how to create and share prototypes in Adobe XD. This is a super powerful feature that allows you to visualize how users will experience your website or mobile app. 

Adobe XD prototypeAdobe XD prototypeAdobe XD prototype

15. Working With Adobe XD Auto-Animate

Watch video lesson [02:19:33] ↗

You’ve almost made it to the end! In the last lesson of this course, you’ll learn to how to use the auto-animate function in Adobe XD, which allows you to create immersive animations for your content between the project screens. 

auto animateauto animateauto animate

So when you are prototyping and switching from one screen to another, any element that’s present in both screens will be nicely animated. 

Further Your Education About Adobe XD

Feeling like you want to dive even further into the world of Adobe XD? We’ve got you covered. Why don’t you check out one of the many other tutorials or courses we’ve published on the subject? 

1.6 Hours

Advanced Adobe XD 

In this Adobe XD tutorial, we’ll focus on more advanced aspects of Adobe XD. We’ll begin by learning advanced prototyping techniques, complex layouts, next-level interactions, and awesome 3D transforms, taking you from beginner to Adobe XD pro. 

    Did you find this post useful?
    Want a weekly email summary?
    Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
    Looking for something to help kick start your next project?
    Envato Market has a range of items for sale to help get you started.