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

• 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 only synchronizes timeline timing. It does not apply Figma Motion to additional layers or replace any other entry animations. Use the per-layer or batch workflow first to choose exactly which layers should use Motion.

For a frame that is already animated in Figma, select all of its animated layers, choose Apply Each Layer's Figma Motion, and then enable Mirror Figma Motion Timings for the closest match to Figma's native timeline. Bannerify's 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 ignores the others. A layer with no supported Motion properties will not show a Figma Motion option.

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

Troubleshooting

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.