7 days of unlimited WordPress themes, plugins & graphics - for free! Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 15Length: 2.5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.4 Working With Components

In this lesson, you’ll learn how to work with components in Adobe XD. As we covered in the previous lesson, components make up part of the assets you can create in XD and are represented by objects or groups of objects you can reuse across artboards. So let’s see how to create and manage them.

Related Links

3.4 Working With Components

Welcome back to the course. In this lesson you'll learn how to work with components in Adobe XD. And as I was saying in the previous lesson, these are a part of the the assets we can use in XD. And a component is basically an object or a group of objects, you can reuse across your document. So, let's see how to create and manage these components. And I'm gonna give you a very simple example here, but one that I think would be applicable to everyone. And that is a button, right? Buttons are perfect for being transformed into components because you would use buttons in a lot of pages, or in a lot of places in our project. And they all have the same style, right? They can have different text but the overall style is the same. So, we're gonna start with a very simple rectangle, let's make this like 90 and 500. And let's round off the corners completely. Let's add a filter to it, maybe something like that. Or I can even copy this. Oops, excuse me. I can even copy this blue from XD here. All right, so I've created that. Let's add a bit of text inside. Now let's say, send message. For this, let's go with the white, for our font family we're gonna leave it like this, and maybe add 36. And maybe a semi bold 3% on character spacing, and I think we should be good to go. I'm just gonna position this in the middle. So now what I can do is select both of these elements and create a component. You can do that in a few different ways. You can right-click and select main components. You can use Ctrl or Command+K. You can do it here by clicking this button, or you can do it here in the inspector. So loads of ways to create a component. Now once you do that, that component is added to my asset list. And we now have the master. So, when we're talking about components, there are two versions of them. There's a master and there's an instance. So for example, if I were to copy this, and paste it. This is now an instance, okay? Another way you can differentiate between the two is that the master has this green rhombus full on the top left corner. The instance has a hallow rhombus. But also, it tells you right here that hey, this is an instance. So how are these two different? Well, if I make a change to my master, let's actually create another instance. If I make a change to my master, all the instances will be updated. But if I make a change to one of the instances, only that instance is affected, all right? Now if I go back to my master and I changed this again, only the instance that wasn't modified by me gets the update. The other one stays exactly as I set it. But with an instance I can always right click, and I can choose Reset to Master State. And now it's bound again to my master. So if I make the changes, that changes with it. And visual appearance is not the only thing that changes. So for example, I can change this text here. And all of my instances will be updated, but I can change the text here. And only this one will be updated. It's the exact same story. These changes that you make to instances are called component overrides, right? So you're basically overriding the original component. Now, to edit the original component, we can double click it, and this gonna enter the edit mode. Or you can click one of its instances and you can click this little button here which says Edit Master Component. And it's gonna go there. Or you can right click and choose the same thing, Edit Master Component from here, and it goes to the master. As I was saying, you can use these instances all over the place in your entire document. It doesn't matter how many art boards you have, you can use it everywhere. And you can also use it as a shared asset, just like I showed you in the previous lesson. If I now create a new file, and I link this Doc 1, I now have access to that asset. And any change that I make to this, will be reflected in the other document. So it works just like any other asset. Now the component overrides, don't just refer to the contents, right? You can also change the size of an instance, right? So I can select this, I can make it longer, shorter without actually affecting the actual master element. If I'm gonna reset this to the master state, and this as well, then any change I make to the size will be reflected here as well. You can have nested components. That means a component inside another component. And to demonstrate, I'm just gonna add a couple of images that I downloaded. You can find a link to the icon set in the lesson notes. So what I'm gonna do is select each one, create a component, okay? I'm actually gonna use the shortcut here, Ctrl+K. So now all of these are components. And let's say that I'm gonna edit this master component. And I'm gonna add an icon inside it. Let's make this bigger and let's place it like so. Now I can very easily swap this icon with another one simply by dragging and dropping in the new icon. So I'm gonna enter edit mode here, drag. And drop. And now I've changed this to a new icon. I can even replace entire components with different ones. So instead of this button, I wanna use the the album here, I can do that. Click drag, release and now I have another instance, okay, of this master component. And finally what I wanna show you regarding components is components states. This is a very, very handy feature. Let's say that we have this button. Let's make it a little bit shorter. And let's say that we have a fill color or something like that. This is the default state, okay? But I can add a hover state or a new state of my choosing. So a hover state, I can give it my own name if I want to. Allows me to make changes to it. Like let's say I wanna darker color when I hover on it. And then I can always switch between these. Very helpful in development when you have a button like this, and you're wondering, okay, how does this look when it's hovered on? Well, here's the default. And here's the hover, right? No need to create a copy of it for a different state. And you can even go ahead, and create as many states as you want. Let's do a pressed state where now I can make this black or something. So now I have a button with three states. This is the default. This is the hover, and this is pressed. And by the way, this works with any component. I can select, I don't know, this icon, it has a default state. But what if I want a light state where it doesn't have this black color? Let's make it blue, and instead of light state, let's do colored. And of course, I can always switch between the two. Very cool. And that's it for components. I think this is one of the most important tools you can use because it just saves you a bunch of time. And you can use it on so many different things. I give you an example here for a button, but you can make like a menu bar into a component. Basically, you can think about the elements or the object that you're repeating over and over. Let's say you have a website, you're designing a website in XD. And the menu bar repeats in every single page or the footer repeats in every single page. Well, you create components for these. And you add those instances or instances of those components to all of the pages that you want. And in the future, if you wanna make a change, you just change the master components. And all of those modifications will be applied to all of the instances. Therefore, saving you time, a lot of time. So yeah, components definitely a feature that's worth using. Now let's continue our exploration of Adobe XD's more advanced features. And in the next lesson, we'll cover something called the repeat grid. So I'll see you there.

Back to the top