# How to Export Figma Motion _September 1, 2026 · 12 min read · by Systergon_ > Every way an animation gets out of Figma Motion, in one place: video that Figma encodes itself, Lottie for the app build, CSS and SVG for the web, Figma’s own Dev Mode handoff, and the plugin config that rebuilds the setup. Start here and branch. **Answers the question:** how to export figma motion **What this page is for:** 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. URL: https://systergon.com/how-to-export-figma-motion 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. **Decide where the animation is going** — A chat message, an email, a web page or an app build each want a different format. 2. **Apply the motion so keyframes exist** — Every export reads the applied timeline, not the preview. 3. **Open the ⋯ menu** — Copy as code, Export video and Config JSON are the three routes out. 4. **Pick the route** — Export video for MP4, GIF or WebM; Copy as code for Lottie, CSS, SVG or a demo page; Config JSON to reproduce the setup. 5. **Copy, download or encode** — Code formats copy or download instantly; video is encoded by Figma and downloads when it finishes. --- [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:** there are five useful ways an animation leaves Figma Motion, and the right one depends entirely on where it is going. **Video** (MP4, GIF, WebM) for a human to watch. **Lottie** for an app or web build to run. **CSS or SVG** for a browser to interpolate itself. **Figma’s own _Copy as_** for Dev Mode handoff. **Config JSON** to reproduce the setup somewhere else. Four of those five live in one menu. This is the hub page. Each route gets a section below with the exact steps, and a link to the guide that covers it properly. ## Start by naming the destination Almost every wrong export starts with picking a format before deciding who receives it. A Lottie sent to a stakeholder is useless to them; an MP4 sent to an iOS engineer is a description of the work rather than the work. ![A table mapping destinations to formats: Slack and slide decks to MP4, release emails and READMEs to GIF, weight-sensitive web pages to WebM, iOS Android and React Native builds to Lottie, browser-owned motion to CSS, and reproducing a setup to Config JSON](https://systergon.com/motion-guides/diagrams/format-decision.svg) Read that table as a question about the recipient, not about quality. All of these outputs are faithful; they differ in what the other end can do with them. ![A matrix of destinations against formats showing which output each destination can consume, with Lottie and MP4 covering app builds, GIF covering email, and the web page row accepting everything](https://systergon.com/motion-guides/diagrams/player-matrix.svg) ## The five routes differ in kind, not in quality It helps to see that these are not five settings on one exporter. They are three genuinely different things, and knowing which kind you are producing prevents most of the confusion downstream. A **rendering** — MP4, GIF, WebM — is pixels over time. It is finished. Nobody downstream can change its colour, its size beyond scaling, or its timing. That finality is the point: what you send is exactly what they see, on every device, with no player to install and nothing to go wrong. It is also the reason it is the wrong thing to send to an engineer who has to ship the motion, because they cannot ship pixels; they would have to rebuild the animation by eye. A **description** — Lottie, CSS, SVG — is instructions for producing the motion, executed at runtime by a player or a browser. It stays vector, so it is resolution-free. It can be sped up, slowed, recoloured in the player, and driven by product state: paused at 40% while a form validates, played to completion on success. That is a category of thing a video cannot be. The cost is that a player has to exist and behave, and that some things simply cannot be described in the format — which is what the [fidelity guide](https://systergon.com/figma-motion-to-lottie) is about. A **recipe** — Config JSON — is neither. It does not contain the animation at all; it contains the settings that generate one. It is for moving a technique between files or between people, not for shipping. Most bad handoffs are a category error rather than a format error: a rendering sent where a description was needed, or a recipe sent where either was. ## The one prerequisite Every route below reads the _applied_ timeline, not the preview. The plugin shows your motion live in the panel before anything touches the canvas, and that preview is not an animation yet. Press **Apply motion path** first. ![The Motion Path Animate tab with an object riding an S-curve in the preview, the Source and Animate rows, Essentials with duration, direction, loops and easing, and the blue Apply motion path button at the bottom](https://systergon.com/motion-guides/shots/animate-tab.png) Applying writes native Figma Motion keyframe tracks onto your layer. That is the whole trick, and it is why Figma’s own tools keep working on the result: ![Motion Path writes native Position, Rotation, Scale, Opacity and Path trim tracks, feeding Dev Mode inspection, Figma's own Copy as CSS React and JSON, and video export](https://systergon.com/motion-guides/diagrams/native-keyframes.svg) ## Where the exports live Click the **…** button in the Motion Path titlebar. ![The Motion Path panel with the overflow menu open, listing Save as preset, Copy as code, Export video, Config JSON, Settings and Help](https://systergon.com/motion-guides/shots/menu-open.png) ![A diagram of the overflow menu with three export routes: Copy as code producing CSS, SVG, HTML and Lottie; Export video producing MP4, GIF and WebM; and Config JSON producing plugin settings](https://systergon.com/motion-guides/diagrams/export-routes.svg) ## Route 1 — video, encoded by Figma itself Choose **Export video**. Three formats, and the panel changes to match the one you pick. ![The Export video panel set to MP4: a format segmented control, frame rate 30 fps, quality High, size 100 percent, a summary line reading MP4 30 fps 100 percent high quality, and a blue Export MP4 button](https://systergon.com/motion-guides/shots/export-video-mp4.png) The thing worth knowing is that this is not a screen recording and not a re-render. Figma grew a video encoder in Plugin API Update 131, and the plugin hands your animation straight to it — so the file you get back _is_ canvas playback rather than an approximation of it. ![The video export pipeline: your timeline, then getTopLevelFrame resolving the frame from your selection, then Figma's own exportAsync encoder, then a downloaded MP4, GIF or WebM](https://systergon.com/motion-guides/diagrams/video-pipeline.svg) One rule governs it: Figma encodes a **top-level frame**, meaning a frame sitting directly on the page. You almost never have that selected — you have the layer that moves — so the plugin walks up and finds the frame for you. ![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](https://systergon.com/motion-guides/diagrams/top-level-frame.svg) Full detail in [the video export guide](https://systergon.com/figma-motion-export-video), and the MP4 settings specifically in [the MP4 guide](https://systergon.com/figma-motion-export-mp4). ## Route 2 — Lottie, for an app or web build Choose **Copy as code**, then the **Lottie** tab. ![The Copy as code panel with the Lottie tab selected, showing a description of the Lottie document for iOS Android React Native and web, a code box beginning with version 5.9.0, and a note about the placeholder shape](https://systergon.com/motion-guides/shots/copy-as-lottie.png) This is the export Figma cannot do natively. You get a complete Lottie 5.9 document — copy it, or download it as `motion-path.json` — that lottie-ios, lottie-android, lottie-react-native and lottie-web all consume. ![A pipeline from Figma Motion through Motion Path to a Lottie 5.9 document, then out to the iOS, Android, React Native and web players](https://systergon.com/motion-guides/diagrams/lottie-pipeline.svg) The step-by-step is in [Figma Motion export to Lottie](https://systergon.com/figma-motion-export-to-lottie); the fidelity question — what carries over and what does not — is in [Figma Motion to Lottie](https://systergon.com/figma-motion-to-lottie). ## Route 3 — CSS, SVG or a demo page The same **Copy as code** panel has three other tabs, and they are genuinely different outputs rather than variations on one. ![The Copy as code panel on the CSS tab, showing a CSS Motion Path snippet with an offset-path declaration containing the resolved path data](https://systergon.com/motion-guides/shots/copy-as-css.png) **CSS** emits a semantic `offset-path` / `offset-distance` / `offset-rotate` snippet. This is the one to reach for when the browser should own the motion: it is two keyframes and a timing function, it is readable, and a front-end developer can edit the curve by hand afterwards. ![The Copy as code panel on the SVG tab, showing an animateMotion snippet with the path and timing baked in](https://systergon.com/motion-guides/shots/copy-as-svg.png) **SVG** emits an `` element with the path and timing baked in — useful when the animation has to live inside a single self-contained image. ![The Copy as code panel on the HTML tab, describing a standalone demo page that runs the motion live in a browser](https://systergon.com/motion-guides/shots/copy-as-html.png) **HTML** emits a standalone demo page. Open it in a browser and the motion runs, with buttons to copy or download the CSS and SVG from inside it. It is the fastest way to show someone the real thing without sending a file they have to install something to open. ## Route 4 — Figma’s own handoff This one is not in the plugin at all, and it is easy to forget it exists. Because Motion Path writes _native_ keyframes, everything Figma offers for its own Motion animations works on the result: Dev Mode inspects the tracks, and Figma’s _Copy as_ produces CSS, React and JSON. Use it when your developer is already living in Dev Mode and wants Figma’s representation rather than a third-party one. Its limit is the reason this page exists: it does not produce Lottie. ## Route 5 — Config JSON, to reproduce the setup The last menu item is a different kind of thing, and mistaking it for an animation export is the most common confusion here. ![The Config JSON panel with a Copy config JSON button, a paste box reading Paste config JSON here, and a disabled Apply pasted JSON button](https://systergon.com/motion-guides/shots/config-json.png) ![A four-step round trip: copy config JSON, send it, paste config JSON on another machine, apply pasted JSON, with a note that it re-creates the setup rather than containing the animation](https://systergon.com/motion-guides/diagrams/config-round-trip.svg) Config JSON carries the _settings_ that produced the motion — duration, direction, loops, easing, effects — so somebody else can rebuild the same recipe on their own path. Nothing plays it. If you wanted a JSON that plays, you wanted Lottie; [the JSON comparison](https://systergon.com/figma-motion-to-json) lays out all three side by side. ## When the export button will not go ![The Export video panel with a greyed-out 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) ![Five common export failures paired with fixes: nothing selected, selection not inside a frame, motion never applied, a nested frame rejected, and video export unavailable in FigJam or Slides](https://systergon.com/motion-guides/diagrams/troubleshoot.svg) The panel tells you which of these it is rather than failing silently. The two that catch people most often are a motion that was previewed but never applied, and an animation living in a nested frame. ![A five-item pre-export checklist: apply the motion path, use a top-level frame, select the layer or its frame, work in a Figma design file, and check the summary line](https://systergon.com/motion-guides/diagrams/export-checklist.svg) ## What happens when the animation changes Nothing here creates a live link. Every export is a snapshot taken at the moment you pressed the button, and when the design changes the exported file does not. That sounds obvious written down, and it still catches teams out three sprints later when the shipped animation is subtly not the one in the file. Two habits make it survivable. First, **re-export rather than hand-edit**. A Lottie that a developer has tweaked by hand cannot be regenerated without losing the tweak, which quietly makes the Figma file stop being the source of truth. If something needs changing, change it in Figma and export again — the export is cheap, and it is the whole reason the plugin writes native keyframes rather than running its own engine. Second, **send the recipe with the render** when a technique is going to be reused. If a colleague needs the same easing on a different path next month, a Config JSON gets them there in seconds, where an MP4 gets them a reference they have to reverse-engineer. It is also worth being clear about which parts of a design an export does _not_ carry. All of these routes describe the motion of layers. None of them carry a component’s variants, an auto-layout rule, a prototype interaction outside the timeline, or a text style. If the thing you actually need handed over is the interface rather than the motion, an animation export is the wrong tool and Dev Mode is the right one. ## Three mistakes worth avoiding **Exporting the preview.** Covered above, but it is the single most common failure and it produces a file that looks fine until you play it. The preview is a simulation running in the plugin panel; the export reads the canvas. Apply first, every time. **Scaling up at export instead of designing bigger.** The size multiplier goes to 4×, and it is tempting to treat it as a quality control. It is not — it scales the frame, so a 4× export is sixteen times the pixel data and the source artwork is still whatever resolution you drew. If you need a crisp large render, make the frame larger; if you need resolution independence, you want Lottie, not a bigger video. **Choosing GIF because it is familiar.** GIF is the right answer in exactly one situation — when the animation has to play inline somewhere that will not run a video element, which in practice means email clients, README files and issue trackers. Everywhere else it is a much larger file with 256 colours and visible banding. In Slack, in a deck, on a web page, MP4 or WebM is smaller and looks better. The [MP4 guide](https://systergon.com/figma-motion-export-mp4) has the comparison. ## Frequently asked questions ### How do I export an animation from Figma? Apply the motion, open the **…** menu in the Motion Path titlebar, and pick a route: **Export video** for MP4, GIF or WebM, or **Copy as code** for Lottie, CSS, SVG or a standalone demo page. Video is encoded by Figma itself; the code formats copy or download instantly. ### Can Figma export animations as video without a plugin? Figma gained a video encoder in Plugin API Update 131, but it is exposed through the plugin API rather than as a button in the Figma UI. A plugin has to call it. Motion Path does, and passes your format, frame rate, quality and size straight through. ### What is the difference between Copy as code and Config JSON? _Copy as code_ produces the animation in a form something else can run — Lottie, CSS, SVG or a demo page. _Config JSON_ produces the plugin settings that generated the animation, so the setup can be rebuilt elsewhere. One is the output; the other is the recipe. ### Do I need to select the frame or the layer? Either. Figma encodes a top-level frame, but you normally have the moving layer selected, so the plugin resolves upward and finds the frame for you. ### Why is my exported file empty? Almost always because the motion was previewed but never applied. The preview runs in the panel without writing anything to the canvas; export reads the applied timeline. Press **Apply motion path** and export again. ### Does video export work in FigJam or Figma Slides? No. Video export is a Figma design-file feature. The code exports — Lottie, CSS, SVG, HTML — do not depend on the encoder and are not affected. ### Which format should I send to a developer? Lottie if they are building for iOS, Android, React Native or the web and the motion is part of the product. CSS if it is a web interaction the browser should own. An MP4 alongside either, so they can see the intended result at a glance. ### Can I export only part of the animation? The path range controls which portion of the path the object travels, and every export reflects it — so trimming the range trims what you export. See [animating only part of the path](https://systergon.com/motion-path/help/path-range). ### Is any of this paid? No. Motion Path is free on the Figma Community, exports included. [Install it here](https://www.figma.com/community/plugin/1654530170219655744). ## Where to go next - [Figma Motion export video](https://systergon.com/figma-motion-export-video) — MP4, GIF and WebM in full, with every field explained. - [Figma Motion export MP4](https://systergon.com/figma-motion-export-mp4) — the three settings that decide file size. - [Figma Motion export to Lottie](https://systergon.com/figma-motion-export-to-lottie) — the complete Lottie walkthrough. - [Figma Motion to JSON](https://systergon.com/figma-motion-to-json) — which of the three JSONs you actually want. - [Figma Motion and Lottie](https://systergon.com/figma-motion-lottie) — the primer, if Lottie is new to you. - [Motion Path help centre](https://systergon.com/motion-path/help) — paths, timing, effects and troubleshooting. [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 Video](https://systergon.com/figma-motion-export-video) — 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. - [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. - [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.