How to export banners from Figma to animated WebP images using Bannerify

Video Transcript

Today I’m going to be showing you how to export your animated banners that you’ve designed in Figma to animated WebP image files, directly from Figma, using the Bannerify Figma plugin.

To get started all you need to do is just jump into Figma and click on the “Resources” icon in your file up at the top here; click on “Resources” and then just search for the word “Bannerify”, and if you click on the Bannerify result, you’ll be able to then run the Figma plugin by either clicking this “Run” button here; if you click run that will open up the Figma Plugin, or I’d also recommend clicking on the “More options” button and then clicking on “Save Figma plugin” and that’s just going to save the Bannerify Figma plugin to your plugins list so you can access it again easily later.

I’ve already added it to mine, so I’m just going to go to my Figma file and I’m going to right click, I’m going to go down to “Plugins” and then go to “Saved plugins” and then I’m just going to click on “Bannerify”, and that’s just going to run the Figma plugin that we just installed a minute ago.

To get started, all you need to do is click on any frames that you’ve got on your page; if you’ve got a bunch of frames in different sizes for different size banners and each of those banners will have layers in them, which are just the content layers of each banner, all you need to do is select the banners that you want to export or animate, and then in the Figma plugin just go down here and click on “Load checked banners”. I’m just going to load up a few to get started, and that’s just going to load in the banners that we just selected.

If you’re new to the Bannerify Figma plugin, I’m not going to be going through in detail how to actually use all the animation features and how to do all these other kind of fancy things. If you’re interested in that, there’s a whole bunch of other more detailed tutorials on that on the YouTube channel if you just go to the Bannerify playlist, you’ll be able to find a whole bunch of those. Today I’m really just going to be assuming that you’ve already got the animations set up for your banners the way that you want, and we’re just going to take those banners that you’ve already designed and export them out from Figma to animated WebP image format.

In this example I’ve just got a few banners with some very simple animation on them; we can preview what that looks like here, and instead of exporting it to HTML or a GIF today I’m just going to be exporting it from Figma to animated WebP. If you go ahead and click on the “Export to GIF/Video” button up here in the Figma plugin header; I’m going to click on that, and then you’ll see down here that there’s a few different export options. There’s a new one that’s now called “Export WebP” and that’s exporting it at 2x retina. The benefit of this is you can export this from Figma to an animated WebP image as opposed to a GIF file for example. With a GIF, you’re going to be exporting it out at 1x, and with GIFs there’s also the limitation of only being able to include 256 colors, so you always notice that the color palette of a GIF is a little bit washed out and lower kind of resolution or sharpness compared to let’s say a PNG file.

The benefit of animated WebP is it allows you to keep that quality keep that color range and also export it out in a file format that’s much sharper. To show you what that looks like, all you need to do is click on this “Export WebP” button, so I’m going to click on that now, and this is going to go through and export the three banners that I’ve selected and it’s basically going to convert each frame from Figma to a WebP file; and once it’s done that for every frame, it’s then going to take those WebP files and essentially merge them into one animated WebP image file from Figma. You can think of this as kind of like an alternate GIF format; a GIF is just a collection of frames rendered out into a single GIF file, and the same will happen with these animated WebP banners. It’s going to basically create a single animated WebP image file but inside of that animated WebP file there will be many WebP image frames that work in a similar way to a GIF file.

As I mentioned, it’s going to allow us to export it from Figma to animated WebP with much better quality, and it’s going to allow us to export it in a way that’s still fairly optimized, but also at 2x resolution. If you want to use this for your website or if you want to use this for a banner campaign and you want to keep those images looking really sharp, as opposed to using a GIF, exporting your banners to animated WebP from Figma is definitely an alternate format that you can use to do that. We’re just on the last one now, it’ll take a little while to convert some of these if they’re much bigger; I’m using a 24 frames a second animation as well, so it’s going to include a few more frames, but we’re on the last one now.

Once this is done, you’ll get a prompt to say that the banners are ready, and then all you need to do is click on the “Download your zip file” button and that’s just going to bring up the save prompt. In this example, I’m just going to save it to my desktop, click “Save”, and then you can see here I’ve got the zip file. I’m just going to double click that to unzip it, and then if we open up the zip file you can see here that we’ve got a new folder called “webp”; that’s where our animated WebP image files have been exported, and we’ve also got this index file. The index file is just a preview page, so I can drag that into my browser and you can see here that I’ve got the preview page with all of my animated WebP images that we just exported from Figma showing up. As you can see, they look really sharp and if we open up that in a new tab, you can see here they’ve been exported at 2x resolution, that’s retina resolution.

Just to give you a really quick comparison of what that looks like compared to a GIF, I’m just going to run this export function again, and this time I’m going to click on “Export GIF”. While that’s exporting, I’m just going to go through the support for the animated WebP image format as well. We’re just on “Can I Use” here, we’re looking at the “WebP” page, and this is just going to give us an overview of what kind of support the animated WebP image format does have; and as you can see it’s actually got very good support, basically all the major browsers support this format, with the exception of IE, which is now basically dead and isn’t supported anymore anyway. Apart from IE, you’ve got very good support across across the the board. WebP has actually been around for quite a while, it’s still not used as often as, let’s say, JPG, but WebP is actually a very good format for compressing images and having animated WebP images is even kind of a more new idea that hasn’t really been done as much compared to GIFs.

This is a pretty good format if you’re looking for an alternative to GIFs, and we’ll show you what that looks like compared to those GIFs right now. I’m just going to download my zip file once again, and I’m going to put that on my desktop, double click the zip file to open it, and this time I’m going to load up the GIFs page. I’m just going to jump into here and drag that onto my browser, and you can see here it’s exported the GIFs pretty much looking the same as what the WebP looks like, but if you actually compare these two; I don’t know how obvious it’ll be on the video, but if you compare these two, there’s a noticeable difference in quality. The colors don’t look as washed out, there’s way more sharpness in some of the details of the image, and if we compare those two in the isolated view as well, you can see here this is just a 1x GIF, and there’s a little bit of kind of washed out coloring that you can see compared to the animated WebP image, the animated WebP exported from Figma just looks a little bit more vibrant, and you’ve got that higher resolution as well.

As I said this is a really good alternative if you are looking for a different option to GIFs, and if we look at the file sizes, you can see that they’re actually quite comparable. This leaderboard is 2.1 megabytes for the GIF, and if we go to the animated WebP, that’s 3.6 megabytes;you’re getting double the resolution, you’re getting a much sharper image, and the file size difference is actually pretty negligible. That’s a really good option if you’re looking for a GIF alternative.

That’s basically it, I just wanted to run through a quick example of how to use this new export Figma to animated WebP feature in Bannerify. If you’ve been wanting to export your banners from Figma animated WebP images then this is the easiest way to do it in Bannerify, and if you are looking to do that, please feel free to try out the Bannerify Figma plugin. You can, as I said, go to the resources panel in Figma, or you can click on the link in the description below and that will allow you to get started and start designing banners to then export from Figma to animated WebP files. I hope that’s been helpful, and thank you as always for watching; we’ll be back soon with more Figma tutorials like this one very soon.