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: Create multi-scene animated banners in Figma - This tutorial shows how to use the Bannerify Figma plugin to turn multiple Figma frames into one animated banner with multiple scenes. It also demonstrates exporting the result as HTML, GIF, or MP4, and how to handle multiple banners and multiple dimensions.. Machine-readable page: /bannerify/tutorials/create-multi-scene-animated-banners-in-figma.md.

Create multi-scene animated banners in Figma

This tutorial shows how to use the Bannerify Figma plugin to turn multiple Figma frames into one animated banner with multiple scenes. It also demonstrates exporting the result as HTML, GIF, or MP4, and how to handle multiple banners and multiple dimensions.

← Back to Bannerify Video Tutorials

What this video covers

This tutorial shows how to use the Bannerify Figma plugin to turn multiple Figma frames into one animated banner with multiple scenes. It also demonstrates exporting the result as HTML, GIF, or MP4, and how to handle multiple banners and multiple dimensions.

Things you'll need

  • A Figma file with frames already created.
  • The Bannerify Figma plugin saved in Figma plugins.

Steps

  1. Open the Bannerify Figma plugin from the Actions menu or from Saved plugins.
  2. Load the current Figma frames as banners to see the default behavior, where each frame is treated separately.
  3. Select the frames you want in one banner, then use Wrap in new section to place them inside a section layer.
  4. Return to the banner loading screen, enable Use Figma sections as multi scene banners, and load the section.
  5. Adjust the timeline length and scene offsets so each scene animates in sequence within the same banner.
  6. Export the banner by choosing Export HTML or another format such as MP4, then download the zip file and open the preview in a browser.
  7. For multiple banners, duplicate sections, keep each banner frame the same size within its section, refresh the plugin, and load or export all banners together.

Useful links