Hey everyone, I'm Howard Pinsky. And in this Adobe XD tip we're going to take a look at creating interactive progress circles using Auto-Animate. Let's get to it.
Alright, here we are in Adobe XD with a project I've been working on. And I'm thinking, for this screen over here, what I would like to do is have several progress circles that go around and change when the arrows are tapped on. And for each of these circles, there's going to be an unfilled and filled state.
So starting off with the Step circle, I'm going to go ahead and select this. And since this will be the unfilled state, I'm simply going to drop the Opacity down quite a bit... somewhere around 30%. And once that's been done we can start working on the filled state. So very quickly, Command or Control+D to duplicate the shape, and this will be bumped back up to 100%. Now, what we want to do is utilize the dashes and the gaps to fill only part of this circle. So right down here under Border in the Properties Inspector, I'm going to try increasing the Gap quite a bit, to somewhere around 1,000. This just ensures that when you start adjusting the Dash, either directly within your Properties Inspector or by holding down the Shift key and using the arrows, that it fills up from the beginning. And now that I have this where I'd like it, I can also adjust the caps, if I want to. So if I want nice rounded caps, I can press on that. And that looks pretty good. Let's go ahead and do the exact same thing for the Exercise and Move circles. I'm going to drop the Opacity down to 30% by pressing the 3 key on my keyboard, duplicate, Command or Control+D, bump up the Opacity. Set the Gap to somewhere around 1,000 and adjust the Dash just like I did a moment ago. Finally, I'm going to go ahead and round out the caps. And one more for Move. Drop the Opacity to 30, duplicate, bump up the Opacity to 1000 and adjust the Dash. Just like that, round off the caps. And we now have our initial circles.
Now at this point, what we want to do is, we want to start setting up the component so that when we press this arrow to the left, it transitions the circles. So I'm going to go ahead and select all of these layers here, making sure the background is not selected, just like that. And then, either within your Libraries panel in your assets right over here to the left or within the Properties Inspector to the right, go ahead and press the plus button to create your default state. And now what we're able to do is, press the plus button one more time and create a new state, which I'm going to call Yesterday. So now that that new state has been created and is active, we can dive into this component and make changes.
And first up, I'm going to go ahead and select this arrow here and bump the Opacity back up to 100% so we'll be able to transition back to the default state. Now what I can do is dive into these individual circles and adjust the Dashes, just like we did before. This one might be filled up completely. This one over here will increase ever so slightly and this one for the Steps will increase quite a bit. Just like that. If I press Escape to go back to the component level, we have our default state and we have our Yesterday state. And at this point all we need to do now is wire it up.
So hopping over to Prototype mode right here at the top, I'm going to go ahead and select this arrow to the left, which is what I want users to tap on to activate the change. And then I'm going to click on this blue handle to the right, which will allow me to choose the Destination state within the Properties Inspector. Now, you'll want to make sure that under Type that Auto-Animate is selected so XD can notice the differences between the two states and animate those changes. For the Easing options, Ease In-Out is a pretty good bet. Snap could possibly work, but I'm going to choose Ease In-Out with a duration of... let's try about 1 second and see what that looks like. And with those set, I'm going to go ahead and press the Play button at the top, click on the arrow and the changes animate beautifully. Now, of course, we can go to the Yesterday state as well. Click on this arrow here. Click on the blue handle. Choose the Default State for Destination. All other properties remain the same. And when we press Play we can go back and we can go forward.
And that's how you can create interactive progress circles using Adobe XD. Hope you all enjoyed this tip. Make sure to subscribe for more videos. Follow me on Twitter and I'll see you all next time. Take care.
Design a fitness project with interactive progress circles using Auto-Animate and learn how to build a component from scratch. Begin by drawing a series of circles and name them Step, Exercise, and Move. You’ll see how to duplicate an object and quickly change its appearance using the Properties Inspector, adjusting settings for Fill Color, Opacity, Gaps, and more. Once you’ve made several circles, you’ll use them to create a component that plays an animation to move the circles around when an arrow is tapped. You’ll also explore adding different states to the component. As you tap on triggers, states display visual indicators to simulate user interactions.