in this video we’re going to take a look at how you can combine a drag trigger with auto-animate to create a pull to refresh style interaction using Adobe XD.Read More
In this video we’re going to look at creating an animated FAB (floating action button) menu using Adobe XD.Read More
Bring your charts to life
Let’s face it. Charts are typically not the most exciting elements to design and work with, so in this videos, let’s take a look at how Adobe XD’s Auto-Animate can add a touch of life to your designs.
WHAT YOU’LL LEARN IN THIS VIDEO
Create charts using the line tool
Add curved points
Animate your charts using Auto-Animate
+ VIEW TRANSCRIPT
Hey, everyone – I’m Howard Pinsky – Senior XD Evangelist at Adobe. Let’s face it. Charts are typically not the most exciting elements to design and work with. Let’s take a look at how Adobe XD’s Auto-Animate can add a touch of life to your designs.
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.
Create an animated number counter
A while back I posted a simple number counter on Dribbble, and a bunch of you wanted to know how it was done, especially the speed variation of the number columns. So let me show you how you can achieve this in just a few minutes.
WHAT YOU’LL LEARN IN THIS VIDEO
Creating object masks
Animate between artboards
+ VIEW TRANSCRIPT
Hey everyone – I’m Howard Pinsky – Senior XD Evangelist at Adobe. A while back I posted a simple number counter on Dribbble, and a bunch of you wanted to know how it was done, especially the speed variation of the number columns. So let me show you how you can achieve this in just a few minutes.
Your first task is to decide how many numbers will appear in the sequence. For this example, we’ll go with three. Grabbing my type tool, I’m going to type out the first sequence vertically, containing just one set of numbers from zero to 9. Once that’s done, I’ll duplicate the layer over to the right, then edit the layer to include a second set of numbers, which I can easily add with a copy and paste. Finally, the third set can be duplicated and edited just like the previous one.
Great. Now that we have our three columns, we obviously don’t want all the numbers visible – so we need to set up a mask. With the rectangle tool, I’m going to draw out a box overtop of the first row, leaving just a touch of room above and below. With that in place, I’ll select all the layers that make up this counter, then choose Mask with Shape under the Object menu. This will hide everything except what’s positioned within the rectangle we drew just a moment ago.
Now that the starting point is ready to go, let’s set up the ending point. I’ll duplicate this artboard by dragging it to the right with my Alt/Option key held down, then jump into the mask and select the first column. You can quickly select an individual element within a group, mask, or symbol by holding down your Command/CTRL key and clicking on the layer you need. For the first number, I’ll set it at 2. On to the second column, I’ll want to make sure to move past the first set of numbers. Let’s go with 6. Finally, the same for the third column, making sure to move it past the first two sets. 9 it is.
With all three numbers in place, it’s time to wire this up. In prototype mode, I’m going to select the entire artboard and drag the blue handle to the second. This will let me kick off the animation after a set duration, somewhere around 0.8 seconds. Under Action, I want to make sure Auto-Animate is selected, then for the easing, I’ll go with In-Out with a duration of 4 seconds.
Great, let see this in action. The play button at the top will launch the Desktop Preview, and after a short delay, the numbers spring into action, and depending on the scope of the project, I can wire the second artboard back to the first to create a looping animation.
And that’s all there is to it. You can do this with one number, 4, or as many as you need. I hope you all enjoyed this short tip and if you want to check it out for yourself, I uploaded an XD file on Dribbble for you all to download, and for more XD tips and tricks, definitely check out my other videos. I’ll see you soon.