By Howard Pinsky
In this design that I’ve been tinkering with, I want to be able to cycle through the various weeks and display the corresponding chart, but instead of a simple cut or fade, I’d love if the charts were animated.
Before we get to that, let me quickly show you how the curved line was created. With the Line tool, I’ll drag one out across the containing shape, holding down my Shift key to keep it perfectly horizontal. Once created, I’ll set the border color to match the rest of the design, increase the size to around 9, then round out the caps.
Now for the points, I could just eyeball where each should go, but to make sure they’re accurate, I’ll select my artboard then turn on the Layout Grid. I already have one set up, but I created a 6 column grid with no gutter width, and set the margins to 72, which is how far in from the edges the shape is.
With the layout visible, I’ll double-click on the newly created line, then single click to create each point, making sure they’re aligned with the grid. Once they’ve all been placed, if I want straight lines, I can simply start pushing them around, otherwise I can double-click on each point to convert them into curves. I can now go through and shift these points up or down to create a nicely flowing chart, and when they’re all looking good, I can turn off the grid, make any necessary transformations, and move my details tag to align with one of the points.
Great – it’s time to animate! With the first artboard selected, I’ll duplicate it over to the right so I can start working on the second chart. This one will focus on the previous week, so I’ll go ahead and quickly alter the text layers to let the users know which period they are viewing.
With that out of the way, it’s time to edit the chart. A simple double-click will allow me to directly edit the path, and I can start dragging each point up or down to set new values. I can also use my arrow keys to move the points one or ten pixels at a time, and because this is a completely fictitious app, I don’t have any specific values in mind – so I’ll pop them anywhere. Now that the new chart is where I’d like it, I’ll make sure the tag is connected, then I’ll change the price a touch higher.
Now before we get animating, I’m going to quickly hop into the breakdown at the bottom and adjust the bars to better reflect my spending. I definitely spend way too much on burritos every month and clearly not enough on groceries.
Great, let’s bring this thing to life! Hopping into Prototype mode, I’ll start by selecting the text layer of the previous week then drag the blue handle over to the second artboard. Within the properties, I’ll want a user to be able to tap on the layer, then I’ll select Auto-Animate for the action. This will instruct XD to look at the differences between the two artboards, and animate the changes.
Finally, I’m going to set my easing to In-Out to slightly slow the animation a touch at the beginning and end, and I'll set the duration to 0.4 seconds.
With one wire created, I’ll also link the prototype in the opposite direction, selecting the inactive text layer on this artboard and dragging the handle back to the first.
Wonderful, it’s time to see it in action. The play button at the top right will launch the preview, and clicking or tapping on the linked layers will kick off the animations, and our once static charts are now filled with life.
And that’ll do it. A quick and simple way of creating animated charts using Adobe XD. Be sure to check out our other videos for more Adobe XD goodness. I’ll see you soon.
Add data visualizations to your designs with just a few clicks. Build fully-editable vector charts – line charts, area charts, bar charts, scatter plots, and more – based on real or random data. Get the Chart plugin from the XD Plugin Manager. Then pick the chart type and set the data source.
