How to export animated banners from Figma to GIFs using Bannerify

Video Transcript

Today I'm going to be showing you how to export your animated banner designs from Figma to GIF files that you can use online for any ad network, or if you just want to use them on your website, or anything like that.

The first thing we need to do is install a Figma plugin called "Bannerify", and if you haven't already done so, you can jump into the Figma menu in the top left hand corner, if you click on the little Figma icon, and if you just go down to "Community" or "Plugins", and in the search bar just type in the keyword "Bannerify"; if you click on the "Plugins" tab you'll see a result called "Bannerify" pop right up. The next thing you want to do is go over to the right hand side and you'll see an "Install" button; if you click on that "Install" button it'll change to look like mine where it says "Installed" and has a little check mark. Once you see that check mark it means that you're ready to go and you can jump back into your Figma project.

I'm just going to be using a banner set that I designed as a bit of an example; we're going to export all of these banners into a GIF file which is animated, based on the animations that are being set up in the Bannerify Figma plugin. The first thing we need to do now that we've installed the Figma plugin is right click anywhere on the page go down to "Plugins", and then the top result in my menu is "Bannerify"; you just want to click on that Bannerify plugin and this will load up the Figma plugin that we've just installed.

What it's going to do is just load up all of our parent frames in the left hand side here and it's going to parse those as banners; each of those frames is one banner, and then each of those sub-layers inside of each frame becomes a layer inside of the banner for each one. Those can have animations applied to them, as you can see here I've already got some animations set up, I can preview that in the window here. It has just got some very simple animations set up on all of these, and I'm not going to be showing you how to use all the animation features in this tutorial, but I do have another tutorial on the YouTube channel that you can find which goes in depth into how to use all of the animation tools, how to set up easy delays and bulk apply animations to different layers, but in this tutorial I'm just going to assume that you've already set up your animations the way you want, and you just want to export these banners from Figma to GIF files.

I'm happy with my animations, I'm pretty pleased with the way that they look, and all I want to do is just export them. All we need to do is click on this button in the top menu bar, which is called "Export to GIF/Video"; if I click on that button that brings up the settings panel for this feature; it's telling us that this is going to let us export our banners to either a GIF or a WebM video and it's just letting us know that the banners are going to be played through in real time and rendered out, and we're going to get a zip file when it's complete. We've got a couple of options here; the first one is in regards to looping the GIF, if we want our GIFs that are exported to infinitely loop then we can check this box, which is enabled by default. If you don't want your GIFs to loop and you just want them to play through once and then stop at its final frame, you can uncheck that option and that will remove that ability from the exported GIFs from Figma; in this case I'm going to leave mine to loop. Then the other option we've got is output quality; this slider here you can slide up and down and that will change the compression or the file size and quality that the GIF is going to be exported at from Figma. You can you can slide that up and down, I'm just going to leave it at let's say 65 in this case. The final export option we've got here is the preview page option; this little checkbox is just letting you set dark mode for the HTML preview page that it's going to generate. Once the GIFs are all exported you will get a little "index.html" file which you'll be able to open in your browser, as we'll see in a minute, and that will serve as a way to preview all of the GIFs at once; and it's just a really nice thing that you can upload onto a server somewhere and send it around to your clients or send it around to your team for an approval stage. This little check box just turns on dark mode for that page, if you turn it off it's just going to render it out with a light gray background the same as the Figma background; I'll just leave that off for now.

So, now that we've set those settings up the way that we want, we simply just click on the "Export to GIF" button, and that will start the process. I've got 11 banners in this design and what the Figma plugin is doing right now is, it's first of all playing through the banner; you saw a second ago, it's just playing through all of the keyframes and that's essentially capturing the animation in real time, and then once it's finished capturing it the second phase of the export process per banner is to then render those frames into a GIF; that's what you can see it doing right now, and you've got a little progress indicator per GIF whenever that happens. Depending on how many banners you have and depending on how long each banner plays for, that will roughly determine how long the export process will take; effectively you'll need to let it play through all of your banners, and as I said in this case I've got 11; you might have less or you might have more, but if you just let it keep going it will eventually export all of these into a zip file and you'll be able to open them up. We're going to have a look at that in just a second; I'm just going to speed this video up in a moment just so it finishes up at the 11 mark, and just so you don't have to sit and watch the whole thing, but this is the process that you will you'll go through.

Okay; that's just finished up and now it's at the final stage of just zipping the GIF files into a zip file; this typically doesn't take too long, as it's basically just going through all of the GIFs that just generated and it's zipping them up into a single file; you'll be able to save this and then double click to open it in just a moment. We'll see that show up in just a second; okay, that's just finished and once it completes you'll get a prompt to download this to your desktop or download it to your computer. By default, it will just use the the date and the time, and you can obviously change that file name if you'd like, but I'm just going to leave it as the default and click "Save" to send it to my desktop. So, that's the process; the banners are now ready, it's telling us that we can unzip the contents of the file to the computer. I'll open up my desktop and I can see here I've got my zip file which I can now open, and there we go, we've got our entire folder of GIF files from Figma. I can either open these up with preview, or I can preview them on my file system just using Mac finder, and that will just play through; or, as I mentioned before it comes with this little "index.html" file, and I can actually open that up just by double clicking it, and that will open it up in Chrome.

That's what our preview page looks like; you can see now, it's just generated all of the banners that we exported in one place, and it's just going to play through them on a loop because we set that infinite loop option in our Figma plugin settings earlier. It's worth noting this page is also fluid and responsive, so if you do want to view this on different monitors or you're sending it to a client, it will automatically rearrange the banners so it fits to their screen. You can you can resize that as as much as you want and it will always look nice with a grid of different export banners; that's what it looks like, that's all of our GIFs from Figma playing at the same time. If we just want an overview of of all of them you can see here they're looking really nice, they're looking very smooth, the frame rate should be about 30 frames a second and you're really getting very, very smooth animations. There'll probably be an export option in the future where you'll be able to specify the frame rate, which I think will be useful, but at the moment it'll just export it by with this default option set.

That's our whole folder you can see here, all of them are individual files, too. These are all being loaded into that "index.html" file as a preview, but of course these are the real files that you can actually use and and send around or upload onto your website, or upload to your banner network or your ad platform, and you'll be able to use that to advertise your products or services for you or your clients or whatever use case that you have.

So there we go; it's really simple, as you saw, just a one-click process once you've set up all your animations in the Bannerify Figma plugin. As I said, if you're interested in seeing what that looks like, we do have another video on that which goes really in depth into how to structure the animations and set those up really easily, but this was a highly requested feature for the Bannerify Figma plugin; being able to export animated GIFs from Figma from your animated banner designs that you were already exporting to HTML in most cases.

I just wanted to give this quick tutorial today to show you what that new feature looks like and what the output looks like. Hopefully you'll find it useful in your own process with your own team, or your own agency, and if you have any feedback please let us know, as we're always trying to make this Figma plugin as good as it can be. That's all I have for you today, and I'm sure there'll be more improvements in the future that I can go through in another video, but thank you as always for watching, and we'll be back very soon with more Figma tutorials just like this one.