Adobe XD's NEW Feature: Component States - Tutorial

Key Takeaways

Adobe XD yesterday just released a massive update and we're gonna take a look at one awesome feature which is component states all right so let me show you exactly what we're going to learn today so I'm going to switch over here to the monitor and we're gonna start with these examples in the very first example is the easiest of course to demonstrate what's happening here and that is a toggle switch so there's three things happening and before yesterday you would have to create three different artboards for this first you'd have to the default state there's an artboard then you'd have to have another artboard for the hover right here and then you'd have to have a third to show what happens using semi auto animate I wouldn't toggle on but this is just one artboard all the animation is taking place within this component for a next example it's gonna be slightly more complex and I got the eye the inspiration for this one from Howard Polinsky he has a really awesome Adobe XD template that has a ton of these animations that he's worked on to showcase this new feature so I'm gonna link that in the description but if we click on this we can see this cool sort of GUI you know sort of animation take a plate this is a little bit more complex just because I deals with the use of masks I'm gonna show you how to set that up and then our third example is going to be a mobile menu so if I click on this we can see it slides out we can even hover these are nested component State animations hover based all right we can click it out off of it it goes right back or we can click on say about it'll take us to a new page so now you can showcase your mobile animations or anything like this or your mobile menus without having to create a bunch of artboards it's just it's just one component where all of the animation is confined within it so as always make sure to subscribe and let's get started before we begin though 'la note the sponsor of this video makes it easy to host your site your app or service on whatever technology stack you use with one-click apps like WordPress and Drupal getting up and running is easy with back-end access to your server customization options are all but limitless a fully configurable dns manager allows for you to easily switch or to name over to your new server in SSL certificates can be installed for free using open-source tools so sign up using the link below to get $20 in credit on your new lenôtre count alright so let's go ahead and we'll just start off by creating an iPhone basically mobile artboard here and to get that drug in and let's just give it like a very light gray background and we're gonna do a toggle switch here for the first example it's like the most easy way to describe this new feature so all right we're gonna create this the typical pill and this is going to be a large example just so that we can see the whole thing so it's gonna be a very large toggle switch here so just bring those corners in get rid of the border we'll leave it white for now and then we will get an ellipse and let's come out right here in the center shift and Alt key and just scale up and then we'll go ahead and get rid of that let's go ahead and make this let's see here yeah something like right around there we have a dog that's barking in the background it's always very professional I'm just gonna duplicate this control D move it over that way I kinda know how large I want my pill container to be all right that's good we'll delete that and here we go so now what we'll do is I at this point we know you know all the layers that we want to be a part of this component so I'm just gonna right click and choose make component now at this plate the state we can go ahead and choose component add state right here in this little plus button so we can choose I just a new state or a hover state sort of the same thing except if you choose hover state the they do some of the manual work for you in the prototyping section but you can still have your own hover State if you wish just by choosing new state but you'll just have to hook that up in prototype you'll see that in a second so if we want to add a hover state you don't have to you can only have a click state if you want but we can have a hover state if we wish I'll do it just for demonstration purpose I haven't really thought all the design you but we'll just do a hover state right here you can give it a name hover state by default that'll work fine and so now we have two different states here so we have our default state which is what we designed originally and then a hover state they're not changing because we haven't made any changes to them yet so the hover State you have to ask yourself okay if we're gonna have a hover state what is it that we want to change about this well I for me maybe will just die I don't know will make this will double-click into the component to get through the ellipse and we will I don't know make it a little bit darker okay whatever now let's have the actual click state now that's where we're going to change the background of this and then we'll also change the color of this to white background would be like blue or something so let's do that so now we can do is just choose this the plus sign state 3 I for some reason it's not allowing me to it's not showing me the blinking cursor must be a recording issue we'll just call this I click it's not letting me change what is happening okay well you know what it's going to be called state 3 no big deal so we're going to take this move it over that's the first change we want to make we're gonna make it white and then this way background I guess we'll just make blue something like that so now we have our three states we have a default hover and we have this turned on so now it's not gonna work quite yet because we have to go to prototype and if we choose default state will see it has hover already added because we chose that hover state that's what it does it just adds the interaction for you so this is going from default state to hover state and it's a hover auto animate we have we can choose different options here if we wish auto animate will be just fine we could also because we're only changing the color really we could just choose transition and then animation none that'll be fine now hover state this is where we actually have to add the interaction type so we're gonna click plus you can see how they're all grayed out and we'll choose tap all right so the here let's use auto animate so we can have a nice smooth transition from this position to this over here destination we have to choose state three all right so we can also have you know ease the easing options and the duration options all that good stuff state three we want to enter interaction but based on that so that we can go back to the default state if it's clicked again so we can go here too let's see here we have tap Auto animate choose a state default and that seems like it'll work well so now let's go ahead oh by the way I just leave it on a certain state and we hit play that's the state that is going to end up it's not always going to be the default state so if I hit play right now when it's already toggled on there we go but if we choose this it's gonna it's going to start you know on our default state so we hover over we can see we have the nice hover effect we click it and it smoothly Auto animates over awesome awesome stuff now we're going to do a slightly more complex example where we have a download button when you click on the download it will have a cool sort of animation that works with I am asked so let's go ahead I'm just going to duplicate this go back to the design tab get rid of that and for this one we're gonna have just a button here in the center like this and we'll go ahead and round out the corners just a bit for this example we'll take the border remove it and then we'll go ahead and I let's see here I'm just gonna choose black for the for the button I don't really gave given much thought to the design process here we'll take the type tool and extend it all the way out Center this will put download and we'll change the text to white and get this all matched up let's just do new neato for this okay it's not really important alright so this is right here is going to be our default state this is what the button is going to look like not very exciting what we're gonna do though before I this into a component is I want to design like what the the end states going to be when it's clicked so what is take the pen tool and I again the example from Howard had like this sort of cool goo effect if you will so I'm gonna take this and just create some Bezier curves maybe like that that'll work and then actually let me undo that okay that's fine now let's go out like this make sure it just contains the entire button container and we'll give it the color that we want it to be once it's filled we'll just make it this nice blue color yeah that's good and then what we want to do is create a mask so we're gonna take the original button shape which is behind it by the way we'll take download and put it on top so we're going to take this original button container and we're going to hit ctrl D to duplicate it and then we'll drag it here to the top and we're going to choose our path so we have rectangle three and path one I so then we right-click and we choose mask with shape so now we only see that because if it's a mask I the blue portion of our path that is within that mask which is the button the rectangle essentially so now what we want to do is by the way it will take download get that up there on top again so this is what the end results going to look like when somebody clicks on the download button so now we'll take everything we're going to right click and we're going to choose make component now this is our default state it's not actually going to be our default state what we'll do is change this up here so we're gonna double click into it get into our mask group take our path and then move it up okay so now this is our default state we're going to choose I to add a state it's going to be a new state it's going to be a click base state and it's starting to work again alright and then what we'll do here is we'll double click back into this our mask group rather take our path take it down and then also if you wish you can actually change up we could double-click further into the path and change up the Bezier curves so that it makes it look like that it's animating because it is just to make some sort of interesting look for it I guess and that right there seems pretty good because you can animate the the path so that Bezier curves alright so now we go back here to prototype and we go back to the default state we're gonna add an interaction a tap Auto animate let's make this one last like one second here and make sure you choose an artboard or state otherwise if you click back to state without choosing the destination it's gonna forget all this stuff in fact I'll just show you go back here guess what it's gone so I tap Auto animate one second destinations click click and just go back to tap i right here to the default state and there we go so now let's try this one play now it started us on the state that wasn't the click stage so let's do that alright there we go look at that to make it a little bit more interesting let's go ahead and so we can see the effect more changes to like 2.5 seconds very very very cool stuff I love it so the possibilities here are endless I'm gonna show you one more example which is to I create an actual a little bit more complex example of these component States with a mobile menu and we're gonna have nested components that have animations on them alright so let's go ahead and duplicate this artboard I'll delete that change this to white and let's get a quick hamburger menu going up here so we'll get this yeah something like that make it black I'm gonna duplicate this and group them we'll call it ham no we'll call it hammy there you go all right so we've got our big old large hamburger menu right there so what we want to do is create the state the click state so let's go ahead and create kind of like a 2/3 drawer that comes out like a darker color not quite black and we're also going to have just a couple lists our link elements here list items we're gonna make this one just slightly just slightly lighter than the background then we're gonna have an element that says home all right so this is going to be a component itself with a little animal of ER animation so by default the opacity was zero take this right click both of them make component create a hover state double click into it and then change the opacity of one awesome stuff now if we were to go to prototype and replicate this and then let's just choose to false state for both these and hit play you'll see that because we have auto animate on here for some reason the animations don't behave like they would in HTML and CSS like they there's a delay like only one transition or animation could be taken can take place at the same time so I don't like that so I decided instead of doing that we'll take this and change Auto animate to transition and animation to none now if we duplicate this and try it again they are instant awesome just a little bit of a pro tip there okay so now if you want to change the label for instance so I'm one of the instances about you're gonna have to do it for any other states so about as well and go back here and change this to default okay so now at this point let's go ahead and create the I the component for the whole you know the whole menu which will include the hammy the hamburger icon you so at this point we'll go ahead and take this background rectangle 46 is renamed that's a menu BG we're gonna duplicate it and drag it to the top and it's gonna serve as a mask for these elements right here so it's just our are two components right here in the background let's right-click mask with shape okay so now at this point we'll go ahead and take both of these elements right click and make it a component now our default state needs to I obviously not be this needs to just be the hamburger menu right here so what we'll do is we'll double click I into this or just come up here like I did and it says mask group six so we want to take this elements and move them like if we wanted to kind of come in from the the right and into the left move them over to the right take the opacity down that'll work and then also I want to take this mask group and just hide it because if we don't hide it this empty space will be all clickable we only want this area to be clickable all right so hopefully that makes sense that never something that stag me I wasn't sure how to fix and to figure it out we just hide this group so then we're going to go ahead and we're in default state we're going to add a new state I'm gonna call clicked and in new state we'll come back here we're going to take our mask group we're going to show it alright so now it's not hidden anymore we're gonna take these elements and then just place them where we want to take the opacity back to 100% so now if we go back into here and we go to mask I or we click on your component it should now look like this let's go to prototype and our default state we need to add an interaction of tap let's use auto animate 0.8 seconds I guess choose the artboard of clicked and will you snap this clicked we'll go ahead and just do the same thing essentially it's going to go to do fault State let's go back to the default state to show that initially hit play notice we we're not getting a hover and or any type of cursor hand icon or a pointer rather there we go and there you go so now you may be wondering what if we want these home and about links actually to go somewhere because right now they're just taking that drawer and just going back to the default State well what I found that you can do is if we go here into our click State and we get in here into this nest of stuff let's take our about page for instance we'll open this up and we'll have the background we're going to copy that and then come up to right here and we're gonna paste it to the top it's called rectangle 48 trust me you want to rename these layers if this is a serious project and then we can go back to prototype and notice it's selected our rectangle 48 and what we want to do let's say for instance let's create a another artboard where this is in the default state and this maybe says about like this will be our about page that you're designing for all right there we go go back to prototype come here twos rectangle 48 and then just drag it over like you normally would to this other artboard I so now if we go back here choose default state hit play we'll go ahead and click this click on about there we go and because about already has the instance of this master component for this component this will work there as well up about is sitting on top of it so if you wanted to really quickly go and put that beneath now we'll play on this artboard click on about there we go so you can do this for all your links so very very very powerful alright guys hopefully you enjoyed that this is a massive update there's going to be more features in different trigger types right now they just have tap in hover but I Howard confirmed to me that having time I be one of the triggers that's on the roadmap then that will really open up a lot of different possibilities all right so once again subscribe and I will see you later goodbye