By Howard Pinsky
Hey everyone, I'm Howard Pinsky. In this Adobe XD video we're going to take a look at using components and animated dashes to add fun interactions to your online dashboard. Let's get to it.
All right. Here we are, back in Adobe XD with a dashboard I've been working on. And in this section over here to the right, under storage buckets, we may want to create a circular chart which contains various data points with arrows that allows you to navigate between different states. So, diving into this group, we're going to start by creating our first circle. I'm going to grab my Ellipse tool, shortcut key E and drag one out, right about here. Now, for these particular shapes, they will not have a fill but they will have a border. So I will leave the border on and I'm going to set this first colour to a nice reddish pink, somewhere in this area here. And I'm going to crank up the size quite a bit. So we have a nice thick circle. And we're only going to want some of the circle to be filled in, so under Gap, I'm going to go ahead and set this to 1000. And this will allow me to dive into the Dash and simply increase this, either by entering a value or just by holding down my Shift key and... using my arrows, I'll go ahead and leave this right around here. Now, depending on your style, you may want to leave it as square caps. Or you may want to round them out for a nice curvy style -- completely up to you.
All right. So with our first circle complete, we're going to go ahead and create two more. So I'll duplicate this one, Command or Control+D and I may want to pull in one of the purples that we've been using throughout this project. So if I go ahead and grab the Eyedropper within my Properties Inspector, beside Border, I can sample this colour right over here to the left. Or, if I do have that colour saved in my Assets, I can simply hop over there, right-click and then press Apply Border Colour. For this circle, I'm going to go ahead and dive into the dash one more time. I'm going to pull this back a little bit and then I can go ahead and rotate this circle around until it fills up a little bit more of the larger circle. And then in my Layers panel, I'm going to make sure to pop it behind the first circle. And we'll get to naming these in just a moment.
Now finally, one more circle, Command or Control+D. And for this one, I'm going to go ahead and shift this over to a lighter blue. I'm going to drop the Dash. Rotate it a little bit. And then one more time, move it behind in the Layers panel.
All right. Very quickly, I am going to dive in here and name some of these. This is going to be Videos and then Photos and then finally, Documents. Now one more thing that we may want to add is a much lighter circle, behind all of our three circles. This could help to let users know that there's the potential of filling in this entire shape. So I'm going to go ahead and duplicate the current shape I have selected. Again, press Command or Control+D and then in the Properties Inspector, I'm going to set the Dash and the Gap both to 0. Then I'll drop the Opacity of this shape quite a bit, somewhere around... let's say 10%. And then make sure to move it behind. And I'll call this Circle.
Alright. The next thing we may want to add on the inside of this particular design is a little bit more information about this chart. So I'm going to grab my Ellipse tool one more time and we're going to create a little bit of a container inside. So let's go ahead and draw out a circle right in this area here. And for the styling of this particular shape, I'm going to go ahead and set the Border Colour to appear white. You won't be able to see it just yet. But in a second, it'll make sense. Then I'm going to switch the Fill from Solid Colour to a Linear Gradient. And the top colour is going to be a very light grey with a touch of blue in there. And the bottom colours can be a little bit darker... and we may want to add a little bit of blue in there as well. And then, finally, to give this a little bit of depth, I'm going to go ahead and turn on a shadow. I'm going to bump it down on the y-axis. I'm going to blur it quite a bit. And then the same thing: I might want to add a little bit of blue in here, just to give it a touch of colour. Very subtle shadows.
Now, at the moment, the border that I added looks a little bit too strong. So I'm going to jump into the Border Picker and then just reduce the Opacity quite a bit, so there's a nice subtle border on there. Great. Now, on the inside of this particular shape, we may want to put how much of the storage has been used. So I'm gonna go ahead and grab my Text tool and type out something like 95%. I'm going to make this quite a bit bigger by dragging on that handle. And maybe we'll give this a little bit of style. Let's choose Dunbar Tall. I'll make sure this is centred and I'll drop the colour quite a bit.
Next up, one more text layer, right underneath. I'll go ahead and hold down Alt or Option and drag downwards. And this will simply say Used. Now, this is quite a bit too large. So I'm going to drop the size and the weight to about Medium and then maybe 16. I'm going to move it on up. Then, I'll quickly hop into the Colour Picker and then just shift this one up a little bit. Great.
Now, right below this chart, we may want a little bit of an index to let users know what the pink, the purple and the blue actually mean. So I'll start this off, grabbing my Ellipse tool. I'm going to drag out a small circle right down here at the bottom. I'll very quickly grab my Eyedropper, shortcut key I and sample this colour. And then right beside, we're going to grab the Text tool and type out: Videos. I'm also going to sample this colour as well. And again, if you have this colour saved in your Assets, you can definitely use that. That looks pretty good. I'm going to select both of these layers, group them by pressing Command or Control+ G and call this Videos. And, before we add any more, I'm going to make all this a little bit smaller just so we don't run out of room. And with that done, I'm going to place this group into a larger group, Command or Control+G one more time. And I'll call this Index. And this will allow me to turn on a Stack within the Properties Inspector. And it's going to define it as a horizontal Stack, which will allow me to dive in here and duplicate this existing group. I'll do that twice. And now I have three index items that will adjust as I'm making changes. So I'll dive into the second one. I'll go ahead and make sure to select both of these layers, sample this purple and then change this to Photos. And then, for this one over here to the right, I'll sample this light blue and then I'll dive in and name this Documents. Now, they're looking a little bit squishy. So I'll go ahead and select the overall index group and then, within the Properties Inspector or directly on canvas, I can hold down S key and my Shift key and simply stretch these on out.
Alright, the last thing we may want to add before we start creating a component are arrows over to the left and to the right. And to help me with that, I'm going to activate my grid, pressing Command or Control+Apostrophe, grab the Pen tool, shortcut key P and then simply use that grid to create an arrow. And with that done, I'll make this a little bit larger. I will thicken it up, just a touch. Round out the caps and round out the joints as well. And let's go ahead and grab the Eyedropper and sample this colour over here. And now I can place this in the centre of my chart on the right and then drag one over to the left, holding down Alt or Option. And then I can flip it within my Properties Inspector. Perfect. Our first chart is now complete.
And now we can start the process of creating additional ones. And what I want to do is select all this information here that makes up this particular chart. So inside of my Layers panel, I'm going to go ahead and make sure to select all this information, except the Index -- that will not be changing, so I don't have to worry too much about that. And then, within the Properties Inspector, I'm going to go ahead and press the plus button to create our first component. And since we've already designed the first chart, I'll press that plus button one more time and create a new state, which I'll simply call Chart 2. And now that our second state has been created, we can dive into this chart and make some changes.
So starting off with the pink circle, I'll dive into the Properties Inspector under Dash and simply drag this on back. I can now grab the purple circle, rotate this back, grab the blue circle rotate it back a little bit and maybe I'll also adjust the dash as well. And since this chart isn't filling up as much, I'll dive into this text layer and change this over to... let's say 90%. Alright, let's go ahead and create one more. I'll press the plus button one more time, make a new state, Chart 3 and this one won't be used as much. I'll dive in here. We'll go ahead and drop the Dash quite a bit on this pink one. I'll drop it on this purple one as well, just like that. I'm also going to rotate it back a little bit. Then we'll do the exact same thing for the blue one. Let's go ahead and rotate this back and then drop the Dash. And in terms of the Text layer, let's go ahead and just pop this at 20%. All right, so we now have three states. We have our default state, Chart 2 and Chart 3. And now we can start the process of wiring up this.
So, hopping into Prototype mode, right here at the top, I'll start by selecting any of these arrows. We'll go for the one on the left. And I'll click the blue handle to the right. This will allow me to choose a Destination state within the Properties Inspector. We'll start with Chart 2. It's going to automatically default to Auto-Animate. And for the easing, will go for Ease In-Out with a Duration of around... let's say 0.8 seconds. Then if we press Escape, we can go to Chart 2. We can click the arrow to the left, click the handle and then go to Chart 3. The rest of the properties will remain the same. We can also use the arrow on the right to transition to our default state. And then finally, from Chart 3 we can click the arrow to the right and then choose Chart 2.
And with that, all of our charts are now wired up. We can press the Play button at the top right-hand corner and we can cycle between the different charts by clicking the arrow to the left and then back with the arrow on the right. And if you want to get a little bit fancier, I do have a video on how to create a number counter that you can use for this text layer in the middle.
And that's how you can use animated dashes to add some fun interactions to your online dashboards. In the last video in the series, we're going to build out a personal planner using Stacks. I'll see you all soon.
Use components and animated dashes to add interactions to an online dashboard. In this tutorial, you’ll create a circular chart that displays data points with arrows that allow you to navigate between different states. You’ll create the chart by drawing circles with the Ellipse tool. Use the Properties Inspector to set Fill, Border, Opacity, Size, Cap, Gap and Dash attributes. Duplicate and group elements to organise them in the Layers panel. Add interactions to arrow buttons, using Auto-Animate to play an animation as the circular chart transitions to its destination state.
