Adobe XD Advanced: Components

Name: Adobe XD Advanced: Components
Author: Jessica Henley

Create components that are custom, nested, responsive, and plugin ready

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

Course: On-Demand

Hello, my name is Jessica Henley, and in these lessons, you will learn plug-in components, custom component designs, nested components, and responsive components. Getting started with plug-in components. I'm going to head over to the lower left-hand side and take a look at some options. We have libraries, ship, command, or control. Why? And we also have the layers, which is command or control. Why? But today, we will be focusing on the actual plug-in, which is ship command P or ship control P as shortcut. So now that we have the actual plugins, you can see my plugins that are available and that I have already pre-installed. Today, however, we're going to take a look at ready mobile components for Adobe XD. I'm going to show you which file type you actually need to open for actually getting the plug-in. So again, we have ready mobile components, but we're going to look at file and go to new or you can press command, control in or click the home button, like so. So you might already have the iPhone 14 Pro Max, but for this particular lesson, you want to actually scroll down to Pixel 7 Pro, so Google Pixel 7 or a 6 Pro for Google Pixel. So here we can see that new screen that new has been launched. Now I'm going to go to plugins and hit browse plugins. So under browse, we can see that a new window is actually launched, which is great. And we have Adobe XD, but under search all plugins, you want to type components. So here we can see we have ready mobile components, which I have installed already on my device. But the other options are export as web components. And they have other options as well to pick from, such as free act, native components as well. But heading back, I already have this installed, but clicking on it, you can see that it says installed. You will see git and you want to press git. Once it's installed, you will see installed like mine. So I'm going to close this out, and it looks like the web 1920 is on. So let me reselect the correct artboard size because that plugin will not work if the wrong size is in there. So going back to home and navigating to Google Pixel 7. I'm going to close the old artboard in the background. And here that we have the right artboard, we're going to take a look at the plugin. And you can see it's the right artboard at the top because of the name. So here we have ready mobile components. And I'm going to click on ready components. Here it gives more information at the top. And it says select an artboard. In this case, we only have one. So we'll click on this one. And they have a lot of cool examples like the accordion. And as I click on it, it says component added successfully. But I also want to explore this button. So I'll take a look at that. And that has been added successfully and close. You can see the button. I'm just going to pull this down, pull the accordion down as well. And so you can see how this can save you a lot of time. Going back to the plugin, I'm going to show you a little bit more. I'm going to click on bottom nav bar. But look, it says select an artboard. We have a red error message. So select an artboard needs to be activated in order for this to work. So now bottom nav bar has been successfully added. I'm going to close it. So now as I pull, oops, it looks like there's two of them. So I only need one of these. So what I can actually do is just delete one of these by right clicking and press delete. Or you can just simply press delete on your keyboard. You can also add different colors and different states to these buttons on the bottom. But we're not going to do that today. What I want to take a look at is customizing this a little bit further. So for example, the button. I want to make this a component by right clicking over it and click on make component or press command or control K. Again, as a friendly reminder, you can also go to object and hit make component. We can see that the master component has been added to this button because it has the grain diamond in the corner. And why make a component? Well, we're going to have several buttons. We just want to design one button and have all of them fall in line with the color scheme. So that's all we did that heading over to layers. We can see that the button has been added as a component, but I'm just going to rename it so it's easier to find. So I'll name this button one great. Now that I have my button, I'm just going to control or command D to make an instance duplicate of that one. And again, clicking on the first component, which is the master component. That's how I know because you can see the other one doesn't have a grain diamond. So this one has a grain diamond. So this is the leader. That's the follower or the parent or the child. And I'm just going to click and just go ahead and break color this. And as you can see, both of them are now the same color, which is great. So you can see how you can use this to your advantage and actually customize the other plugins to your actual designs for your brand or whatever else that you're working on. And then next lesson, I will show you how to create custom component designs. Thanks for watching.

Advanced Provider : Jessica Henley 4 Lessons · 26m in English

Course Description

In these lessons, you will learn how to make your workflow easier, more organized, and more concise. We will look at plugins, customization for components, and nested and responsive components. Through plugins, we will take a look at a recommended solution for creating accordion tabs and navigation bars when using a plugin. As a designer, this will make your workflow faster.

These lessons also discuss how to create customized components for when you can't find plugins for your desired needs. By taking advantage of some of the tools you will learn in Adobe XD, you can create brand materials for your artboards. We will also take a look at the benefits of creating nested components and grouping different elements together. Finally, we’ll discuss why it’s important to make your components responsive, which is a must-have for people who use different types of devices of various size specs.

What You'll Learn

Incorporate components into your Adobe XD workflow to make it faster and more organized
Access and use plugins, including recommended solutions for creating accordion tabs and navigation bars
Design customized components for cases when no plugin meets your needs
Create nested components and group different elements together
Build responsive components for devices of various size specifications
Use Adobe XD tools to create brand materials for your artboards

Key Takeaways

Components can make your design workflow easier, more organized, and more concise.
Plugins offer a recommended solution for creating accordion tabs and navigation bars, speeding up a designer's workflow.
Custom components let you build for needs when a suitable plugin cannot be found.
Nested components allow you to group different elements together for added benefit.
Making components responsive is a must-have for people who use different types of devices of various size specs.

Frequently Asked Questions

What does this Adobe XD Advanced course cover?

It covers plugins, customization for components, and nested and responsive components, including using plugins for accordion tabs and navigation bars, designing custom components, and creating brand materials for your artboards.

Who is this course for?

It is designed for designers who want to make their Adobe XD workflow faster, more organized, and more concise, including people who design for different types of devices of various size specs.

What lessons are included?

The course includes four lessons: Plugin Components, Custom Component Design, Nested Components, and Responsive Components.

What skills will I gain?

You will gain skills in Component Libraries, Custom Components, and Material Components.

Why does the course emphasize responsive components?

Because making your components responsive is a must-have for people who use different types of devices of various size specs.