5.1 Advanced Components With States

Welcome back to the course. In this lesson, I'm gonna show you how to work with component states. These allow you to create variants or multiple variants of a component and switch between those variants very easily. This is super useful for creating buttons or forum elements, for example. So let me show you how this works. And let's create some component states. All right, here I have some more elements from the Navigo UI Kit that I showed you in a previous lesson. And let's say that, let me actually ungroup this. Let's say that I want to create another version of this cart. The first step I need to do is create a component, okay? And by default, this has a default state. So let's go ahead and create another one by clicking this button and selecting New State. You can call this whatever you want. I'm gonna name it State 2 and with it, we can simply go in here. Let's say we want to increase or decrease the size of some of these elements. So, I'm gonna call this 125. This one is a bit bigger. So maybe 452 and maybe this one will be 310, something like that. So now, you'll see that when I select the component, I can really easily switch between states. So this can have like a gajillion uses. You can create a pricing table where you create a component for a pricing plan. And you can just switch between those states to display the entire table. I mean, for example here, I can simply duplicate this component. And I can choose to display the Default State in the first one and State 2 in the second one. See how easy it is to display multiple versions of the same element? Really, really cool. This also works very well with buttons. So for example, I could have a component button here and I can add a new state for, let's say, Hover or Active. All right, so let's say the Active State, make sure that is selected. I can change the fill color to something a lot darker, right? And I can then easily switch between the two. I can also create a Hover State for this button. And the Hover State, let's say I want this to be a bit lighter. And you'll notice that if I'm gonna open up a prototype here, and I switch to the default state, I get that Hover State. Or actually displays that Hover State when I actually hover on the element with my mouse button, which is pretty, pretty cool. So that's the gist of working with states. Now, because this is a more advanced course, I'm gonna show you a more advanced way of working with Component States. And I'm sure you'll remember this example from the lesson about using mask and autoanimate, right? In that lesson, we used three different artboards to create the animation. Right, and each artboard, I would basically move these images. And I will also move the mask between these dots. Well, autoanimate also works with Component States. So we can actually recreate this gallery demo by using a single artboard and of course by using components. So, the first step is to select both of these, group them up. I'm gonna call that gallery, and I'm gonna create a component out of it. Here, this is the Default State, and I'm gonna create the new state that I'm gonna call State 2. Now with State 2 selected, I can go ahead and make my changes. I can go in here, And I can choose which image to display and also I can go in here, And move the mask to its correct position. Like so, and then select this at another state, State 3. And in State 3, I'm gonna choose to display image three and the mask. I'm just gonna move it, To its correct position here. And actually, I need to make this a little bit bigger like so, and just move it, like so. Okay, so, that is my components we have State 1, State 2, and State 3. So now with the default state selected, although it doesn't really matter, I can go to prototype. I can select the component and in the default state, I can select this pill. I can drag a wire to the same artboard. The trigger is gonna be tap, action is gonna be autoanimate and for destination, I'm gonna choose State 2. This one, I'm gonna choose State 3. And for both of these, let's not forget to use ease in out and maybe 0.6 seconds, okay? Now, let's select the component again and choose State 2. In State 2, I'm gonna select the pill. This should go to the Default State and this should go to State 3. And then I'm gonna select the component again, switch to State 3. And choose default here and State 2 here. All right, so with that, let's go ahead and preview our gallery. And let me just resize this so you can see it better, and there it is. We have the exact same animation, the exact same prototype, but this time, we used a single artboard. But we used a component with multiple states. This is a much more elegant approach. Although it's not as simple as the one we originally used. It's a little bit more complex to get the grasp of, but once you do, you'll see that it's very, very powerful. And Components States can be used in lots of different places. All right, now for the final lesson of this course, we'll have a look at five plugins that will take your XD experience to the next level. And that's coming up in the next lesson so, I'll see you there.