How to add custom animations to your Figma presentations using Pitchdeck

Video Transcript

Today, I'm going to be showing you how to add custom animations to your presentations in Figma using the Pitchdeck Figma plugin.

The first thing we need to do is quickly install the Figma plugin by going up to the top left, going to the Figma Community, searching for the term "Pitchdeck", and you'll see a result called "Pitchdeck Presentation Studio" pop-up. All you need to do is click on the "Install" button on the right hand side, and once it says "Installed", and looks like this one, you can jump back into your project and we can get started.

To run the Figma plugin, you just right click anywhere, go down to "Plugins", and then click on "Pitchdeck Presentation Studio", and that's just going to open up the Figma plugin that we just installed a minute ago. In this tutorial, I'm not going to be running through all of the features of this Figma plugin, we do have some other tutorials which go into depth on how to use it; today I'm just going to be showing you a brand new feature called "Custom Animations" that lets you add custom animations to your slide elements Previously, you've been able to add lots of different preset animations; different fade-ins different scale-ins, all that sort of stuff, all preset; but today we're going to be creating our own animations that you can then add as custom animations.

To get started, we're just going to click on the "Custom Animations" button in the header of the Figma plugin. You can see here this has opened up a new interface that allows us to create custom keyframe animations using this little Figma plugin interface. The first thing we need to see is the animation timeline; the animation timeline works the same way as a regular CSS animation timeline; you've got zero percent and a hundred percent of the starting and end points of the timeline, and you can switch between those just by clicking on the timeline elements.

You can also add new keyframe to your timeline; if you want to add a keyframe at half, at 50, you put in "50" and click on "Insert New Keyframe", and that will insert a brand new keyframe into the middle.

To edit the properties of any keyframe, you just select the keyframe that you want to edit and then you go down here to the edit keyframe properties section and start changing some values. You can see here if I start changing the values the autoplay is actually going to update over here and give me a live preview. I'll just delete the "50" keyframe for the time being, and you can delete keyframes just by clicking on the keyframe and then clicking "Delete Keyframe" down here, and that will remove it from the animation.

We can see here that on the zero percent we're currently starting the animation at 170 pixels below; we've got a Y value of 170 pixels, and I'm just going to change the opacity down to zero; so what that's going to do is it's going to fade in from below, and it's just going to come up to the 100 keyframe which is where the Y position is at just a zero and the opacity is at 100. We're basically going from zero percent with an opacity of zero and a Y position of 170 pixels, and then we're ending on opacity at 100 and the Y position at 0, which is just the exact spot where it is in your Figma canvas; that's just a really simple fade in up animation.

The other thing we can do before we save this is just change the easing; if you do want to change the easing to something like "linear", to not have any easing, you can do that or you can use the other options like "ease in", "ease out", or "ease in and out"; these are just different options you have for adjusting the easing, and you can see what that looks like in real time at different speeds just by adjusting the live preview speed slider down here. This is a seven second version of the animation, or we can see what it looks like really fast and do half a second; that's just a really quick preview of what it's going to look like at that speed in your animation layers.

At the moment, I'm just going to save this as it is because I'm happy with the fade in up animation. I can also add stuff like scale and rotation, so if you wanted to add scale you can do that, you can make it scale in. You can add some rotation; it also rotates in as well; you've got these five properties to play with. I'm just going to name this "Fade Rotate In", and that's just underneath the "New Custom Animation Name"; I've called it "Fade Rotate In", and now I'm just going to add that new animation to my options by going down here in the bottom right and clicking "Add New Animation"; you can see here it's just telling us that we've added the fade rotate in to our animations.

Now if we go to our layers and open up the animation select box again, we can see down here underneath custom animations that we have our fade rotating option that we just added. To select that, we just click on "Fade Rotate In", and you can see there it's adding the animation that we've just created in our custom animations panel. As I've shown you before with the speed, we can actually slow this right down; if we want to do a super slow in animation in, I can actually add a delay on that so it comes in after a second, and that's what it looks like.

We can also update this animation if we decide that actually we want to change it a little bit. We can go back into "Custom Animations", open it back up, and to load an animation that you've already saved. You can just go up here to the "Saved Animations" drop down, click on that, and then go down to the animation you want to update; click on "Fade Rotate In", and you can see here it's just loaded up our saved properties once again. In this case, I might want to add a new keyframe in the middle of the animation where I add it at 50 percent. I've just clicked it at "50", and what I can actually do is I can copy/paste properties from different keyframes as well. If I want the properties from my "100" keyframe to be copied over to "50", I just click on the 100 keyframe then click on "Copy Properties", that's now copied it to the clipboard. If I click back on to "50", and then click on "Paste Properties", you can see here it's actually pasted those properties from 100 onto the 50.

What that means is I can now modify this to be different to 100 and have it as a middle frame in my animation. For example, I could do something a bit weird, like make it scale up really big and then come back in; this is adding a middle step at the 50 mark of the timeline, so I can make that I can make that go up to 2x or 2.5x, really whatever I want to do; in this case, I'm just going to add that scale keyframe and I'm going to click "Update Saved Animation". It has updated the animation for us, and because we've already got this applied, all we need to do to preview it is just click on the "Play" button up here. We can see here the updated scale keyframe has been added in and that's been added into our animation that we can see; I've just sped that up a bit, so you can see it again, and that's how you can go about updating the animations.

You can also fork the animation if you want to create a new animation but also keep the original one. You can go back into "Custom Animations", load up your animation again, and in this case maybe you want to add some more crazy rotation for some reason; you could then re-save that up here in the "New Custom Animation Name" box, so we're going to do "Fade Rotate In Big"; I'm going to enter that name in there, and instead of clicking "Update Saved Animation", I'm actually going to click on "Add New Animation" again. That's added "Fade Rotate In Big" to our animations, and now you can see here I've still got my "Fade Rotate In", but I've also now got another option "Fade Rotate In Big", which has our variant that we just added a minute ago. That's a way that you can really easily fork or change animations based off an existing animation, and also update existing animations, too.

If you do want to delete an animation, you can do that as well. Just click back into "Custom Animations", select the animation that we just added, and down here we're going to click on "Delete Saved Animation", and deleting that saved animation removes it and automatically sets the animation back to nothing. This is now not animated, because the animation has been deleted; but of course, we can go back in and re-add another animation and that will add it back onto the element.

That's that's a rough overview of what it looks like to create custom animations in the Figma plugin for your presentation. You can create as many animations as you like, you can update them, save them, delete them; really do anything you want, the creativity is really up to you. You can add as many keyframes as you like, make the animation as complex or as basic as you want; I created another one earlier which is just a basic scale up and right one; I'll give you a preview of that, and that's just a really subtle animation to add in that little photo. If we wanted to see how that looks, I can open up my animations panel, click on "Scale Up Right", and you can see here it's a really simple animation. All I'm doing is I'm starting it off at 200 pixels down, the Y position is 200 pixels, starting at with an opacity zero, adding a little bit of negative rotation on there, I'm starting the scale at about half, and then I'm scaling it up to 1.3x, reducing the amount of the rotation to zero so it just rotates back to its original rotation, scaling up the opacity, and then I'm making it the X value go a bit to the left; and finally it just goes back to its initial position at the 100 mark. You end up where it actually is in the Figma canvas; that's what it looks like, that's how you can go about adding completely custom animation timelines to your Figma presentations.

It's worth noting that these animations will only be visible when you use the "Pitchdeck Web URL" export setting. I've got another tutorial on all the export settings, but just briefly, if you click on "Export Presentation", all of the animations that you've just added will be usable in the web Pitchdeck Web Presentation, but they won't get carried over to any of the other export options; for example, a PDF deck won't have any animations, neither will any PowerPoint or Keynote or Google Slides files that you export from the Figma plugin. The animations are just for the presentation that you run in the Pitchdeck Web App, but the other ones won't have any animations at all; it's just worth keeping that in mind if you are using the animation feature in the Figma plugin.

I think that's a good overview of creating the custom animations in Figma; really, it's up to you to go ahead and unleash your own creativity and build out your animation timelines as you see fit for your own decks. I hope you have fun with it, and until next time, thank you again for watching; we'll be back soon with more Figma tutorials just like this one.