Advertisement
  1. Web Design
  2. Tutorials

15+ Free Adobe XD Tutorials and Courses

by
Read Time:6 minsLanguages:

Are you just getting started with Adobe XD, or looking for some tips and tricks to improve your skills? This collection of Adobe XD tutorials and free courses will show you how to use Adobe XD and how to make it your tool of choice for creating amazing UI designs.

Getting Started With Adobe XD

1. What is Adobe XD?

Let’s start from the very beginning: what exactly is Adobe XD? Who is it for, and where does it fit in the range of Adobe products?

2. Adobe XD for Beginners

In this free Adobe XD course, instructor Adi Purdila will teach you how to use Adobe XD and all the essential features and techniques that someone should know. If you're just getting started with Adobe XD this should be your first stop.

Popular Adobe XD Tutorials

3. How to Create a Finance App UI Design in Adobe XD Tutorial

Once you finish the Adobe XD for beginners course, this might be a fun and creative way to learn Adobe XD tools.

In this tutorial you will learn how to create a finance app design, and (more importantly) how to easily animate parts of its UI. You will learn how to use Adobe XD's grid, how to save components, how to create a repeat grid and how to create interactive prototypes.

Adobe XD TutorialAdobe XD TutorialAdobe XD Tutorial

4. How to Create a Music Player App UI Design in Adobe XD Tutorial

Learn Adobe XD and test some of its features as you build this simple music player UI design. You will learn how to create your own mockup, how to create icons and set up a simple grid, how to save components, and how to create a repeat grid.

Adobe XD TutorialAdobe XD TutorialAdobe XD Tutorial

5. How to Create a Hotel Booking UI Design in Adobe XD Tutorial

Continue with this fun tutorial which will show you how to create a hotel booking app design. Being Adobe XD we’ll be able to build much more than just a static design; we’ll be building an interactive, animated prototype. To begin with we’ll walk through some common components of any hotel booking UI design.

Adobe XD TutorialAdobe XD TutorialAdobe XD Tutorial

6. How to Create a Resume CV Website Template in Adobe XD

Another fun way that you can use to learn Adobe XD is by using a resume website template. In this Adobe XD tutorial you’ll learn:

  • how to easily animate elements
  • how to mask and group objects
  • how to animate horizontal and vertical scrolling
  • how to save components
  • how to create hover animations
  • how to create interactive prototypes

If you're just getting started with Adobe XD, this tutorial will help you learn how to use Adobe XD and most of its features.

Adobe XD TutorialAdobe XD TutorialAdobe XD Tutorial

Popular Adobe XD Video Tutorials

This next section features a collection of Adobe XD video tutorials from the Envato Tuts+ YouTube channel, where you’ll find tutorials and free courses on all kinds of creative subjects.

7. How to Use 3D Transforms in Adobe XD

In this tutorial you’ll learn how to use 3D transforms in Adobe XD, a feature introduced at Adobe MAX in October 2020. 3D Transforms work harmoniously with auto-animate which opens the door for even more dynamic designs.

8. Better Design Systems With Adobe XD for Visual Studio Code

In this short Adobe XD tutorial, you will learn how to create Design System Packages (or DSPs) with Adobe XD and a new extension for Visual Studio Code.

9. How to Use Responsive Resize and Constraints in Adobe XD

In this Adobe XD screencast you can explore the responsive resize and constraints feature. These features allow real scaling of designs within Adobe XD, giving you genuinely responsive web design capabilities.

Popular Adobe XD Courses

10. Adobe XD Free Course: 15 Time-Saving Shortcuts for Adobe XD

Once you’ve become used to Adobe XD, you'll learn that keyboard shortcuts can considerably increase your work speed. This free Adobe XD course will show you 15 keyboard shortcuts to help you save time and be more efficient.

11. Adobe XD Free Course: Responsive Design

Want to learn how to use Adobe XD to make your design look good on any device? In this course, instructor Kezz Bracey will show you how to best use XD’s features to efficiently create responsive design mock-ups.

12. Adobe XD Free Course: Code-Friendly Design

Creating a great web design is one thing, but if you don't hand it off to a developer in the right way, it may not translate into code the way you expect it to. Fortunately, with a program like Adobe XD, you can make your web design work easy for developers to code. You can learn the full process in this free Adobe XD course.

Adobe XD CodeAdobe XD CodeAdobe XD Code

13. Adobe XD Free Course: Icon Design

How about learning to design useful icons whilst learning how to use Adobe XD? In this short and free Adobe XD course, instructor Daniel White will show you the whole design process from start to finish, working through eight commonly used icons such as search, phone, pencil, cloud, and more.

Adobe XD IconAdobe XD IconAdobe XD Icon

14. Adobe XD Free Course : Adobe XD Auto-Animate

Auto-animate is a simple yet powerful feature in Adobe XD, which allows us to link together artboards in our prototype with beautiful, authentic animation. Learn how to use it in our short and free Adobe XD course.

Adobe XD vs Sketch vs Figma

Finally, you can learn about some of the alternatives that you have to Adobe XD. In such a volatile field it's important to stay informed and learn about apps that might work better for you.

15. Sketch vs. Adobe XD

In this short video, instructor Adi Purdila tries to answer a question that many designers ask: “Which is better, Sketch or Adobe XD?”.

16. Figma vs. Adobe XD

With the race between the Figma and Adobe XD getting much tighter, this tutorial goes through a deep and comprehensive comparison between these two applications.

Adobe XD FigmaAdobe XD FigmaAdobe XD Figma

Tutorials in the Wild

Learn from the rest of the XD community and Adobe Evangelists with these free tutorials:

Learn and Create With Envato

That concludes our list of free Adobe XD learning resources! Next, check out these collections of UI/UX Kits, compatible with Adobe XD, and all available with a single subscription to Envato Elements.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.