# Figma Motion Export to Lottie _September 1, 2026 · 11 min read · by Systergon_ > Figma Motion can copy out CSS, React and JSON. It cannot give you Lottie — the one format iOS, Android, React Native and the web all consume. Motion Path adds it: a complete Lottie document generated from the same resolved path and timing the preview shows, in three clicks from the panel you are already in. **Answers the question:** figma motion export to lottie **What this page is for:** 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. URL: https://systergon.com/figma-motion-export-to-lottie 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. **Animate the layer** — Select the layer and the path, set the timing on the Animate tab, and press Apply motion path so the native Figma Motion keyframes exist. 2. **Open the overflow menu** — Click the ⋯ button in the Motion Path titlebar. 3. **Choose Copy as code** — Pick Copy as code from the menu. The panel opens on the CSS tab. 4. **Switch to the Lottie tab** — Select Lottie in the format toggle. The Lottie document is generated from the resolved path and timing. 5. **Copy or download the file** — Use the copy icon to put the JSON on the clipboard, or the download icon to save motion-path.json to disk. 6. **Read the notes** — Check the notes printed under the snippet — they list anything in your animation that Lottie cannot carry. --- [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:** Figma Motion has no Lottie export of its own. Install [Motion Path](https://systergon.com/products/figma-plugins/motion-path), animate your layer, then open the **…** menu in the plugin titlebar and choose **Copy as code → Lottie**. You get a complete Lottie 5.9 document that you can copy to the clipboard or download as `motion-path.json`, ready for lottie-ios, lottie-android, lottie-react-native or lottie-web. The whole thing takes about fifteen seconds once the motion is applied. The rest of this page is the detail behind those fifteen seconds: where the export sits, what actually lands in the file, why the position track has far more keyframes than you drew, what Lottie cannot carry from your animation, and how to check the result before you hand it to an engineer. ## Why Figma Motion has no Lottie button Figma’s native Motion panel is genuinely good at handing work over. Select an animated layer, open _Copy as_, and you can take CSS, React or JSON straight out of the file. Dev Mode inspects the keyframes. None of that is missing. What is missing is the one format that mobile and web product teams have standardised on. Lottie is a vector animation document — a JSON file describing shapes and the keyframes that move them — and it is what an iOS, Android, React Native or web build actually consumes when a designer hands over motion. Figma’s _Copy as_ does not produce it. Motion Path fills that gap, and it fills it from inside the same panel you were already working in. Here is every route out of that panel, so you can see where Lottie sits among them: ![A diagram of the Motion Path overflow menu with six items, three of which are export routes: Copy as code producing CSS, SVG, HTML and Lottie; Export video producing MP4, GIF and WebM; and Config JSON producing the plugin settings](https://systergon.com/motion-guides/diagrams/export-routes.svg) Three of the six menu items are exports. **Copy as code** is the one that produces Lottie. **Export video** is covered in [the video export guide](https://systergon.com/figma-motion-export-video), and **Config JSON** is a different thing entirely — if you arrived here because you searched for JSON, read [which of the three JSONs you actually want](https://systergon.com/figma-motion-to-json) before going further. ## Step 1 — apply the motion, don’t just preview it This is the step people skip, and it is the reason an export comes back empty. The plugin previews your motion live in the panel before anything is written to the canvas. That preview is not an animation yet. Press **Apply motion path** and the plugin writes real, native Figma Motion keyframe tracks — position, rotation, scale, opacity and path trim — onto your layer. ![The Motion Path Animate tab: an object riding an S-curve in the preview at the top, then Source, Animate, Essentials with duration, direction, loops and easing, an Effects section, and the blue Apply motion path button at the bottom](https://systergon.com/motion-guides/shots/animate-tab.png) Everything downstream depends on this. The plugin does not run its own animation engine — it writes Figma’s own tracks, which is precisely why Dev Mode, _Copy as_, video export and the Lottie export all work on the result: ![Motion Path writes native Position, Rotation, Scale, Opacity and Path trim tracks, which feed three outputs: Dev Mode inspection, Figma's own Copy as CSS, React and JSON, and video export](https://systergon.com/motion-guides/diagrams/native-keyframes.svg) If you have not animated anything yet, the [how to animate a layer along a path](https://systergon.com/motion-path/help/animate-along-path) article walks through it, and the [examples gallery](https://systergon.com/motion-path/examples) has 300-odd ready-made recipes you can apply and then export immediately. ## Step 2 — open the overflow menu Click the **…** button at the right of the plugin titlebar. Six items appear. ![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) You want **Copy as code**. It is the second item, above Export video. ## Step 3 — switch to the Lottie tab The panel opens on CSS, because CSS is the format most people reach for first. ![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) There are four tabs: **CSS**, **SVG**, **HTML** and **Lottie**. CSS gives you a semantic `offset-path` snippet where the browser interpolates the curve. SVG gives you an `` element. HTML gives you a standalone demo page that runs the motion live in a browser. Lottie gives you the document an app build consumes. Select **Lottie**. Here is the whole sequence, held a beat per step: ![A step-by-step loop through the Motion Path panel: the Animate tab ready to apply, the overflow menu opening to reveal Copy as code, the Copy as code panel showing CSS by default, and finally the Lottie tab selected with the generated JSON visible](https://systergon.com/motion-guides/shots/steps-lottie.gif) And the Lottie tab itself: ![The Copy as code panel with the Lottie tab selected: a description reading that it is a Lottie document for iOS, Android, React Native and web with 60 frames at 60 fps, a code box showing JSON beginning with version 5.9.0, and a note that the moving layer is a placeholder shape](https://systergon.com/motion-guides/shots/copy-as-lottie.png) The line under the tabs tells you the composition length — _60 frames at 60 fps_ in the shot above — so you know what you are handing over before you copy it. ## Step 4 — copy it or download it Two icon buttons sit in the panel header, and they act on whichever tab is selected. They produce identical content; the only difference is where it lands. ![Two cards comparing the copy button, which puts the JSON on the clipboard, with the download button, which saves motion-path.json to disk with the correct MIME type](https://systergon.com/motion-guides/diagrams/copy-or-download.svg) Copy is right for pasting into a ticket, a chat thread or a scratch file. Download is right when the file is going into a repository — it saves as `motion-path.json` with an `application/json` MIME type, so it arrives named correctly rather than as `download.txt`. ## What is actually in the file Open it and the structure is small and readable. This matters more than it sounds: a Lottie you cannot reason about is a Lottie you cannot debug when it looks wrong on a device. ![The exported Lottie JSON annotated: v is the schema version, fr the frame rate, ip and op the in and out points, w and h the composition box, and ks the layer transform holding position, rotation, opacity and scale tracks](https://systergon.com/motion-guides/diagrams/lottie-anatomy.svg) The important field is `ks` — the layer transform. **Every bit of the motion lives there**, on the transform rather than in the shape. That is a deliberate design, and it is what makes the file useful: the shape inside is a placeholder sized to your object, so a developer swaps it for the real artwork, or parents their own asset to that transform, and keeps the motion untouched. The schema version is 5.9, which is what every current player consumes. ## Why there are so many position keyframes Open the position track and you will find far more keyframes than you placed. This is not the export being wasteful, and it is worth understanding because it is the single most common question a developer asks when they first open the file. ![A comparison: CSS offset-path expresses a curve as two keyframes and a timing function, while Lottie samples the same curve into many unevenly spaced keyframes with the easing folded into the timing](https://systergon.com/motion-guides/diagrams/baked-keyframes.svg) Lottie has no equivalent of CSS’s `offset-path`. There is no way in the format to say _“follow this curve, with this easing.”_ An object riding a curve simply cannot be two keyframes and a timing function — the curve has to be described. So the path is sampled densely, and the easing is folded into _when_ each point along it is reached. The consequence is the opposite of lossy: your easing is preserved **exactly** rather than approximated by whatever cubic-bézier came closest. The spacing of those keyframes is the easing. Travel is measured by real arc length too, so a dense cluster of vertices in your original vector does not quietly slow the object down as it passes through: ![Two curves: one sampled by vertex where points bunch together and the object would crawl, and one sampled by arc length where the spacing is even and the speed is constant](https://systergon.com/motion-guides/diagrams/arc-length.svg) The same reasoning is covered in more depth in [what survives the conversion from Figma Motion to Lottie](https://systergon.com/figma-motion-to-lottie). ## What Lottie cannot carry The plugin prints notes under the snippet listing anything in your animation that did not cross over. It does this rather than dropping things silently, which is the behaviour you want — a missing effect discovered on a device three weeks later is far more expensive than one named at export time. ![Two lists: carried into Lottie are position along the path, rotation, opacity ramp, scale ramp, easing and speed profile, and arc-length travel; left behind are colour shift, motion blur, motion trail, squash and stretch, anticipation and overshoot, and loop count](https://systergon.com/motion-guides/diagrams/what-survives.svg) The pattern is consistent. Anything riding the layer **transform** crosses over. Anything that lives in the artwork or on the canvas does not: - **Colour shift** keys the object’s fill, which is in your artwork rather than the transform — and the artwork is a placeholder in the exported file. - **Motion blur** has no layer-blur equivalent that Lottie players support consistently. - **Motion trail** bakes extra ghost copies onto the canvas rather than animating the layer. - **Squash & stretch** needs a per-axis scale keyed to velocity, which would fight the scale ramp. - **Anticipation & overshoot** extends the motion beyond the path ends on the canvas timeline. - **Loop count** is not a limitation so much as a category difference. Figma repeats the traversal on its timeline; in Lottie, looping is a player setting (`loop: true`), so the JSON holds one clean pass. If your animation leans on any of those, you have two honest options: export video instead, which records exactly what the canvas plays, or rebuild that part of the effect in the player. Neither is a failure — but knowing which one you are choosing beats discovering it in QA. ## What your developer does with it This is where the file earns its keep. Lottie is not a preview format; it is a runtime one, and the same document drives four platforms. ![A pipeline from Figma Motion through Motion Path to a Lottie 5.9 document, shipping to four players: lottie-ios, lottie-android, React Native and lottie-web](https://systergon.com/motion-guides/diagrams/lottie-pipeline.svg) The integration is short on every one of them: ![Two code snippets: lottie-web loading the JSON with loadAnimation, and lottie-react-native rendering it with a source prop, plus a note that loop is a player setting](https://systergon.com/motion-guides/diagrams/json-to-code.svg) Three things are worth saying explicitly when you send the file, because they are the questions that come back otherwise. **The moving shape is a placeholder** — swap it or parent real artwork to its transform. **Looping is theirs to set** — the JSON holds one pass. **The notes list what is missing** — forward them along with the file. There is a fuller version of this conversation in [the developer handoff guide](https://systergon.com/figma-motion-export-lottie). ## Checking the result before you send it A Lottie that looks plausible in a text editor can still be wrong. The cheapest check is to load it into a real player rather than trusting the JSON. That is how the export itself was validated: loaded into lottie-web, an object on a circular path holds a constant radius from the centre to within a fraction of a pixel, the facing sweeps a clean 360°, and the frame spacing is visibly uneven under an ease — which is exactly what “the easing is in the timing” should look like. Drop your own file into [any Lottie preview tool](https://lottiefiles.com/preview) and compare it against the plugin’s inline preview. The preview is a fair comparison, incidentally, because it is generated from the same source as the export: ![One resolved path and timing feeding three outputs: the inline preview, the native Figma keyframes, and the CSS, SVG and Lottie exports](https://systergon.com/motion-guides/diagrams/preview-fidelity.svg) The preview, the canvas keyframes and every export come from one resolved polyline and one timing model. They cannot disagree, because there is nothing for them to disagree about. ## When you want something other than Lottie Lottie is the right answer for an app or web build. It is the wrong answer for a Slack message, and it is overkill for a README. ![A table mapping destinations to formats: Slack and decks to MP4, email 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) If the animation is going to a person rather than a build, [export video](https://systergon.com/figma-motion-export-video) instead — Figma encodes it itself, so the file is canvas playback rather than a recording of it. [MP4](https://systergon.com/figma-motion-export-mp4) is the safe default there. ## Frequently asked questions ### Can Figma export Lottie natively? No. Figma’s native _Copy as_ produces CSS, React and JSON from a Motion animation, and Dev Mode inspects the keyframes, but there is no Lottie output in Figma itself. A plugin has to generate it. Motion Path adds it under **… → Copy as code → Lottie**. ### How do I export a Figma Motion animation to Lottie? Apply the motion so native keyframes exist, open the **…** menu in the Motion Path titlebar, choose **Copy as code**, select the **Lottie** tab, then use the copy or download icon in the panel header. The download saves `motion-path.json`. ### What Lottie version does the export produce? Schema version 5.9, which every current Lottie player consumes — lottie-web, lottie-ios, lottie-android and lottie-react-native included. ### Why does my exported Lottie have hundreds of position keyframes? Because Lottie has no equivalent of CSS’s `offset-path`, so a curve cannot be expressed as two keyframes and a timing function. The path is sampled densely and the easing is folded into the timing of each sample. The upside is that your easing is preserved exactly rather than approximated. ### Why is the shape in my Lottie a plain rectangle instead of my artwork? That is intentional. The moving layer is a placeholder sized to your object, because the motion lives on the transform rather than in the shape. A developer swaps the placeholder for the real artwork, or parents their asset to that transform, and every bit of the motion carries over. ### Does the Lottie loop? The file holds one pass of the motion. Looping in Lottie is a player setting — `loop: true` in lottie-web, the `loop` prop in React Native, and the equivalent on iOS and Android. If your Figma animation repeats the traversal, the export notes say so. ### Will motion blur, colour shift or squash & stretch come across? No. Those effects live in the artwork or on the canvas rather than on the layer transform, so Lottie cannot carry them. The plugin lists any that applied to your animation in the notes under the snippet, so nothing disappears silently. If they are essential, [export video](https://systergon.com/figma-motion-export-video) instead. ### Is the Lottie export free? Motion Path is free on the Figma Community, and the Lottie export is part of it. [Install it here](https://www.figma.com/community/plugin/1654530170219655744). ### Can I export text animated along a path to Lottie? Yes — the Text tab has its own export, and it carries the letter-by-letter cascade as one Lottie layer per glyph, with the stagger baked into their timing. It is a separate export from the Animate tab’s, in the same place. ## Where to go next - [Figma Motion to Lottie](https://systergon.com/figma-motion-to-lottie) — the fidelity question in full: what survives, what does not, and how to verify it. - [Figma Motion Lottie export](https://systergon.com/figma-motion-lottie-export) — a field-by-field reference for the panel and the generated document. - [Figma Motion export Lottie](https://systergon.com/figma-motion-export-lottie) — the developer handoff, end to end. - [How to export Figma Motion](https://systergon.com/how-to-export-figma-motion) — every route out of Figma Motion, compared. - [Motion Path help centre](https://systergon.com/motion-path/help) — 26 articles on paths, timing, effects and troubleshooting. - [The release post](https://systergon.com/blog/motion-path-figma-video-lottie-export) — when video and Lottie export shipped, and why. [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 to Lottie](https://systergon.com/figma-motion-to-lottie) — Explains the fidelity of converting a Figma Motion animation to Lottie — which transform properties carry over, which canvas effects are dropped, why position keyframes are baked, and how to verify the result. - [Figma Motion Lottie Export](https://systergon.com/figma-motion-lottie-export) — A reference for the Lottie export panel in Motion Path — the tab layout, the copy and download buttons, the structure of the emitted Lottie 5.9 document, and the notes that list what was left out. - [Figma Motion Export Lottie](https://systergon.com/figma-motion-export-lottie) — The developer handoff for a Lottie exported from Figma Motion — what the engineer receives, how each platform player loads it, and the caveats to communicate about looping, artwork and unsupported effects. - [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.