← Back to Bannerify Video Tutorials

What this video covers

This tutorial shows how to animate banner designs from Figma Buzz with Bannerify, reuse those animations across multiple banner sizes, and export the finished banners to HTML, MP4 video, or GIF.

Things you'll need

• A Figma Buzz file with a banner design
• The Bannerify Figma plugin

Steps

1. Create a Figma Buzz file, then add a banner template or create a banner from scratch.
2. Open the Plugins panel, search for Bannerify, and run the Bannerify Figma plugin.
3. Click Load All Banners, then use the pop-out icon in the plugin header to open the full Bannerify animation timeline.
4. Apply animations to the layers in your first banner, adjust their positions on the timeline to stagger the timing, and preview the result.
5. Copy and paste the animated banner in Figma Buzz, then select a different ad size for the copied frame.
6. Click the refresh button in Bannerify and load all banners again. The animations from the original banner are automatically applied to the copied banner sizes.
7. To create an HTML export, click Export to HTML, choose the target platform and any additional settings, then export and download the zip file.
8. Unzip the HTML export and open its index.html file in a browser to preview the banners. For platforms such as Google Ads, use the upload-ready files in the _zips folder.
9. To create a video or GIF export, click Export to GIF/Video, choose an output format such as MP4 or GIF, configure any optional settings, then export and download the zip file.
10. Unzip the export to access the generated media files, or open the included index.html file to preview them together in a browser.

Useful links

• Watch the full video on YouTube
• Read: Using Bannerify with Figma Buzz
• Next: Animate and export banners to HTML from Figma
• Open Bannerify in the Figma Community