---
url: "/bannerify/tutorials/export-banners-to-animated-webp-images-from-figma.md"
description: "This video shows how to use the Bannerify Figma plugin to export animated banners from Figma as animated WebP image files. It also compares Export WebP with Export GIF, showing that animated WebP keeps sharper, more vibrant output at 2x retina resolution."
---

# Export banners to animated WebP images from Figma

> This video shows how to use the Bannerify Figma plugin to export animated banners from Figma as animated WebP image files. It also compares Export WebP with Export GIF, showing that animated WebP keeps sharper, more vibrant output at 2x retina resolution.

[← Back to Bannerify Video Tutorials](/bannerify/tutorials)

[Embedded media](https://www.youtube.com/embed/-MsleYiQHIQ)

**What this video covers**

This video shows how to use the Bannerify Figma plugin to export animated banners from Figma as animated WebP image files. It also compares Export WebP with Export GIF, showing that animated WebP keeps sharper, more vibrant output at 2x retina resolution.

**Things you'll need**

- Figma installed with the Bannerify Figma plugin available
- Banner frames already designed in Figma
- Animations already set up on the banners

**Steps**

1. Open Figma, click the Resources icon, search for Bannerify, and run the plugin or save it to your plugins list.
2. In your file, right-click and open Plugins > Saved plugins, then launch Bannerify.
3. Select the banner frames you want to export, then click Load checked banners in the plugin.
4. When your banners are loaded and animated, click Export to GIF/Video and choose Export WebP.
5. Wait for Bannerify to convert the frames and merge them into a single animated WebP file.
6. Download the zip file, unzip it, and open the webp folder and index preview page to view the exported banners.
7. Optionally export GIF as well to compare the quality and file size against animated WebP.

**Useful links**

- [Watch the full video on YouTube](https://www.youtube.com/watch?v=-MsleYiQHIQ)
- [Read the full video transcript](https://www.hypermatic.com/tutorials/how-to-export-banners-from-figma-to-animated-web-p-images-using-bannerify)
- [Browse Bannerify tutorial docs](https://docs.hypermatic.com/bannerify/tutorials)