---
url: "/bannerify/tutorials/create-multi-scene-animated-banners-in-figma.md"
description: "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."
---

# 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](/bannerify/tutorials)

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

## 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.

Within each Section, Bannerify orders same-size scenes from left to right and then top to bottom. Small alignment differences are treated as part of the same visual column, so scenes do not need to be positioned at exactly identical coordinates.

## Useful links

- [Watch the full video on YouTube](https://www.youtube.com/watch?v=_RJoxtwDC04)
- [Read the full video transcript](https://www.hypermatic.com/tutorials/how-to-create-multi-scene-animated-banners-from-figma-using-bannerify)
- [Read: Creating multi-scene banners using Figma Sections](/bannerify/design/scenes)
- [Next: Add video embeds to Figma banner exports](/bannerify/tutorials/add-video-embeds-to-figma-banner-exports)
- [Open Bannerify in the Figma Community](https://www.figma.com/community/plugin/796124491692147799)