Adobe XD: Design Mode

Name: Adobe XD: Design Mode
Author: Alyssa Galganov

Learn to design using assets, character styles, and components with Adobe XD

Preview the first lesson free — get full access to all 6 lessons.

Course: On-Demand

Hello, my name is Alyssa, and in these lessons we're gonna go over working in Adobe XD's design mode, and in particular working with document assets. Document assets are reusable bits of your project. They are categorized in colors, character styles, components, and videos. We are currently in the layers mode of this particular document. Let's click on this icon here. And now we bring up the document assets panel. If there were any assets in colors, character styles, or components, they would be listed here. The only one that does currently have a component is videos. I have placed a daycare demo video in here for demonstration purposes. I'm gonna go ahead and click and drag it out, and I'm gonna just click over this red box here, and we'll place the video in here. You can't actually tell right now that it is a video. So let me just go ahead and press the desktop preview, and we can go ahead and click on it, and just to show you that there is actually a working video. I'm gonna close this up again for now and go back over to our document assets. Let's practice adding an item to assets. A common item you would wanna store here would be your company logo. For this fictitious daycare demonstration, let's go out and get the daycare name logo. I'm gonna go ahead and press Command + Shift +I. It would be Control + Shift + I for Windows. And we're gonna navigate out to our folder with our files in it and look for the file named Teddy Bear Logo. I'm gonna go ahead and press import, and it's gonna place it on here. Notice that it has a blue border going around it, but watch what happens when I go ahead over here and click on the plus sign next to components. It becomes green. What this means is, if you've ever worked with master files, any changes that I make to this logo, this particular one, will change wherever it's been used throughout the document. For now, I don't need this to be over here. I'm gonna go ahead and delete it, but just know that at any time also you can just drag the teddy bear over to use it. So that's the advantage to keeping things in document assets. When you are working on an XD project, chances are pretty good that you will wanna be consistent in your color usage. The colors have been chosen for this pretend daycare, and you can see them listed here in this line of circles. I'm gonna wanna use these colors throughout my project. So what I would like to do is keep them in the colors, add them to the colors in the document assets. And it's really easy to do that. Watch what I'm gonna do. I'm just gonna click with my select tool and drag across all these guys until they're selected, and I am just gonna click on the plus sign by colors. And there we have it. Even with the hexadecimal colors added, all the colors are currently in our document assets, and we'll be able to access them at any time. If you want, keep this document open and stay tuned for the next video where we will create some character styles. Thanks for watching.

Beginner Provider : Alyssa Galganov 6 Lessons · 35m in Arabic, German, English, Spanish, French, Portuguese, Chinese

Course Description

Adobe XD excels in letting you work efficiently. Within Adobe XD’s Design Mode, you will see how working with “Document Assets” can help simplify how you work. Learn about how this panel eases working with colors, character styles, components, and videos.

The “Document Assets” panel helps you stay organized using four major categories: colors, character styles, components, and videos. In this course, you’ll learn how to add colors to “Document Assets” that will add to the consistency of your design. Learn how to easily style headlines, subheads, and body text with established character styles. You’ll also learn how to create and use components in your designs, as well as how to work with stacks and layers. Finally, you’ll learn about responsive design in Adobe XD.

What You'll Learn

Describe the four categories in the Adobe XD "Document Assets" panel: colors, character styles, components, and videos
Add and import assets to the artboard
Create character styles for headings, subheads, and body text
Add objects and images from other Adobe software
Create and use components in your designs
Work with layers and stacks, and apply responsive design in Adobe XD

Key Takeaways

Adobe XD's Design Mode and its "Document Assets" panel help you work efficiently and stay organized using four major categories: colors, character styles, components, and videos.
Adding colors to "Document Assets" supports consistency across your design.
Established character styles let you easily style headlines, subheads, and body text.
Components can be created and reused within your designs, and you can work with stacks and layers.
Adobe XD supports responsive design.

Frequently Asked Questions

What does this Adobe XD course cover?

It covers working in Adobe XD's Design Mode, including the "Document Assets" panel and its four categories (colors, character styles, components, and videos), adding and importing assets to the artboard, creating character styles, creating and using components, working with layers and stacks, and responsive design.

What will I learn to do with the "Document Assets" panel?

You'll learn how the panel helps you stay organized across colors, character styles, components, and videos, including adding colors to support design consistency and styling headlines, subheads, and body text with established character styles.

Does the course teach how to use content from other Adobe software?

Yes. One of the learning objectives is to add objects and images from other Adobe software.

What topics do the lessons include?

The lessons are The Document Assets Panel, Character Styles, Creating Components, Working with Layers, Stacks, and Responsive Design.

What skill does this course focus on?

The course focuses on Adobe XD.