How to add cubic bezier easing to banner animations in Figma using Bannerify

Video Transcript

Today I'm going to be showing you how to add custom cubic bezier easing curves to your custom animations for banner exports from Figma using the Bannerify Figma plugin.

To get started, all we need to do is go up to the "Resources" icon here, and if you click on that and search for "Bannerify", and if you click on the Bannerify result, you can run the Figma plugin by either clicking on this "Run" button here, or I'd recommend clicking on this "More options" icon and clicking "Save Figma plugin", and that's just going to save the Figma plugin to your list for easy access later. I've already gone ahead and done that, so I'm going to go to my Figma canvas, I'm just going to right click anywhere, I'm going to go down to "Plugins", then I'm going to go down to "Saved Plugins", and just click on the Bannerify item, and that's just going to run the Figma plugin that we just saved a second ago.

The way that Bannerify works is it basically treats any Figma frames that are on your current Figma page as banners. I've got a bunch of different Figma frames here, and each of those just have a few text and image layers, and then these basically get treated as banners in the Figma plugin. You can choose which banners to load up, I'm just going to load up a few of them; I'm just going to load up these three for today, and load those in. Once it loads, you can see that all of the layers from each of these Figma frames basically get inserted into your timeline in the Figma plugin, where you can then apply animations, and we'll be able to then export those to either HTML, or GIF, or video files.

For this particular Figma tutorial, I'm not going to be going through all the different details of the Figma plugin, but I am going to be going through how to add custom easing to your custom animations. To do that we just click on the "Custom Animations" button in the header, and that basically brings open this keyframe editor that we can use to build our own totally custom animations. For example, if I wanted to make my keyframe animation go from left to the center; in this case, I'm just going 100 pixels from the left to the center, that's basically how you do that. Then that's the first keyframe, the second keyframe we can make that go even further to the right; if we wanted to do something like that, we could do that we can also add new keyframes. We can insert another keyframe at 50% or anywhere, and then we can make that keyframe do something totally different in the middle as well; we could make it kind of bounce or do any kind of keyframe. I'm just going to remove that one from now and I'm just going to keep this really simple for today.

In this particular case, I'm just going to add an animation that rotates from the left over to the right. In our first keyframe, I'm just going to set a bit of a rotation value on the keyframe, the first keyframe, and then you can see here on the right hand side it's just getting basically back to normal rotation, it's just going from negative 185 degrees to zero. We can see here that we've got a normal easing applied to it, in the animation easing drop down here we've got "Ease" selected, which is just the default easing. We can also change that to things like "Linear" which doesn't add any sort of jump or kind of effect to it, it's just a very linear path to path animation. Then there's also some other presets like "Ease In", "Ease Out" and "Ease In Out". But for today, we really want to add a new custom easing; if we can click on this "Cubic Bezier" option, and what that does is it allows us to paste in a custom CSS bezier.

If we click on this link here, it'll basically take us to this website where we can generate custom cubic bezier rules, and you can see here there's a few presets. If we click on these it'll show you what that transition is going to look like, what that easing looks like; we can change the category here, so if we want to do ease out, we can do ease out, we can do ease in, all different types of easings. In this particular case, I'm just going to stick with "Ease In Out", and I'm just going to set it to this easing over here, and we've got this easing that I kind of like. To copy it, we can just click on this little button down here and copy that, and if we go back to our animation, paste it into this input here, that will basically apply the cubic bezier curve that we've just added to the Figma plugin.

You can see here that the easing is much much different in the preview than it was with the typical default easing. If we switch that back to the normal easing, you can see here that it's basically very smooth, it's not 100 linear, but it's quite linear; not as linear as the normal "Linear" option, but if we then switch that back to our custom one to preview that, click on "Custom Bezier", and we've still got our rule in there. We've got our custom ease here, and you can see that it starts off very slow and then dashes much faster towards the end; this is how you can use custom cubic bezier easing curves to totally customize the easing in your animations.

To save the animation, all we need to do is give it a name; we can say "Cubic Ease", and we're just going to add that as a new animation by clicking "Add new animation". Now that we've got that added to our animations, we can now apply that to any of our layers just by changing the setting of that layer; for example, if we wanted to animate this button in like that, we could just go to the button, change the intro animation to "Cubic Ease" under the "Custom" group, click on "Cubic Ease", and now if we play that back again you can see here that it's basically doing the rotate animation that we added. If we play that in, that's just getting added in like a crazy animation now; probably not the best fit for this particular layer, but you can see what that looks like when we do add it in.

You can of course go back and edit that; if we decide it's a bit too crazy, we can go back in click on the "Saved animations" drop down, go back down to our "Cubic Ease" one that we saved, and then we can change this to be a little bit more reasonable. If we jumped back into the 100% frame and just made it end up at zero; instead of going to 100 we'll just go to zero, so it's just going to end up where it started. Then maybe we can add a bit of opacity change as well; on the first frame, I'm just going to make the opacity start at zero, and I'm going to make it fade up to one which is 100% on the second frame. To update the animation, we can save that update, so we can just click on "Update saved animation". If you wanted to save it as a new animation, you can do that as well, you could do "Cubic Ease New" and that would allow you to save it as a new one, if you click on "Add new animation", that'll basically create a fork or a copy as a new animation. In this case, I'm just going to click "Update saved animation" and update our existing one.

I've just updated the "Cubic Ease" animation, and if I go back to my timeline, you can see here that the update has automatically been applied to the existing selected custom animation that we had. If I click on play, you can see here that this time it's fading in and rotating in into the spot that it's originally appearing in in Figma, because we changed the 100 keyframe to be zero as far as the X translation goes. You can see that the cubic bezier easing is being applied as we'd expect; that's just getting thrown out now.

We can also export this as a GIF, or a video, or an HTML banner. I'm just going to copy this animation from my button; I'm just going to click on "Copy", and I'm going to apply that to all of the CTA buttons in my banner set. I'm just going to click on the quick select button, that's going to select all of the CTA buttons automatically, then I'm just going to click "Paste", and that's going to apply it, then I can just click "Apply" and that's going to apply my animation to all of the CTA buttons. If we now go to the top one, you'll see here that the rotation animations also now being applied to this button as well. Then we can export that out just by clicking on "Export to GIF/Video"; in this case, I'm just going to click "Export to GIF/Video", and today I'm just going to be rendering out to a WebM, just to do a quick video export. This will basically go through and export all of your banners in the timeline out to a video, and you can see here that it's rendering out all the frames from our timeline, including the cubic easing custom ease that we just added to the CTA button.

I'm going to click on "Download your zip file", I'm going to save that to my desktop, I'm going to open up the zip file, and if we open up that folder you can see here that we've got our videos exported, and we've just got this index.html file that we can use as a bit of a preview. If we drop that into the browser, I'm just going to drop that file in, and you can see here that it's playing back our videos as we'd expect; that's just going to keep looping because it's a preview page, and you can see here that the "Book Now" button is flying in from the left with our custom animation and custom cubic bezier easing that we created in Bannerify.

That's a pretty basic run through of how cubic bezier easing works, how it can be used in the Bannerify Figma plugin using a site like this or generating your own custom cubic bezier CSS easing curve, and then just copying that CSS cubic bezier path from here or whatever other site you want to use to generate it, and just dropping it into your custom animations easing panel whenever; you've got the "Cubic Bezier" easing option selected, that will let you paste that right in.

We'll leave it there for today; I just wanted to go through this new feature in Bannerify, so you can add custom cubic bezier easing curves now. This should make it much more flexible to customize the type of animation style that you want to use when you're creating custom animations for your Figma banners in Bannerify; hopefully this will free up your creativity a bit more, and allow you to create some really neat custom animations to export from Figma. Thank you as always for watching, and we'll be back soon with more Figma tutorials like this one very soon.