By Dani Beaumont
We've just looked at using nested components to vary the look of repeated elements. In this final step we're going to switch to something quite different, and that's to look at how you can create states within a component.
Probably the easiest way to understand a component state is to take the example of a button. Notice here in Step 05 I have three artboards on the right and one of the artboard is called Button. If I click on it and then hit CMD on the Mac or CTRL on Windows and the number 3 I can magnify it so that I can see the details a bit better. With the artboard visible now when I click on the object on the left-hand side, you can see that I've converted it to a component. Here in the Properties Inspector It's a master component and it has that one default state. What I want to do is add a second and third state to simulate the hover state, and then the active state that I've designed here on the right-hand side. To begin with I want to make sure I have the components selected. To do that I can come here to the lower left-hand side and open up the Layers panel, and I see that I have the components selected there.
On the right-hand side in the Properties Inspector notice that I can see that I have a component and it's a master with just that default state. I want to come in and add a second state. I'll come to the right-hand side and just click on the + sign. The first time I go to add a state to a component, I have the ability to either choose a custom new state or a hover state. You can only have one hover state per object. A hover state allows you to define that hover look and feel, but it also makes creating a hover interaction very easy. I'm going to come in and select it, and we'll look at the interaction in just a moment for now. I'm just going to call it hover and hit return and I'm going to design it to look just like the button here on the right-hand side. Okay, that was pretty easy. When I click on the component now, I see I have the default state and a have a hover state. Let's go ahead and add the third state. I'll move this over so I can see it a bit more clearly. For that I'll come into the Properties Inspector. Once I've confirmed that I'm at the right level of selection state for this component, and I'll add that third state.
Notice that there's no longer a drop-down offering a hover state because I've already used it. I can just select a custom state. I want to call this Active. And I'll design it to look like the one on the right. I'll change out the label. And I want to swap out the icon as well. Now when I click on this nested icon, I can see it's selected here in the Layers panel. I've scaled it to be 14 pixels by 14 pixels. So if I come here to the assets panel and select let's say the checkbox. When I press and drag to replace that there I can see that it changes to the arrow letting me know it's going to replace that icon with the new one, but the dimensions are a bit off. That's okay. I'll come here to the Properties Inspector and change it to be 14 pixels in height and width. Alright, I now have my design all set if I click once again at the root level of the component here in the properties inspector notice that I can start at the default state. I have a hover state and then I have my active state with that set. I now want to focus on the interaction to do that.
I'm going to come here under edit and I'm actually just going to cut this off of this artboard. And move down to this second artboard here towards the bottom and I'm going to basically select the artboard and then I'll paste the button into place and I'll move it down towards the bottom area here. Now, it's important that I recognize that I still have the master component here. I can apply interaction states to an instance of a component, but it's going to be unique to that instance. So if I duplicate multiple components the way to make sure that the interactivity I'm about to apply will apply to all of the instances is to do it at the master level. With this component now where I wanted to be on the artboard that I want it to be on, I'm going to now switch over to Prototype mode. Notice here in the properties Inspector. it's really important that you look at which state you have selected. I'll click on default state and an interesting thing happens when I'm on that default state. I have a wire that's already been defined. If I hover over it, I can see it's the hover wire. It has a hover icon here towards the end of the tail of that wire basically, but that's the magic that was automatically applied when I selected a hover state. Let's take a look at what this behavior by default looks like. So I'm going to go ahead and zoom out a bit, make sure that the home where the beginning of my flow is set with this first artboard and bring up the desktop preview app. If I move this over here into position, notice that I can come in roll over that button and I get the hover state. I'm not clicking. I'm just moving my pointer to that hover state when I roll off. It's a toggle. So it's going to roll back to the default state. It only applies that state when I'm hovering over the object. That's perfect. Let's go in now and add the third state to this design.
I'm going to go ahead and minimize my preview, and back here in Prototype mode I want to come into that component by clicking on it to make sure I select it. Notice that here in the Properties Inspector I've got a trigger for the hover interaction that auto-animate to the hover state. Let's add a second one now. So under interaction, I'm going to hit the + sign. From here I want the trigger to be tap and I want it to be an auto-animate transition that then brings me to a different artboard. Notice I can select an artboard or a state in the drop-down. I want it to move to that active state. So I'll select it with that all set. Let's bring up that Desktop preview. Once again, I can now come to that object. I can roll over it to get to the hover state and when I click I get that done state.
Now as you might imagine, I have just scratched the surface of what you can accomplish in Adobe XD to take your design skills, even further. There's lots more learning material available to you. Towards the bottom of this demo file are a series of links to various resources that you can leverage and take your learning further. Hopefully, this is just the beginning of a long exciting relationship with the Adobe XD application.
Components are powerful ways to create reusable elements like buttons across your design. Adobe XD Components are extra powerful with the integration of Component States. Component States in Adobe XD unlock the ability to create reusable versions for each component, like hover states, active states and more. Each component can now contain these state variations which can be linked together in prototyping mode to create micro-interactions. Adobe XD Hover states are easy to make too with a pre-linked Hover state that can be added.
