Exporting your banners to animated PNG image

Once you've finished animating your layers in the timeline, you can export your banners to animated PNG (APNG) files.

Video Tutorial: Export banners to animated PNG (APNG) images from Figma

This video tutorial is a complete step-by-step guide showing you how to export production-ready animated banners from Figma to animated PNG (APNG) images using the Bannerify plugin.

After you've clicked the Export to GIF/Video and configured your export settings, you can click the Export APNG button at the bottom of the export panel to begin exporting your banners from Figma to animated PNG images. This will export your animated banners to animated PNG image files.

Browser Support. Due to browser compatibility issues, Animated PNG images can only be exported using Chrome or the Figma Desktop App.

Including or excluding banners in your export. By default, all of the top level layers in your Figma file that are loaded into Bannerify as banners will be included in your export; if you would like to exclude any banners from being included (without re-loading the selected banners in), you can toggle the Include Banner in Export switch in any banner's timeline header to "off"; this will hide that banner's timeline and also exclude it from being added to any exports.

Frames Per Second ​

You can change the framerate of your GIF exports by using the Frames Per Second select box options. You can select from the FPS options below:

  • 60 FPS (Ludicrous Mode)
  • 30 FPS (Ultra Smooth)
  • 24 FPS (Smooth)
  • 18 FPS (Less Smooth)
  • 12 FPS (Least Smooth)
  • 6 FPS (Jittery)

Higher FPS will take longer to render. Please note that more frames will take longer to export and ouput larger file sizes. For example, exporting a 5 second timeline at 24 FPS will render out 120 frames per banner.

Downloading the final PNG .zip file ​

After Bannerify has finished processing your banners, you'll be shown a confirmation message; you can download your .zip file containing your exported banners by clicking the Download your .zip file button.

Saving file downloads from Figma If you're using the Figma desktop app, you'll see a prompt appear to download your file. However, if you're using Figma in a web browser, your file will automatically be downloaded to your computer by default (usually to the Downloads directory on your computer).

Opening your PNG .zip file ​

After you've downloaded your .zip file from Figma to your computer, you can open your file explorer to the directory where it was saved. Double clicking on the exported .zip file will unzip the contents and let you use your banners however you like.