Video Tutorial: Create multi-scene animated banners in Figma

This video tutorial is a complete step-by-step guide showing you how to create multi-scene animated banners in Figma (and export to HTML or video) using the Bannerify plugin.

What are multi-scene banners?

By default, Bannerify treats each top-level Figma frame as a separate banner.

When you enable Use Figma sections as multi scene banners, Bannerify treats each Figma Section as one banner, and each same-size frame inside that section as a separate scene in the same timeline.

This is ideal when you want to sequence multiple creative states/messages in one banner export.

Bannerify follows the Figma visual frame layer order inside the section, so if you move the scene frames around in Figma, the scene order in Bannerify will update after you refresh and reload the banners.

Quick setup

1. Create your banner frames in Figma as normal.
2. Select the frames that should become scenes in one banner.
3. Right-click and choose Wrap in new section.
4. In Bannerify, click Refresh all banners to return to the load screen.
5. Enable Use Figma sections as multi scene banners.
6. Click Load checked banners (or Load all banners).

You should now see one banner per section, with layers grouped by scenes in the timeline.

Step-by-step workflow

1. Run Bannerify

Open Bannerify from Figma plugins.
If you use it often, save it to your Saved plugins list for quick access.

2. Confirm default behavior (optional)

Before enabling sections mode, Bannerify will load top-level frames as separate banners.

This is useful to verify your source frames are detected correctly.

3. Wrap scene frames in a Section

Select all frames you want to combine into one multi-scene banner, then use:

Right click -> Wrap in new section

That section now becomes your single banner container in sections mode.

4. Reload and switch to sections mode

Click Refresh all banners in Bannerify, then enable:

Use Figma sections as multi scene banners

Bannerify will now scan sections instead of individual frames.

5. Load section banners

Click Load checked banners or Load all banners.

You will now see:

• One banner per section
• Scene groupings in the timeline (Scene 1, Scene 2, Scene 3, etc.)
• Scene-aware layer labeling and controls

If you want Scene 3 to appear before Scene 2, or Scene 1 to move to the end, move the scene frames into the Figma visual frame layer order you want inside the section, then refresh and reload the section in Bannerify.

6. Adjust timeline length for scene sequencing

If scenes currently overlap, increase the timeline length (for example from 5s to 15s. and click Update timeline length.

Then adjust layer timings so each scene enters/exits in sequence across the longer timeline.

Use grouped scene timing controls to shift scene timing blocks more quickly instead of adjusting every layer one-by-one.

7. Preview and export

Use preview playback to validate scene order and timing, then export as needed:

• HTML export for ad/platform code packages
• GIF export for animated image output
• MP4/Video export for video deliverables

All scenes in a section are exported as one combined banner sequence.

Working with multiple sizes and multiple sections

You can duplicate sections to create additional banner sizes/variants.

On refresh, Bannerify will load each section as a separate banner, each containing its own set of scenes.
This lets you export multiple dimensions and multi-scene variants in a single batch.

Important requirement: scene frames must match dimensions

For frames to be treated as scenes in the same banner, they must have identical dimensions inside the section.

If one frame has even a 1px difference, Bannerify may exclude it from that section's scene set.

Example: if two frames are 269x250 and one is 268x250, Bannerify can load only the matching-size frames as scenes.

If this happens:

1. Make all scene frames in the section the exact same width and height.
2. Refresh the banners.
3. Reload the section banner.

Troubleshooting checklist

• Only some scenes are loading: verify all frames in the section have identical dimensions.
• Section changes are not appearing: click Refresh all banners and reload.
• Scene order is wrong: reorder the frames inside the Figma section, then click Refresh all banners and reload.
• Scenes overlap too much: increase timeline length and redistribute timings.
• Export looks different from preview: re-check layer timings and scene order after timeline changes.

Summary

Using Figma Sections with Bannerify is the fastest way to build longer, narrative banner sequences without forcing everything into one giant frame.

Design each scene as a normal frame, wrap them in a section, enable sections mode, then animate/export as one combined banner.