By Dani Beaumont
Well sit down and fasten your seatbelt because here comes yet another epic capability in Adobe XD component states. This is a feature that's going to change so much of how you think about the structure of your design. In this brief video I'm going to give you enough to get started but I encourage you to check out some of the new UI kits from the team that show you many more variations.
For my exploration I started with a UI kit that we've had in our portfolio for some time and that's Tractiv by Cody Brown. This kit does represent visual states of objects. So for example if I zoom in here and take a look at this global pill button. Notice on the left-hand side I see the active state of that button on the right-hand side I've got the inactive state. Let's go ahead and switch now to some of the components that I've been experimenting with the new components state feature. One of the simplest uses for component states is to take a collection of elements that relate to one another and use states to reorganize them. I have a set of three icons here what I'd like to do is leverage states for those icons.
To do so I'm going to come in and select the group of objects. Notice I have a component inside the selected group. You can continue to nest components inside one another and apply states to each of those components which can give you a pretty sophisticated workflow. I'll go ahead and convert this to a component I can do that using the right menu of course or a keyboard command I'm going to use a new feature with this latest version of XD and come here in the Properties Inspector to a component area where I'll add that component. Notice that it indicates this is a master component that now has a default state. What I want to do is add a second state and I'll do that here in the right-hand corner by hitting the + sign. And then I'll select new state I'll go ahead and give it a name we'll call this one weights and from there I'm going to go in and very out the icon. I'll also change the label and I'm all set.
Let's do that one more time for the hiking icon. Now that I have that set let's go ahead and drag some instances of this component off of the canvas. I'm going to begin by selecting the component making sure I'm back at that default state and I'm just going to press and drag some instances on to the design canvas. One thing you'll notice is that the embellishment now that differentiates between a master component and instances has changed. So the master is the same it still has a solid diamond in the upper left-hand corner but notice these instances here on the canvas have a hollow diamond letting me know that they are instances and not the master and that's echoed here in the Properties Inspector on the upper right-hand corner. I'll go ahead and select that second instance on the canvas and switch it to weights and once again I'll select the third one and change that to hiking.
Now that we've covered how to create states let's take a look at how you can define interactions between those states. Because, we did cover states I'm going to kind of go quickly through that part of the process and focus more on the interactions in this next section. Here on the design canvas I've been working on the look of a toggle switch. So I have what I'd like to be the default state a hover state and then an active state for that toggle. Let's zoom in a little bit more tightly. I'm ready now to define the states and their interaction. I'll go ahead and start with the first objects here on the left-hand side I'm going to convert them to a component and in the component master area here in the Properties Inspector I'm going to add a second state. Notice in the drop down I can choose between new state and hover state when I select hover state it not only creates the state but it creates a hover interaction automatically so it just makes it easier for me. I can always do this manually but it's nice to have them go together. I'm going to select hover state and I'll give it the name hover. Next I'm going to come into that state and change its design a bit. With that all set let's take a look at what we've done so far. What I want to always remember to do is go back to the default state and then go in to the desktop preview app. When I come to the object now notice as I hover over it. It changes the state to a hover state and when I roll off it changes it back to the default state.
Now if I'm prototyping a touch device for example they don't have hover states so this is going to work for prototyping interfaces that have a mouse or a trackpad as I'm using right now. Let's go ahead and close that out and we'll add the third state. So with the object still selected in the component area of the Properties Inspector I'll come and add that this time I'll select a new state and I'll just call it active and I'll style it out. With that all set let's go ahead and switch over to prototype and we'll click on the object. What you'll notice is there are my three states. If I go back to default state because I set the hover state as that next state, I can see under interaction, I have a hover interaction that uses auto-animate to go to that hover state. I'm going to go ahead and change this to snap. I'd rather have snap between these individual states and I'll keep the duration the way it is. I'm going to then add a second interaction to transition from the default state over to the active state. So for that I'll come to the interaction section hit the + sign and this time I want it to be a tap interaction that uses auto-animate to transition to that active state.
Once again I want it to be snap for a duration of 0.3 seconds the last thing I want to do is get myself from the active state back to the default state. So for that I'll click on active come to the interaction section and hit the + sign. And, with tap as a trigger I'm going to auto-animate back to the default state. And, we'll leave that as snap with the short-duration. Once again, go back to the default state and let's go and take a look at this in the desktop preview app. Notice now when I roll over I get the hover state and if I tap, I get an auto-animate transition to the active state. Tapping again brings me back to that default state now obviously this is something you're going to want to experiment with as you interact with this new functionality. But, it's an awful lot of fun and a real powerful capability.
I encourage you to give it a try.
Hover states are a common web-based interaction for buttons and other actionable elements. Creating a hover in Adobe XD is simple with component states. In this tutorial, learn how to use Adobe XD component states to create a hover effect on elements like buttons with multiple states. Any component in Adobe XD can include reusable states for use across the design.
