Documentation Index

For the complete documentation index, see llms.txt. Markdown versions of docs pages are available through the page's alternate Markdown link.

Current page: Export animated Figma Motion banners to HTML, MP4 video, or GIF - Learn how to import native Figma Motion animations into Bannerify, mirror their timing, and export the finished banners to HTML, MP4 video, or GIF.. Machine-readable page: /bannerify/tutorials/export-animated-figma-motion-banners.md.

Export animated Figma Motion banners to HTML, MP4 video, or GIF

Learn how to import native Figma Motion animations into Bannerify, mirror their timing, and export the finished banners to HTML, MP4 video, or GIF.

← Back to Bannerify Video Tutorials

What this video covers

This tutorial shows how to import native Figma Motion animations into Bannerify, apply them individually or across every loaded banner, control whether Bannerify mirrors the original Motion timing, and export the finished banners to HTML, MP4 video, or GIF.

Things you'll need

  • A Figma file containing a banner with supported Figma Motion animations
  • The Bannerify Figma plugin

Steps

  1. Open your Figma file, find Bannerify in the Plugins tab, and run or save the plugin for easy access.
  2. Run Bannerify from your saved plugins, then click Load All Banners to load the banner frames and their content layers.
  3. Switch the Figma file from Design to Motion mode and confirm that the banner layers contain the native animations you want to export.
  4. To import one animation, open a layer's Entry Animation menu and select its detected animation from the Figma Motion group.
  5. To import every detected animation at once, click Apply to All Banners above the Bannerify timelines.
  6. Leave Mirror Figma Motion Timings enabled to preserve the native start and end offsets, or disable it to reposition and resize the animation bars in Bannerify.
  7. Preview the imported animations in Bannerify and optionally combine them with Bannerify presets, custom animations, exit animations, or hover animations.
  8. To create an HTML export, click Export to HTML, choose plain HTML or a platform such as Google Ads, export the banners, and download the zip file.
  9. Unzip the HTML export and open its index.html file in a browser to preview the code-based animation.
  10. To create an MP4 or GIF export, click Export to GIF/Video, choose the output format and settings, export and download the zip file, then open the generated media or preview page.

Useful links