Basic design requirements

Design must meet following requirements to properly export to video:

1️⃣ Connections: Must follow a single linear path and be established between top-level frames (or variants in component-driven animations) and not nested elements.

2️⃣ Interaction properties: Make sure the after-delay trigger and navigate-to action (or change-to for component-driven animations) are applied. You can use any of the animation types and effects offered by Figma, they are all supported.

3️⃣ Flow starting point: Must be applied to first top-level frame in your flow.

4️⃣ Components: If animating variant transitions in a component set, the first instance of your variant flow must be dropped into a top-level frame with a flow starting point applied.

For in depth guides covering how to setup, preview, and export your design to video, as well as manage your plugin account, see the "Getting started guide" in this community.

1️⃣ Connections

🛣️ Must follow a single linear path

Each frame (or variant) in your flow should have a single start and destination connection. Remove any connections that are not on the single path you'd like the video to follow.

#️⃣ Must be between top-level frames not nested elements

Make sure you haven't accidentally set your connection on a nested element. Remove connections to a nested element and replace with a connection between those elements top-level frames.

2️⃣ Interaction properties

⏳ After-delay trigger and navigate/change-to action are applied

Replace any interaction-based triggers (i.e. on-click, on mouse-up) with after-delay, and use the navigate-to (frame transitions) or change-to (component transitions) action.

🏃‍➡️ Use any of the animation types offered by Figma

Figma provides the below animation type presets.

• Instant: Immediately displays the destination frame when trigger is fired.

• Dissolve: Fades in destination frame, on top of the original frame.

• Push: Pushes out original frame as destination frame is moved into view.

• Move in/out: Slides destination frame into or out of view, above original frame.

• Slide in/out: Slowly offsets frame as dissolves, while move transition keeps original frame stationary.

• Smart animate: Looks for matching layers that exist across multiple frames. For layers that match, it recognizes what's changed and applies transitions to seamlessly move between them. We’ll explain how this works in the next section.

✨ Use any of the curves/effects presets offered by Figma

Animations (except Instant) have three effects settings that control behavior.

• Duration: Controls how long it takes in milliseconds to complete the transition from the time the trigger is fired. Can be set from 1- 10,000ms.

• Direction: Controls the direction of the move in/out, slide in/out, and push animations (left, right, down, or up).

• Easing & spring: Controls the acceleration of the transition between a starting frame and its destination.

3️⃣ Flow starting point

A flow starting point is where a prototype begins. Establish a flow starting point on the first top-level frame in your flow.

If there are no flow starting points in your design when you open the plugin, you’ll see a warning notifying you one is missing, and you won’t be able to export your design.

Note that the Figma player will still play your design even without a flow starting point, so make sure to confirm one has been applied, even if your design plays in Figma.

🔧 How to add a flow starting point

1. Select first top-level frame from the canvas or layer panel on the left.

2. Click the prototype button at the top of right sidebar to open prototype panel.

3. Click the "+" sign in the “flow starting point” section & choose a name.

4️⃣ Components

To export a component-based animation, an instance of the component set must be dropped into a top-level frame that has a flow starting point applied. Instances sitting directly on the canvas or with a flow starting point applied to the element itself will not export properly.

❌ Instance directly on canvas with flow staring point applied to element

✅ Instance placed inside top level frame with flow starting point applied to frame

🔧 How to fix

Remove flow starting point from instance, create a new top level frame, drop instance inside, then apply flow starting point to the frame.