How to export banners from Figma to animated PNG (APNG) images using Bannerify

Video Transcript

Today I’m going to be showing you a quick Figma tutorial on how to export your animated banners from Figma to an animated PNG file using the Bannerify Figma plugin.

To get started, all we need to do is go to our Figma file, click on the little actions icon at the bottom here, and then search for Bannerify. Under the Figma plugins tab, if you click on the Bannerify result, you can run the plugin by either clicking on the run button down here, or I’d recommend clicking on the save icon down here. That’s going to save it to your Figma plugins list for easy access later.

I’ve already clicked on the save button, which is why it says “remove” now. I’m just going to go to my Figma canvas, right click anywhere, go down to plugins, then go down to saved plugins, and click on the Bannerify item. That’s going to run the Figma plugin we just saved.

If you’re new to the Figma plugin, the way that it works is it basically takes any frames on your page. These are just regular Figma frames, and it essentially treats those as banners. You can see here, I can load any of those into the Figma plugin. If I click on the “load banners” button, that’s going to load up all of my frames along with all of the child elements in those frames.

You can see we’ve got text layers, button layers, character layers, and these are all being reflected in the Bannerify timeline. I’ve already gone through and animated all of these layers, so I’m not going to be covering that in depth today. If you’re interested in how the animations work, which you can set by changing these options down here and adjusting the timeline features over here, you can check out some of the other videos on the YouTube channel or look at the documentation site.

For today, you can see I’ve got a bunch of frames that have been pre-animated with those animations I just mentioned. What we want to do now is export this out to an animated PNG file.

The way we do that is by going up to the “export to GIF/video” button up here. I’m going to click on that now. Then I’ll scroll down to the bottom where you’ll see the option called “export APNG,” which means “export animated PNG.” If we go ahead and click that button, you’ll notice we’re now exporting all of the banners we loaded in.

We’ve got five different banners, and it’s going through each of those, animating them frame by frame, and converting each of those frames into a PNG frame. Those frames then get exported as a single PNG file for each of the five banners. When this finishes up, we’ll be able to download them to our computer and check the output.

It’s just processing the last banner now. Once that finishes, it’s going to zip up all of those files. I’ll click on the “download your zip file” button, then click save, and unzip it on my desktop.

When I open that folder, you’ll see a folder called “APNG.” That’s where all of our animated PNG files are. Inside, we’ve got five PNG files. You’ll notice the extension is just a regular .png, but if we open any of those files, you’ll see they’re actually animated. It’s a single PNG file, but it’s an animated PNG file, a special type of PNG that you can use.

We can open them all at once in the browser. There’s a little index.html file in there. If we drag and drop that into a browser window, it’s going to load a preview of all those PNG files at once. That’s a nice way of getting a preview without having to open them individually. You can also send that page to your clients if you need approvals.

Alternatively, you can drag and drop the PNG files directly into the browser. You’ll see the image loading, it looks like a regular PNG, but it’s animated. That’s all the index page is doing: loading PNGs onto an HTML page to make previewing them easier.

This is an alternative to using some of the other export features in the plugin. As I mentioned, there are export options for GIF files, MP4 files, WEBP, WEBM, and of course, HTML as well. In this case, you might want to use the APNG format as an alternative to GIF because of its added benefits.

PNGs have a better color range than GIFs. GIFs have a limited 256-color palette, which makes them look washed out. With PNGs, you get a much wider range of colors, so the accuracy is much more noticeable if you export to PNG.

That’s something to consider if you’re exporting banners from Bannerify or Figma into an animated format. You can choose between GIF or animated PNG. By clicking the “export APNG” button, you’ll get all of those PNG files ready to use in whatever format you need for your banner ads.

I hope this has been helpful. If you’ve been wondering how to export your banners from Figma to the animated PNG format, this is a really easy way to do it with one click. You can now do that directly from the Bannerify Figma plugin.

Feel free to give that a try, and hopefully it helps with your animated banner workflow. If you’re interested in using the APNG format in your own campaigns, this should help automate that process.

We’ll leave it there for today. Thank you, as always, for watching, and we’ll be back with more Figma tutorials like this one very soon.