By Howard Pinsky
Hey everyone, I'm Howard Pinsky. And in this Adobe XD video, I'm going to be showing you how you can take your financial charts to the next level using Auto-Animate. Let's get to it.
Alright. Here we are back in Adobe XD with a financial chart I've been working on. And in this video, we're going to go ahead and create two different styles of charts that will be able to interact with using Scroll Groups and components states. So starting off nice and simple with our line chart, I'm going to grab the good old Line tool from the left and then drag one out across this artboard. In terms of styling, we're going to keep it really simple. I'm going to go ahead and choose a nice vibrant orangish-yellow color and then bump up the size, quite a bit. Now, depending on your personal preference, you may want to keep the caps nice and square or you may want to round them out.
Next up, we want to add a few extra points on our chart. So I'm going to go ahead and double-click on this line to access the path and click to create a point. So I'm going to go through and add a few extra points on this line, just by clicking like this one more over here. And you're going to note, when I start moving some of these points, we have very sharp lines... and if that's the style you're going for, great. But there may be situations where you may want curvy lines. And all you need to do is double-click on a current point to convert it into a curve. So I'll go through one more time and double-click on these points. And now, if I move them around, we have nice curve. So I can go ahead and move these into place. I'll move a few of them up, a few of them down, just to define what this chart may look like.
Now, I'm thinking I may want part of the chart to kind of flow off this container over here, to the left. And there are a few ways we can go about doing that, including just stretching the entire line if you want to. Or just like we did before, we can double-click to access the path. I can move this point over to the left and then continue to add some additional curves like we've been doing previously. And if, at any point, you want to adjust your curve, you can always grab one of these handles and pull outwards. All right, so we've gone ahead and defined our line chart, which in my Layers panel, I'm going to go ahead and call this Line. If at any point you notice one of your curves is looking a little bit too sharp. What you can do is simply double-click and then double-click one more time to redefine that curve. All right, so our line chart is now complete. The next chart we want to create is our candle chart and not the type of candles you may light sometimes at home. But the red and green candles that often appear on stock and Opto charts. So I'm going to go ahead and zoom on in here so we can create our first candle. I'm going to grab the good old Rectangle tool and draw one out. And I'm going to design these first two candles at their largest state. And this first rectangle is going to be a nice green. I'm going to go ahead and choose a color right in this area here. And in addition to this larger shape, there's often a stem going up the top and sometimes down the bottom. So I'm going to duplicate this Command or Control+D. Bring it on in a little bit, and then pull it on out, pull it on in, and just a little bit more so we have nice thin line. And there we go.
Now in just a moment we're going to be using a plugin to help us create additional candles at various sizes. And to help out with that, what I'm going to do is select both of these shapes and then within the Properties Inspector I'm going to switch Responsive Resize from Auto to Manual. And make sure that fixed height is not turned on. This will allow either us or the plugin to squish these candles in as we need to. And with that set, I'm going to go ahead and group these two elements and call this Green. And with our green candle now created, I'm going to go ahead and duplicate one over to the right, and then simply change the fill to a nice reddish pink, right about there. And then in the Layers panel, one more time, I'm going to call this Red.
Alright. So we have our first two candles in place. But of course we may want many more going across this chart. And we could start using things like Repeat Grids and Stacks to help in that process. But I figured this could be a fun opportunity to use a plugin. So with both of these candles selected, I'm going to go ahead and hop into my Plugins panel at the bottom left-hand corner. And I do have the Confetti plugin already installed. If you don't have it, go ahead and hit the plus button, search for Confetti and give it an install. And this will allow me to define some properties down below, including the number of columns, which essentially will be the number of candles going across our artboard. Let's go ahead and bump this up to about 40. The number of rows, we're going to keep at 1. But we do want to randomize the scale. And because within our Responsive Resize properties, we chose to keep maximum width turned on and maximum height turned off, it should only scale these candles up and down. And the maximum height will be exactly what it looks like right now. And minimum height will be 10% of that. So, with all these properties set, I can go ahead and hit Run. And as you can tell, it created a bunch of new candles going all around the artboard. And if I hop into my Layers panel, I can see all the candles right here going down. I can select them all, pop them into a group and call this Candles. Now, if we take a quick look at her candles, some of them seem to be a little bit closer than some of the other ones. And what we can do, to quickly space them out properly, is turn on a Stack within the Properties Inspector. It's going to define it as a horizontal stack, and now we can go ahead and space them out by about 16 pixels each. And if I want to bring them closer together vertically, I can grab the handle of the top, hold down Alt or Option and drag on in. Now, as some of you are probably shouting at your screens right now, this isn't exactly what a candle chart looks like. So you will likely have to dive in and make a few adjustments to not only the position, but the heights as well. And if I go ahead and hide this group, I do have another group of candles created that's a little bit more accurate. And just like with the line chart, I'm going to go ahead and extend this off the container just a little bit. So we now have our two charts completed. We have our candles and we have our line chart.
And the first bit of interactivity, we want to enable is scrolling. So what we're going to do is we're going to select both of our charts, the candles and the line chart. And then over within the Properties Inspector, I'm going to turn on a horizontal Scroll Group. And this will give us two new handles, one over to the right and one over to the left. And anything inside of this window will be visible at all times. So what we'll want to do is drag the handle over to the right, until it snaps, and then drag to the left of this container until it snaps as well. And with that done, we can press the Play button at the top and we can now scroll to the left and to the right to see more information. So our Scroll Group has now been set up.
The next thing we want to do is we want to create a component that will allow us to cycle between hours and 30 minutes. So, within the Layers panel I do have the Chart scroll group selected and I'll also want to select this Time group which contains these various buttons. And with both of those selected, I'm going to go ahead and press the plus button within the Properties Inspector beside Component, which will create our Default State. You can also create components in your Libraries panel, in your document assets. I'm going to go ahead and name this Charts.
All right. We've gone ahead and created our component. And we also have a Scroll Group inside of that component. I'm going to very quickly move the Candle chart on top of the Line chart. And now we want to do is create an additional state that will allow us to transition to our 30 minute time period. And very quickly before we do that, I'm going to dive in here, make a few very quick changes to our Line chart, just so that it matches the candles a little bit more closely. It's not perfect, but it'll do. So, back within our Properties Inspector, we're going to press the plus button one more time to create a new state, which I'm going to call 30m, and with that created, we can now dive in and make changes.
Now, the first thing I'm going to do is I'm going to set the active state to 30 minutes. And I don't have these set up as components at the moment. So, I'm going to dive in here, select this background layer, copy it, hop over here to this background layer and then paste appearance. And I can do the same thing for this and this.
Now, the next thing I want to do is we want to alter these charts a little bit. Now on the 30-minute chart, compared to an hour chart, your line and candles may look a little bit more spaced out. So diving into the Scroll Group, I'm going to select both of these. And from either side I can go ahead and start scaling. I can shift these over if I need to. I can position them anywhere I choose but that looks pretty good, right about there. And we now have our 30-minute chart and we have our Default state, which is our Hour chart. But of course, we want to be able to interact with this while previewing our prototype.
So switching over to Prototype mode, what we'll want to do first is select the button that will trigger the first interaction. In this case, it's the 30-minute button. And with that selected, I'm going to click on the blue handle to the right. And then within the Properties Inspector, I can choose my destination state, which in this case is 30 minutes. And because we do want our charts to animate, I will keep Auto-Animate as the Type. I'll choose Ease In-Out with a duration of around 0.4 seconds. And now, if we press Escape to go back to the component level, we can go to our 30-minute chart, select the Hour button, click, and then choose our Default state. All the other properties will remain the same.
And with that done, we can go ahead and press the Play button at the top. We can cycle between our various charts, which will animate really nicely. And of course, you can go ahead and alter these lines and the individual candles if you choose. And we can also scroll to the left and to the right.
And that's how you can add animated interactivity using Auto-Animate in Adobe XD. In the next video we're going to be designing out a simple landing page for your web experience. I'll see you all soon.
Create two types of financial charts and take your designs to the next level using Auto-Animate. In this tutorial, you’ll learn how to make a line chart and a candle chart. You’ll draw out elements using the Line tool. Explore drawing both straight and curved lines and how to double-click on points to convert paths. Use the Rectangle tool to draw the candles for the second chart. Experiment with using the Confetti plugin to randomize and scale the candles, then add a Stack to control the spacing. Enable a horizontal Scroll Group and add a button component, then use component states to transition between the 30-minute and hour charts.
