From the course: Adobe XD for Designers

Adding component states - Adobe XD Tutorial

From the course: Adobe XD for Designers

Start my 1-month free trial Buy for my team

Adding component states

“

- Now components are great because they're reusable. In fact, I can right click and I can highlight on the canvas everywhere where this buttons being used, this back button, as you can see. Right, this is really effective, but there's more that you can do with these components. Absolutely love it. Let's go to this next button right here. We can, right click edit main component. Yeah, let's go to the first instance of it. And this is the main component. So any changes I make here, will actually affect this component everywhere. So if I decide to change the color to red, sure enough, I'll zoom out. You can see it changes it to red everywhere. Right? So be mindful of that. In this case. Yeah. I want this to be just black, but I want to add something else to this particular component. I want to add a new state right over here. This is the default state, right over here. We can hit plus, and we can add new states. I want to add a new hover state in this case. So on hover, it's going to do something magical. Right? So, what I want to do for the hover state is I want to double click, right? So now I'm inside of it. And I want to take this circle, because that's, what's currently selected, it's that black fill and I want to resize it. So I'm going to resize it by holding down the shift key to constrain the proportions. And then I'm going to hold down the option key or the alt key, if you're on a PC and I'm just going to make a larger circle, like, so, and I'm going to change the opacity down to, I dunno, 15, something like that. So that's going to be the hover state. But keep in mind, I need to switch it back to the default state. Cause it will stay on that state even when you play it. And you're like, oh wow, it's already on its hover state. So, click back on default state. There it is. Now we'll click preview and hover over it. Ooh, nice. I like that. And guess what? It will do that for all instances, as well as I click, this is another instance . I have that nice little hover state. Okay. So I want to do the same thing for the other one. I do want to be actually kind of like mindful of the size so we can go into the hover state and we can see this is about 213. I can be exact with this. I can make this an exact number. But about that size, I'm just going to remember that. And I'm going to do that for the back buttons. We go to the back button. We'll right click, we'll edit main component. There you are. We will add a hover states. There it is, for this hover state we'll double click. So we can select that a lovely black circle, same situation was about 2- 19 to 20. Something like that, kind of around there, scaling it up. I hold it on the shift and option key or alt key if you're on a PC and we'll drop this down to like 15. So that is done. Clicking off it. Clicking back on it and then selecting the default state. But I'm also showing you this because you can have graphics that have different options. So you can have primary menu, sub menu, tertiary menu, and you would have different states in here for that component. Or you can have an active and inactive, highlighted, like all sorts of different states for your different components. But for this case, that's all I needed to do. It's a component. So it changed it for everything. Sure enough, yeah. We'll rollover it, it works. So we can go through click click, and it just makes it look fancy, but it's so nice having that capability to have different states, for components. I feel like I'm just grazing in the surface. So really explore the power of components and what they can do.

Contents