# Figma Motion Export Video _September 1, 2026 · 11 min read · by Systergon_ > Figma grew a video encoder, and Motion Path hands your animation straight to it. No screen recording, no conversion, no drift between what you previewed and what you sent — Figma encodes the same timeline it plays. **Answers the question:** figma motion export video **What this page is for:** How to export a Figma Motion animation as video — MP4, GIF or WebM — using Figma’s own encoder, including every setting in the panel and the top-level-frame rule that governs what can be encoded. URL: https://systergon.com/figma-motion-export-video Plugin: Motion Path for Figma — https://systergon.com/products/figma-plugins/motion-path Install: https://www.figma.com/community/plugin/1654530170219655744 ## Steps at a glance 1. **Apply the motion path** — Press Apply motion path so the frame has a timeline to record. 2. **Put the animation in a top-level frame** — Figma encodes frames that sit directly on the page. Nested frames are rejected. 3. **Open Export video** — Click the ⋯ button in the titlebar and choose Export video. 4. **Pick a format** — Choose MP4, GIF or WebM. The fields below change to match — MP4 and WebM get Quality, GIF gets Loops. 5. **Set frame rate and size** — Choose a frame rate from the list the format allows, and a size multiplier between 50% and 4×. 6. **Check the summary and export** — The summary line states the format, rate, size and quality. Press Export and Figma encodes the file. --- [Install Motion Path — it’s free →](https://www.figma.com/community/plugin/1654530170219655744) [See the product page](https://systergon.com/products/figma-plugins/motion-path) **The short answer:** animate your layer with [Motion Path](https://systergon.com/products/figma-plugins/motion-path), press **Apply motion path**, then open the **…** menu in the plugin titlebar and choose **Export video**. Pick MP4, GIF or WebM, set a frame rate and a size, and press Export. Figma encodes the file itself — this is not a screen recording and not a re-render, so what downloads _is_ canvas playback. That last point is the one worth internalising, because it changes what the file is worth. Everything below is the detail: the encoder, the rule about frames, every field in the panel, and how to choose between the three formats. ## Why this is not a screen recording The old workflow was miserable and everyone did it anyway: play the prototype, screen-record the canvas, crop the recording, convert it, and hope the timing survived. Three lossy steps between the design and the artefact, plus whatever your recorder decided about frame pacing. Figma itself grew a video encoder in Plugin API Update 131 (16 July 2026), taught to `exportAsync` an animated top-level frame. Motion Path hands your animation straight to it and pipes the returned bytes to a download. ![The video export pipeline: your timeline, then getTopLevelFrame resolving the frame from your selection, then Figma's own exportAsync encoder with your settings, then a downloaded MP4, GIF or WebM](https://systergon.com/motion-guides/diagrams/video-pipeline.svg) The plugin is a wrapper, not a renderer. It resolves which frame to encode, validates the settings against what the API accepts, and gets out of the way. Because Figma encodes the same timeline it plays, there is no drift between what you approved in the canvas and what you sent to the channel. ## Step 1 — apply the motion Export reads the applied timeline. The live preview in the panel is a simulation and writes nothing to the canvas, so an export taken before you press **Apply motion path** records a frame in which nothing moves. ![The Motion Path Animate tab: an object riding an S-curve in the preview, the Source and Animate rows, Essentials with duration, direction, loops and easing, an Effects section, and the blue Apply motion path button](https://systergon.com/motion-guides/shots/animate-tab.png) ## Step 2 — check the frame Figma encodes a **top-level frame**: a frame sitting directly on a page. Not a nested frame, and not a layer that merely has keyframes on it. Both of those are rejected by the API rather than silently producing something odd. ![A canvas tree showing a page containing a top-level frame named Hero, which contains the selected layer Ship; the frame is what gets encoded and the selection is resolved upward to it, with a panel listing what fails and what works](https://systergon.com/motion-guides/diagrams/top-level-frame.svg) In practice you never have the frame selected — you have the layer that moves, because that is what you were just animating. So the plugin walks up from your selection and finds the frame for you. Select either and it works. ## Step 3 — open Export video Click **…** in the titlebar and choose **Export video**, the third item. ![The Motion Path panel with the overflow menu open, showing Save as preset, Copy as code, Export video, Config JSON, Settings and Help](https://systergon.com/motion-guides/shots/menu-open.png) The whole flow, held a beat per step: ![A step-by-step loop: the Animate tab ready to apply, the overflow menu opening to reveal Export video, the Export video panel set to MP4, and then switched to GIF where a Loops field replaces Quality](https://systergon.com/motion-guides/shots/steps-video.gif) ## Step 4 — pick a format Three formats, and the panel adapts to each. That adaptation is not cosmetic: MP4 and WebM have a quality preset, GIF does not — it has a loop count instead, because that is the knob GIF actually has. ![The Export video panel set to MP4 with frame rate 30 fps, quality High, size 100 percent, and a summary line reading MP4 30 fps 100 percent high quality](https://systergon.com/motion-guides/shots/export-video-mp4.png) **MP4** — best for social, Slack and slide decks. Widely supported, small files. This is the default and it is the right default; if you are not sure, this is the answer. Detail in [the MP4 guide](https://systergon.com/figma-motion-export-mp4). ![The Export video panel switched to GIF: the quality field has been replaced by a Loops field set to 0, and the summary line reads GIF 30 fps 100 percent loops forever](https://systergon.com/motion-guides/shots/export-video-gif.png) **GIF** — best for email, READMEs and issue threads. It plays anywhere, with no player needed. Note the **Loops** field that replaced Quality: leave it at `0` and the GIF loops forever, which is almost always what you want. ![The Export video panel switched to WebM, showing the same frame rate, quality and size fields as MP4 with a WebM-specific description](https://systergon.com/motion-guides/shots/export-video-webm.png) **WebM** — best for the web. Smaller than MP4 at the same quality, and it supports alpha, so the animation can sit on whatever is behind it rather than on a rectangle of background. ![Three cards making the case for WebM: smaller files than MP4 at the same quality, alpha channel support for transparency, and universal current-browser support, with a caveat that support thins outside the browser](https://systergon.com/motion-guides/diagrams/webm-alpha.svg) The caveat on WebM is the one people forget. Inside a browser it is excellent. Outside one — a phone’s photo roll, a colleague’s presentation software, a messaging app — support gets patchy fast. If the file is going anywhere other than a web page, send MP4. ## Step 5 — frame rate Each format accepts a specific list of rates. These are literal unions in the plugin API, so a rate outside the list is not merely inadvisable — it is rejected. The panel only offers legal values, and if you switch format in a way that strands your current rate, it snaps to the nearest legal one rather than silently failing later. ![The Export video panel with the frame rate dropdown open, listing 12 fps, 24 fps, 30 fps with a checkmark, and 60 fps](https://systergon.com/motion-guides/shots/export-video-fps.png) - **MP4 and WebM:** 12, 24, 30, 60 - **GIF:** 8, 12, 15, 24, 30 30 is the default and is right for almost everything. 60 is worth it only for fast motion that a viewer will watch closely — it doubles the encoded frames. 12 is a deliberate stylistic choice, not a saving; it reads as stepped animation. ## Step 6 — quality and size Quality is a preset rather than a bitrate: Low, Medium, High. High is the default. Drop it when the file has to fit a size limit and you would rather lose fidelity than resolution. ![The Export video panel with the quality dropdown open, showing Low, Medium and High with High checked](https://systergon.com/motion-guides/shots/export-video-quality.png) Size is a multiplier applied to the frame’s own dimensions, from 50% to 4×. ![The Export video panel with the size dropdown open, listing 50 percent, 75 percent, 100 percent checked, 150 percent, 200 percent, 300 percent and 400 percent](https://systergon.com/motion-guides/shots/export-video-size.png) ![Frame rate options drawn as bars showing 60 fps is twice the frames of 30, and size options drawn as chips, with a note that pixels scale with the square of the size multiplier](https://systergon.com/motion-guides/diagrams/fps-weight.svg) The two knobs compound differently, which is worth knowing before you reach for either. Frame rate multiplies the _number_ of encoded frames — 60 fps is twice the work of 30. Size multiplies the pixels in each one, and it does so quadratically: 200% is four times the data, not twice. If a file is too big, drop the frame rate first; it costs less visually than you expect. ## Step 7 — read the summary, then export A line under the controls states what you are about to get — _MP4 · 30 fps · 100% · high quality_ — before you commit to the encode. Read it. It is faster than exporting twice. Press the export button and Figma encodes the frame across the animation’s duration. Larger frames and higher rates take a few seconds; the button reads _Rendering…_ while it works. Nothing on your canvas is touched at any point — this is a pure export. ## Getting the loop right before you export A video export records the animation’s duration once. Everything about whether it _reads_ as a loop is decided on the Animate tab, before you ever open the export panel — and this is where most disappointing clips come from. Three settings do the work. **Direction** chooses forward, reverse or ping-pong; ping-pong is the cheapest way to make a short move feel finished, because the object returns to where it started. **Loops** repeats the traversal inside the timeline, so a two-second move at three loops gives you six seconds of animation to encode. **Seamless** matters most: without it, a forward loop teleports back to the start on the final frame, and that jump is exactly what a viewer’s eye catches on a GIF playing endlessly in a README. The rule of thumb is to make the timeline itself loop cleanly, then export once. Trying to fix a visible seam afterwards, in the encode, is not possible — the encoder faithfully records the seam. [Direction, loops and seamless](https://systergon.com/motion-path/help/direction-loops) covers the settings properly. ## How long the clip should be Shorter than you think, in almost every case. A clip attached to a Slack message competes with everything else in the channel; a clip in a release email competes with the reader’s inbox. Two to four seconds is usually enough to show a single motion idea, and a viewer will happily watch a short loop three times where they will abandon a ten-second one halfway. If you have a long sequence, the useful move is usually to export several short clips rather than one long one, each showing one idea. They are easier to caption, easier to replace when one part of the design changes, and far easier for someone to quote back at you in a review. Duration also interacts with file size more than the settings do. A four-second clip at 30 fps is 120 encoded frames; the same clip at 60 fps is 240. Halving the duration saves more than dropping a quality preset, and costs nothing visually. ## What to send alongside the video A video answers “what should this look like” and nothing else. If the recipient has to build the motion, they need something more, and sending only the clip guarantees a round trip. For an engineer, send the video _and_ the [Lottie](https://systergon.com/figma-motion-export-to-lottie) — the clip so they can see the intent at a glance without opening anything, the JSON so they can ship it. For a colleague who will rebuild the technique on a different path, send the video and the [Config JSON](https://systergon.com/figma-motion-to-json). For a stakeholder who just needs to approve it, the video alone is exactly right, and anything else is noise. ## Choosing between the three ![A comparison table of GIF against MP4 covering inline playback in email and READMEs, colour depth, file size, frame rates offered, and loop control](https://systergon.com/motion-guides/diagrams/gif-vs-mp4.svg) The decision is about where it has to play, not about quality. GIF wins in exactly one place — anywhere that will not run a video element, which in practice means email clients, README files and issue trackers. It pays for that with 256 colours and a much larger file. Everywhere else, MP4 or WebM is smaller and looks better. And if the animation is going into a product rather than to a person, none of these is the answer. A video cannot be recoloured, resized without loss, paused at 40% while a form validates, or driven by application state. [Export Lottie](https://systergon.com/figma-motion-export-to-lottie) for that. ![A table mapping destinations to formats: Slack and slide decks to MP4, release emails and READMEs to GIF, weight-sensitive web pages to WebM, app builds to Lottie, browser-owned motion to CSS, and reproducing a setup to Config JSON](https://systergon.com/motion-guides/diagrams/format-decision.svg) ## When the button is greyed out ![The Export video panel with a disabled Export MP4 button and the message Select the animated layer or its frame to export](https://systergon.com/motion-guides/shots/export-video-blocked.png) The panel says which problem it is rather than failing silently, and there are only ever two: nothing is selected, or the selection is not inside a frame with a timeline. Both messages appear where the encoder notes normally sit. ![Five common export failures paired with fixes: nothing selected, selection not inside a frame, motion never applied, a nested frame rejected, and nothing happening in FigJam or Slides](https://systergon.com/motion-guides/diagrams/troubleshoot.svg) The one that is not an error message is the third: the button is live, the export succeeds, and the file shows a static frame. That is a motion that was previewed but never applied. ![A five-item pre-export checklist: apply the motion path, put the animation in a top-level frame, select the layer or its frame, be in a Figma design file, and check the summary line](https://systergon.com/motion-guides/diagrams/export-checklist.svg) ## Frequently asked questions ### How do I export a Figma Motion animation as a video? Apply the motion, open the **…** menu in the Motion Path titlebar, choose **Export video**, pick MP4, GIF or WebM, set the frame rate and size, and press Export. Figma encodes it and the file downloads. ### Can Figma export video without a plugin? Figma has the encoder, but it is exposed through the plugin API rather than as a button in the Figma interface, so a plugin has to call it. Motion Path does, passing your settings straight through — the encoding itself is Figma’s. ### What frame rates can I use? 12, 24, 30 or 60 for MP4 and WebM; 8, 12, 15, 24 or 30 for GIF. These are the values the API accepts, so the panel offers no others. 30 is the default. ### Why does my export show a still image? The motion was previewed but never applied. The preview runs inside the plugin panel without writing to the canvas; the encoder records the canvas. Press **Apply motion path** and export again. ### Why is the export button disabled? Either nothing is selected, or your selection is not inside a frame with a timeline. Select the animated layer — or wrap it in a frame on the Animate tab first — and the button becomes live. ### Does it record the whole frame or just my layer? The whole top-level frame, across the animation’s duration — the same thing you see when you play the timeline. If you want a tighter crop, resize the frame rather than the selection. ### How do I make a GIF that loops forever? Choose GIF and leave the **Loops** field at `0`. That is the default, and it means infinite. Any other number is a literal repeat count baked into the file. ### Does WebM keep transparency? Yes — WebM supports an alpha channel, so an animation on a transparent frame stays transparent. MP4 does not. Bear in mind that WebM support outside browsers is patchy, so it is a web answer rather than a universal one. ### Can I export video from FigJam or Figma Slides? No. Video export only runs in Figma design files. The code exports — Lottie, CSS, SVG and the demo page — do not use the encoder and are unaffected. ## Where to go next - [Figma Motion export MP4](https://systergon.com/figma-motion-export-mp4) — the settings, the file-size maths, and when MP4 is wrong. - [How to export Figma Motion](https://systergon.com/how-to-export-figma-motion) — every route out, compared. - [Figma Motion export to Lottie](https://systergon.com/figma-motion-export-to-lottie) — when the animation is going into a build rather than to a person. - [Figma Motion to JSON](https://systergon.com/figma-motion-to-json) — the three JSONs, and which one you want. - [Motion Path help centre](https://systergon.com/motion-path/help) — paths, timing, effects and troubleshooting. - [The release post](https://systergon.com/blog/motion-path-figma-video-lottie-export) — when video and Lottie export shipped. [Install Motion Path — it’s free →](https://www.figma.com/community/plugin/1654530170219655744) [Browse 300+ animation examples](https://systergon.com/motion-path/examples) ## Related guides - [Figma Motion Export MP4](https://systergon.com/figma-motion-export-mp4) — How to export a Figma Motion animation as an MP4 file, including the frame rate, quality and size settings, what each does to the resulting file, and when MP4 is the wrong choice. - [How to Export Figma Motion](https://systergon.com/how-to-export-figma-motion) — The hub page for exporting Figma Motion: compares every available route — MP4, GIF, WebM, Lottie, CSS, SVG, HTML, Figma’s native Copy as, and Config JSON — and says which to pick for a given destination. - [Figma Motion Export to Lottie](https://systergon.com/figma-motion-export-to-lottie) — Step-by-step instructions for turning a Figma Motion animation into a Lottie JSON file using the Motion Path plugin, including where the export lives, what the file contains and what it cannot carry. - [Figma Motion to JSON](https://systergon.com/figma-motion-to-json) — Explains the three JSON outputs available from a Figma Motion animation — Lottie JSON, Figma’s own Copy as JSON, and Motion Path’s Config JSON — and which one to use for playback, inspection or reproducing a setup.