Note: Because this is an ongoing series, viewers will not receive a certificate of completion.
Skill Level Intermediate
- [Instructor] Hey everyone. I'm Howard Pinsky and in this Adobe XD tip, we're going to take a look at creating an animated number counter using Components and States. Here's a delicious looking project I've been working on and I think it'd be interesting is if when a user interacts with this particular quantity counter the numbers visibly animate up. Diving into this particular group you're going to notice we have a few elements already set up. We have a minus icon, a plus icon, the number and a container for the background. Now thinking forward a little bit what we'll want to do to set this up is add in the other numbers that will be available. So I'm going to go ahead and double click on the number and on a separate line by pressing the return key, I'm going to type out two, three, four and let's go down to five. Now we see all these numbers one to five right now but when we're previewing this prototype, we definitely don't want to see them all. So what we're going to do is we're going to be using a mask to hide the ones that we don't want visible initially and to do that, I'm going to select the container in the background, duplicate it with command and control D and make sure to move it on top of the numbers that we just edited and once that's in place, we want to make sure to select both of these layers. So I have the container layer selected. I'm going to also go ahead and select the numbers layer and then under the object menu, we're going to hit mask with shape. This is going to take all the selected layers underneath that top most layer and hide anything that's outside its bounds and in my layers panel, I'm going to go ahead and name this numbers. Perfect. So now that we have our mass created what we want to do now is turn this whole quantity picker into a component. So I have it grouped right now and you can also select the individual elements if you like and then either within your assets, the command and control K shortcut or within the properties inspector to the right, you're going to go ahead and press the plus button to create a component and this will give us our default state, which is the quantity of one and since it's already been designed we can go ahead straight and create an additional state press the plus button one more time and create a new state, which we'll call, two. Now, there are a few changes we want to make to this particular state so we're going to dive into this component and since initially the minus button was sort of grayed out. We want to bring that back so it's now accessible. So I'm going to select that and with my eyedropper, I'm simply going to choose this color here to make sure it's active. Next, we're going to want to dive into the mask containing the numbers and simply move the layer up until the number two is visible just like that and that's it for state number two. So I'm going to press escape to go back to the parent component. I'm going to press the plus button one more time and we're going to create a state number three. Just like we did before we're going to dive in and we don't have to worry about the minus or plus buttons this time but I'm going to move this layer on up so number three is visible. Escape, plus, number four, dive in, move it on up and we're going to do the same thing for number five, dive in, move this on up but this time, because we can't go higher than five I am going to select the plus button and just change that color to white. So now if we select the component one more time you're going to notice we have a default state. We have two, three, four and five all laid out for us, but of course we want to make sure that when a user interacts with this, we have a nice, smooth animation and to do that, we're going to hop into prototype mode right here at the top and the first step is to select the object that will trigger the animation and in this case, we want to make sure that a user can tap on the plus button. So we're going to select that, click on the blue handle to the right and then within the properties inspector we can choose one of the other states and in this case is going to be state number two for the easing options for an interaction like this something like ease in and out should look pretty nice with a fairly quick duration. We don't want users waiting around for too long. 0.2 seconds should do. Now, what we can do is hit escape to go back to our component, go to state number two and repeat the process for all the other states. So I'm going to click on the plus button, click on the handle, choose state number three and we can also click on the minus button and do the exact same thing going back to the default state. Let's go to state number three, select the plus button and just very quickly go through this process. Number two, let's go back to number four, go to five minus button goes to state number three and then finally, we're going to go to state number five. The plus button will not do anything in this case. So we'll just want to do the minus button going back to state number four. All right. So everything has been wired up, took us less than a minute and now what we can do, we can hit the play button at the top to preview our prototype and now when we go ahead and press on the plus button we have this nice animation going to number two, three, four and we can use the minus buttons to go back as well and that is an overview on how to create an animated number counter using Adobe XD. Thanks for watching everyone and I'll see you all in the next tip.