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?
Lessons
Introduction to Adobe XD
1. Welcome to the Course!
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.
The Basics of Working With Adobe XD
2. Creating and Managing Artboards
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
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.
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
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
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
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.
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.
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.
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.
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.
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?
.jpg)
.jpg)
