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

Bannerify can detect supported animations created with Figma Motion and make them available as a Figma Motion entry animation. You decide which layers use it, just like any other Bannerify animation.

Detection never replaces an existing Bannerify entry animation automatically. Apply Figma Motion to individual layers or use Bannerify's existing batch layer actions to apply it to several layers at once.

Figma Motion is currently a Beta API. Figma may change its Motion data model while the API is in beta. See the Figma Motion API documentation for Figma's current API status.

Before you start

• Add a Motion animation to a layer inside your banner frame in Figma.
• Make sure the layer appears in the Bannerify timeline. If it is inside a group, component, or other layer, include the nested layer first.
• Load or refresh the banner in Bannerify after changing Motion keyframes in Figma.

Apply detected Motion in one click

When Bannerify finds supported Motion on layers that are not using it yet, a Figma Motion detected message appears above the banner timelines.

Click Apply to All Banners (n Layers) to apply each eligible layer's own supported Motion tracks across every banner frame currently loaded in Bannerify. The count includes all eligible Motion layers across the loaded timelines. Bannerify also enables Mirror Figma Motion Timings so the native offsets are used immediately. Existing exit and hover animations are unchanged, and you can turn mirroring off afterward to restore editable Bannerify timing ranges.

Apply Figma Motion to several layers

1. Open the banner frame in Bannerify and refresh it if needed.
2. Select the checkboxes for the layers you want to update, or use Quick Select Layers.
3. In Batch Layer Actions, open the Entry animation menu.
4. Choose Apply Each Layer's Figma Motion from the Figma Motion group.
5. Set the Bannerify entry timing you want and click Apply Animations to Selected Layers.

Bannerify applies each layer's own detected Motion keyframes. If your selection also contains layers without supported Motion values, those layers keep their current entry animation and Bannerify shows how many selected layers are eligible before you apply.

Apply Figma Motion to one layer

1. Find the animated layer in the Bannerify timeline.
2. Open its Entry Animation menu.
3. Select the detected animation from the Figma Motion group.

Bannerify combines all supported Motion tracks on the layer into a single entry animation. For example, position, opacity, scale, and rotation can animate together while keeping their own keyframes and easing.

Mirror the Figma Motion timeline

After at least one layer is using its Figma Motion entry animation, Bannerify shows Mirror Figma Motion Timings above the timeline. The label includes the number of Motion layers it will update, such as Mirror Figma Motion Timings (5 Layers).

• The one-click Apply to All Banners action enables it automatically.
• Leave it off to position or resize Motion animation bars using normal Bannerify timing controls.
• Turn it on to use each selected Motion animation's native Figma start and end offsets. Bannerify also adjusts the overall timeline to fit the longest selected Motion timeline.
• Turn it off again to restore the editable Bannerify timing ranges you were using before mirroring.

The Mirror toggle itself only synchronizes timeline timing. It does not apply Figma Motion to additional layers or replace any other entry animations. The one-click action applies eligible layers before enabling it; for a more selective opt-in, use the per-layer or batch workflow and then control mirroring separately.

For banners that are already animated in Figma, use Apply to All Banners for the closest match to Figma's native timeline in one step. Bannerify applies every eligible loaded layer and enables Mirror Figma Motion Timings automatically. Its overall timeline setting uses whole seconds, so the longest native timeline is rounded up to the next whole second when needed.

You can still add a separate Bannerify exit animation. For a clean handoff, place the exit animation after the Figma Motion entry animation ends.

Supported Motion properties

Bannerify currently reproduces these native Motion properties:

• Position on the X and Y axes
• Opacity
• Scale on the X and Y axes
• Rotation

Each property keeps its own keyframes, timing, and easing inside the combined Bannerify animation. Bannerify converts supported cubic-bezier and spring easing into the format used by its preview and exports. Very small visual differences can occur, especially with spring motion.

If an animation mixes supported and unsupported properties, Bannerify reproduces the supported properties and identifies the properties it cannot currently export. A layer with no supported Motion properties will not show a Figma Motion option.

The timeline notice identifies unsupported properties, including size, corner radius, auto layout spacing and padding, stroke or border weight, path trim, fills, strokes, or effects. The listed properties will not be animated in the exported file.

Refresh after editing in Figma

After changing a Motion animation in Figma, click Refresh All Banners in Bannerify, or use Refresh Banner Layers for the affected banner. Bannerify detects the latest keyframes. Layers already using Figma Motion stay opted in, while newly animated layers remain unchanged until you apply Figma Motion to them.

Preview and export

Figma Motion animations work with Bannerify's Play and Replay controls and can be scrubbed at any point in the timeline. They are also included when exporting to:

• CSS or GSAP HTML
• GIF
• MP4

Before exporting, review the Figma Motion detected notice above the timeline. It identifies when:

• Supported Motion was detected but has not been applied as the layer's Bannerify entry animation.
• A Motion layer contains properties Bannerify does not currently export.
• A Motion layer contains only unsupported properties and cannot be applied yet.

You can apply all supported, unapplied Motion directly from the timeline notice.

Troubleshooting

Some Figma Motion animations are missing from the export

1. Check the Figma Motion detected notice above the timeline for unapplied layers.
2. Click Apply to All Banners, or select Figma Motion from each affected layer's Entry Animation menu.
3. Review any unsupported property names listed in the warning.
4. Expand nested animated layers into the Bannerify timeline, then refresh the banner.
5. Confirm Mirror Figma Motion Timings remains enabled if the exported offsets should match Figma's Motion timeline.

Figma Motion does not appear in the animation menu

• Check that the layer has at least one supported Motion property.
• If the layer is nested, make sure it is included in the Bannerify timeline.
• Refresh the banner after adding or editing the Motion animation in Figma.
• For batch actions, make sure the current selection contains at least one layer with detected Motion values.

The timing does not match Figma Motion

First apply Figma Motion to the layers you want to use. Then enable Mirror Figma Motion Timings above the timeline to use their native start and end offsets instead of the custom Bannerify animation-bar positions.

The animation looks slightly different

Check that every animated property is supported. Cubic-bezier easing is reproduced directly where possible, while spring and independently eased tracks are converted for Bannerify's preview and export formats and may have very small differences.