How to add custom animations to your Figma banner designs using Bannerify

Video Transcript

Today, I'm going to be showing you how to add custom keyframe animations to your HTML and GIF/MP4 banners.

The first thing we need to do is just go to the Figma Community and install the Bannerify Figma plugin. If you haven't already done so, we can go to the top left corner, go to the search bar under Figma Community and just search for "Bannerify". You'll see a result called "Bannerify Banner Studio" pop-up, and if you haven't already installed it, you'll see an "Install" button on the right-hand side; you can go ahead and click on that, and once it's installed we can jump back into our project.

Now we're back in our project, we can right click anywhere, go down to "Plugins" and just click on "Bannerify Banner Studio", and that's going to open up the Figma plugin that we just installed. What it's doing is it's actually loading in all of our frames as banners; each of these frames is treated as a banner in Bannerify, and each child layer in those frames is treated as an element inside of the banner. If you've seen tutorials on this before, or even if you're just new to the Figma plugin, you see pretty quickly that we've got a whole bunch of different animation options here. These presets come shipped with Bannerify; we've got a bunch of entrances and exits you can change these to do different animations really quickly they're just really common presets, so you can use those as much as you want.

However, we've just shipped a brand new feature which allows you to create your own completely custom CSS based timeline animations. The way you can do that is just by clicking on this button called "Animations" in the header, and clicking on that will give you this brand new interface which allows you to create custom animations, and I'll just take you through that now.

The first thing you can see is we've got a place to give our animation a name; this is a required field, but you can leave that to last if you don't know what kind of animation you're actually going to create yet. We've got our saved animations over here, so if you haven't saved any animations at the moment this will be blank but I've already saved one, so that's just sitting under there as a saved animation. I can actually load that in if I want to click on that, and that will automatically load in an animation that I've created before. However, I don't want to use that one just now, so I'm just going to actually get out of that and jump back in and that's just going to start a brand new animation timeline for me.

Speaking of the animation timeline, we've got that just sitting right here. By default, it will always create two frames, the first frame at 0 percent and the last frame of the animation at 100 percent, and you can click through those animations just by clicking on either of those. You can also add new keyframes as well; you can see this little "Insert New Kyframe" button over here, and that will let you insert a keyframe at any point in the timeline; we'll have a look at that in a second.

Then the most interesting part is the keyframe properties settings; these five properties are what you can actually change to get the keyframe animations looking like they're moving, so we've got our X-axis; it's left to right, I can move that from left to right, or right to left. We've got our Y-axis; that'll go up and down. We've got our opacity; I can fade the element. Then rotation; if I want to rotate the element. Then finally, scale; if I want to scale that element up or down, I can do that by dragging on these.

You can see here that it's updating the live preview in real time, so whatever animation properties you change on any keyframe that will automatically get reflected over in the live preview over here. You can see exactly what the animation is going to look like.

Finally we've got our little animation easing options here; you can go through and change it, so if you need to be a linear animation you can select that option, that will remove any easing, or you can add easing in and out, or just in or out; and that's just going to change the way that the animation comes in and out of the of the frame. I'm just going to leave it on ease for now.

What we can do is we can create a simple animation just by changing these properties. What I can do is just put these at the defaults for now and then we'll go through and change it based on what we actually want the animation to do. In my case I'm just going to have it roll in from the right hand side, so what I want to do is I want to start the animation from the right. For example, I might do 100 pixels from the center, and then I want the animation to also fade in when it rolls in. I'm just going to change the opacity down to zero for the first frame, and the rotation I'm just going to change it now to be let's say 200 degrees. It's going to roll in 200 degrees from the right hand side, and I also want it to scale in; I'm just going to remove the scale or make that about half; that's going to scale in from half size and rotate in from the right and the 100 keyframe is still set on all the defaults; what that means is at a hundred percent it's going to end up exactly where it where it's positioned in your Figma design. It's going to be exactly from the left and the top, it's going to be a 100 opacity, no rotation and just the regular size.

That's actually what I do want, but I might also want to add more keyframes in between; maybe I want to do something once it gets to the middle of the timeline, so what I can do in that case is just change the the keyframe. I can change it to let's say "60" and click on "Insert New Keyframe", and what that does is it copies whatever frame I was already selected, it'll copy all those properties into a brand new keyframe and it will adjust it to wherever you've set it to at the percentage; in this case it's at 60 percent. What that means is it's actually not even starting the animation really until it gets to 60 percent of the way in. We don't actually want that to be the case, we want to actually change this so it's a little bit different; what I'm going to do is I'm going to copy the properties from 100 percent; copy that, and that will copy all of these properties, and now I can paste that onto my new timeline keyframe that I've just added. I'm going to click "Paste", and you can see there it has actually changed it; now 60 has inherited the properties from 100.

What I can do now is I can actually change that to be a different animation once it gets to 60 percent. I can have it go down; I can animate it in, so it ends up 100 and something pixels down. It's actually bouncing in from the right, but also bouncing down and then it's bouncing up once it gets to 100 percent. I can even change that a little bit; I could make it go scale up once it gets to 100 as well; if I wanted to scale that to 1.5x, I could do that, and now you can see we've just created this little timeline where it's going from the right hand side with rotation, half scale, opacity zero, and it's fading all the way in to the default but we've just set the Y position to be down; it's coming in from the right, and then on the final frame that's where all the defaults come back and the scale gets put up to 1.5x.

That's a nice little timeline, it's a interesting keyframe animation that you wouldn't be able to get from the presets. I'm just going to change that to a custom animation that we can use in our banners now. All we need to do is actually name this animation, so I'm going to call it "Bounce In Right", so that's the name that's going to come up in our options in a moment. All I'm going to do is click on "Add New Animation", so it's telling us that we've added "Bounce In Right" to our animations. What I can do now is I can actually use that by just clicking on any of the animation select boxes, and you'll see under a brand new heading called "Custom Animations", you can see that where we've just added our "Bounce In Right" animation; I'm going to click on that now and you can see it's loaded that in.

You can play that replay that here just by clicking on the "play" button, and you can see it's bouncing in from the right and bouncing up; I can actually change the speed of that just by moving this timeline over here and now it's actually slowed it right down. I can add a delay, so it only comes in after one second, and that comes in like that. I can shorten that, or make it coming straight away; but let's say that I'm not happy with that scale because it's just too big; I can actually still change that by just going back into the "Animations" panel. As I showed you before, we can go to the "Saved Animations" drop down, so I'm just going to click on that, and if we select the animation we've just added; the "Bounce In Right" animation, that's just going to immediately load that animation back up once again.

Okay, we've decided that we don't like that ending scale, so I'm just going to remove that and get it back to 1x, just at the default size, and we can see here that it's now not scaling up at the end. We're just going to get it looking exactly like it does in the Figma design, and we can actually preview the speed in here as well. If you want to slow that animation down just to see exactly what it's doing or preview it at the speed that you think you're going to use it at, you can use this little speed slider down here where you can change the speed from less than a second to make it really quick, or all the way up to 15 seconds to make it really slow. I'm just going to leave it at two seconds for now, and now that we've just changed the ending option we have two different ways to go about this now.

The first way we can go about it is by updating the saved animation, so clicking "Update Saved Animation" will override the animation that we've just added and that will update any layers that you've already applied the animation to in your timeline over in the the other window we're just looking at; that will override it the other option you do have is to create a new animation based on that edit; what we can do is we could do "Bounce Right", let's say v2; we can call it "v2" and we can click on "Add New Animation" and now it's added a v2 to our animation. You can see here this one is still the "Bounce Right" animation; we've still got that applied, but now we've got this brand new one which is basically forked from the "Bounce In Right" one, so if I click on that, you can see there it's ending on the the new scale that we set up.

We can do that, but I'll just show you what it looks like to override that as well. If we re-click on the "Animations" button, load up the saved new animation, the "Bounce Right v2"; okay, we've got that one there and what we can do is we can change this, so maybe we want the rotation to be like that; maybe it rotates up as well; I've just changed that on the 60 frame and instead of creating a new animation. I'm just going to click on "Update Saved animation", so now that's updated our "Bounce Right" animation, and because we've already got that applied, I don't need to reset it. If I just click on "play", you can see now it's loading in that brand new rotation part of the animation, so I didn't need to update it. That's that's pretty neat, because if you've already gone through and applied that animation to all of your banners or different places in the banners it will automatically update all of those for you.

There's a couple more little things that we can do if we re-click on "Animations", and load up the one that we just created. The other thing that you might have noticed is we can delete keyframes. Let's say we actually don't want this 60 percent keyframe anymore, we can go ahead and delete that just by clicking on the "Delete Keyframe" button here; you can see that's just removed the 60 percent keyframe entirely and left us with just the 0 and 100 again. In this case, it's really not adding that middle step of bouncing all the way down when it comes in, it's just going completely from the right straight over to the center or the original position; that's the the way you can go about deleting keyframes. It's worth noting that you can't delete the 100 or the 0 percent keyframes; those are those are blocked out purely because an animation just has to have at least a starting point and an ending point, and then it's up to you if you want to add any in between points or not.

We can do the same thing for animations. If we want to delete an animation; first of all I'm just going to update this saved animation, so that one's now updated, and we can see here that's just coming in from the right now. Let's say I want to delete one of my other animations, so I can delete an animation just by selecting it clicking on "Delete Saved Animation" down here, and now that's deleted the "Bounce In Right" animation. If I click on this, you can see here under "Custom animations", "Bounce In Right" is now deleted. If we were to delete the "Bounce In Right v2" when it's already selected, I can show you what that looks like deleting; that will remove it from the list, but also revert the animation to be "No Animation". That will just remove any animation on that layer, so that's worth being mindful of in case you've set that animation and now you need to add a new one, you can just go down and just change it to a preset or a different custom animation.

That's basically what it looks like to create custom animations for your banners in Figma using the Bannerify Figma plugin. Of course, these animations will get included with any export that you do, so if you're exporting this to a GIF or an MP4 video using the "Export to GIF/Video" feature here, those animations will get included; or you can export those to HTML, so you can you can export that to an HTML banner set, or a set of banners for different advertising platforms that you can select down here. Either way, you get all of those custom animations that you create using the Bannerify animation tool that we've just been looking at; those will automatically get included, so you don't need to code them, you don't need to use any video software or anything like that, all of those custom animations will automatically get included in your renders.

That's basically it; I hope it's been helpful if you've been wondering how to break out of the animation presets in Bannerify and create your own, now you can you can go crazy and go about creating whatever interesting keyframe animations that you want and use them in your own banners. I hope it's a useful feature for you, and best of luck if you do try it out; and if you have any feedback or questions, please let us know. Thanks again for watching.