How to export animated banners from Figma to MP4 Videos using Bannerify

Video Transcript

Today I'm going to be showing you how to export animated banners from Figma to MP4 video files automatically with one click.

We're going to be doing that by using a Figma plugin called Bannerify. If you haven't already done so, you can install this Figma plugin by going to the top left hand side of the app, clicking on the little Figma icon, and if you go down to "Community" and search for "Bannerify"; if you click on the "Plugins" tab you'll see a result called "Bannerify Banner Ad Studio" pop-up; then you just want to go over to the right hand side click on the little "Install" button, and once it looks like mine, with the little check mark, then you're ready to go, and we can jump back into our Figma file.

I'm just going to be using this banner set as an example to show you what it looks like. The first step is just to right click anywhere on the page, go down to "Plugins" and click on "Bannerify Banner Ad Studio", and that's just going to fire up the Figma plugin we just installed. What this does is it processes every parent level frame as a banner and it interprets those into the user interface, so every layer inside of the frame becomes an element in the banner and those can be animated individually, and looped, and have timings put on them. Today I'm not going to be showing you how to go into the animation settings and apply animations and things like that. I do have another tutorial that covers that in depth; if you check out that video on our YouTube channel you'll be able to find it, and it goes into depth about how to apply animations and do all that sort of stuff, but today I'm just going to assume that you've already got your animations set up the way you want, as I do in my file here; and all I'm going to be doing today is showing you how to export these animated banners from Figma to MP4 video files from our designs.

This is a brand new feature and this is the first tutorial that I've made about it, and I just want to show you how to use it. If you've got your animation set up the way you want, all you need to do is click on "Export to GIF/Video" up in the top header panel of the Bannerify Figma plugin here. If you click on that, you'll get a little panel pop out with a few options; and the first one we can ignore because it's related to GIFs, I have a separate tutorial on GIFs if you're interested in seeing what that looks like to export, but then these two sections down here are what we're interested in; the first option is the "Frames Per Second", so we can actually control how many frames per second our MP4 video exports are going to be exported at. By default, that's just set to 24 frames a second, that's like a fairly smooth animation. but if you really want an ultra smooth animation you can go up to 30, or if you want to have less frames and have a less smooth animations, you can do 18, 12, or 6 as well; the higher the frame rate the smoother the animation will be, but it will also take longer to export, and the file sizes will be higher with more frames per second. Having said that, I'm still going to use 24 frames per second, which is a fairly smooth option and it's just letting us know that our timeline is 5 seconds long, so exporting it at 24 frames a second will render it out at 120 frames per banner in this case; it's just a heads up of how many frames you're going to be exporting per banner.

Then finally, we've got an image compression setting; if we do want to change the quality of the images or the the MP4 videos that are being exported from Figma, we can just drag that up and down; and the higher the number the better the quality will be, but also the larger the file size will be. The very last option we have is just to enable a "Dark Mode" option for the HTML preview page that gets exported; when you do export your MP4 video files from Figma, this automatically generates a preview page which which contains all the videos on a preview page that you can send to clients, and we'll see what that looks like in a second. In this case I'm just going to leave the dark mode option turned off, but you can use that if you if you want to.

At the bottom here we've just got three options; we've got "Export to WebM", which is another video format, we've got "Export to GIF", and finally we've got "Export to MP4", which is the one we want to look at today. All I need to do is click on the "Export to MP4" button, and what this is going to do is it's going to go through every single banner in our banner set, and it's going to essentially render those images or those frames for each animation into video files, and then it's going to encode them on the fly to MP4 videos, and in this case the MP4 video files that are going to be generated from Figma are encoded with the h.264 codec; if that's of interest to you that is the codec that's being used, and that's a really good compression algorithm; the MP4 files that you're going to get from Bannerify are going to be really size efficient, they're going to be a really good file size, certainly compared to GIFs, which can be huge, because GIFs just don't compress very well, and even compared to WebM videos which Bannerify also supports; WebM videos tend to be much larger in file size, too. So, MP4 videos can be a really good option if you do want really good compression but also while maintaining really good video quality.

I'm just going to let this continue to export all of our banners and I might just fast forward this bit, so you don't have to watch it all; but we're just going to let it go through all of the 11 banners, and once we're done it's going to give us a zip file with all our videos.

Okay, it's just finished exporting all of our MP4 video files from Figma and it has given us a little download prompt, and I'm just going to save this to my desktop with the default file name and click "Save". If I jump to my desktop I can now unzip this file, it's a 1.3 megabyte file, I'll unzip that, and we can see here it's exported all of our MP4 video files; we've got all the MP4 files, we can we can preview those individually, so that's looking really good, but rather than doing it one at a time I can actually just open this up in Chrome using this "index.html" file and look at them all at once. I'll just do that now; okay, so that's all of our banners playing at the exact same time, it's just going to keep looping those, they're just videos, so if I enable the controls here you can see that it's playing back in the browser and the preview page has a loop setting on the video tag. You can you can use these videos on your own website, or upload them to Instagram, or upload them to whatever you need to upload them for in your particular case; but these are just plain MP4 video files using a video tag on this particular page. This is a page that you could send to your clients or sent to your team members to give them a really quick and easy overview of all of your different banner sizes at the exact same time, previewing those MP4 video files that we've just exported from our Figma banner designs.

That's what it looks like. It's really simple, it's a completely automated process; you don't need to do any manual video editing, any manual video encoding, Bannerify will take care of all of that for you, and export those MP4 files from Figma really quickly and easily just as we've had a look at now in this Figma tutorial. I'm just going to close that off, and close off the Figma plugin.That's all I wanted to show you today; it's a brand new feature in Bannerify that has been highly requested, so I'm really glad that it could be added to the Figma plugin, and if you've had a look at our other tutorials, you know that you can export to HTML as well; there's a whole bunch of formats that Bannerify supports, whether that be banner ad networks, or HTML/CSS or Bannerify to HTML Canvas or Bannerify to GSAP; it supports a whole bunch of different formats. You can dig into our other Figma tutorials, or better yet just download the Bannerify Figma plugin and install it, and you can have a go yourself; whether you want to export your banners to MP4, GIF or WebM; whatever you need to export, Bannerify will have you covered.

I hope you enjoyed that Figma tutorial, and if you've been looking for a way to export Figma to MP4 videos from your banner designs, or banner animations that you've got setup in Figma using Bannerify, you can now export those to MP4 videos directly from Figma with one click. Until next time, thank you as always for watching, and we'll be back very soon with more Figma tutorials just like this one.