# Figma Motion Export Lottie _September 1, 2026 · 11 min read · by Systergon_ > The developer-handoff view: what your engineers receive when you export Lottie from Figma Motion, how they wire it into an iOS, Android, React Native or web build, and the three things worth telling them before you send it. **Answers the question:** figma motion export lottie **What this page is for:** 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. URL: https://systergon.com/figma-motion-export-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. **Export the Lottie document** — Motion Path ⋯ menu → Copy as code → Lottie tab → download. 2. **Send the file, not a recording** — Hand over motion-path.json rather than a GIF of the canvas. 3. **Tell them the shape is a placeholder** — The moving layer is sized to your object; the developer swaps in real artwork or parents it to the transform. 4. **Tell them looping is theirs to set** — The JSON holds one pass. Looping is a player option. 5. **Point at the notes** — The notes under the snippet name any effect that did not cross over, so nothing is discovered late. --- [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:** in [Motion Path](https://systergon.com/products/figma-plugins/motion-path), apply your motion, then **… → Copy as code → Lottie** and download `motion-path.json`. Send that file to your engineers along with an MP4 of the same animation and the three sentences in the section below. That combination — the runnable file, the visual reference, and the caveats stated up front — is what turns a motion design into shipped motion instead of a re-make. This page is about the handoff rather than the button. The clicks take fifteen seconds; the difference between a handoff that lands and one that generates four rounds of Slack is almost entirely in what you say alongside the file. ## Why the handoff usually fails A motion design that only exists inside a Figma file is a design that somebody else has to re-make. That is the whole problem, and it is worth naming precisely because the usual fixes do not address it. Sending a screen recording does not help: an engineer cannot ship pixels, so they rebuild the motion by eye, and every judgement you made about easing and timing gets renegotiated by someone watching a compressed video frame by frame. Sending a written spec does not help either — “ease out over 400ms” is a description of a curve, not the curve, and two people implementing that sentence will produce two different animations. Lottie fixes it by being the actual thing rather than a description of it. The file _is_ the animation: the same document runs on iOS, Android, React Native and the web, and the timing in it is the timing you approved. ![A four-step handoff: design the path and timing, apply so native keyframes land on the layer, export Lottie for the build and MP4 for review, and ship with the developer swapping artwork and keeping the motion](https://systergon.com/motion-guides/diagrams/handoff-loop.svg) ## What your engineers actually receive A single JSON file, typically a few hundred kilobytes, that any of the four official Lottie players reads without configuration. ![A pipeline from Figma Motion through Motion Path to a Lottie 5.9 document, shipping to lottie-ios, lottie-android, React Native and lottie-web](https://systergon.com/motion-guides/diagrams/lottie-pipeline.svg) Inside, the structure is deliberately plain: a composition with a frame rate and a length, and one layer whose transform carries the motion. ![The exported Lottie JSON annotated: v 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 plainness is the feature. There is nothing exotic in the file, which is why it renders identically across players rather than beautifully in one and subtly wrongly in another. ## Producing the file — the fifteen seconds For completeness, since the rest of this page assumes you have one. Apply the motion first: the plugin’s live preview writes nothing to the canvas, and the export reads the canvas. ![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) Then **Copy as code**, the **Lottie** tab, and the download icon in the panel header: ![A step-by-step loop: the Animate tab ready to apply, the overflow menu opening to reveal Copy as code, the panel showing CSS by default, and the Lottie tab selected with the generated JSON](https://systergon.com/motion-guides/shots/steps-lottie.gif) One structural point that matters to engineering more than it does to you: the plugin does not run its own animation engine. It writes **native Figma Motion keyframes** onto the layer, and generates the Lottie from those. So the file is regenerable, Dev Mode still inspects the animation, and nothing in the Figma file depends on the plugin staying installed. ![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) ## The three sentences to send with it Each of these prevents a specific round trip. They are worth pasting into the message rather than assuming. ### 1. “The moving shape is a placeholder — swap it for the real artwork.” ![The Copy as code panel with the Lottie tab selected, showing the description of the Lottie document and a note reading that the moving layer is a placeholder shape sized to your object which should be swapped for your own artwork](https://systergon.com/motion-guides/shots/copy-as-lottie.png) The layer in the file is a rectangle sized to your object, not your icon. That looks like a bug if nobody says otherwise, and it is the most common first message back. It is deliberate, and the reason is structural: **the motion lives on the transform, not in the shape**. Because of that, a developer can replace the placeholder with the production asset — or parent their existing asset to that transform — and lose nothing. The same file can drive different artwork, which is exactly what you want when an icon gets redrawn but the motion is signed off. ### 2. “Looping is yours to set — the file holds one pass.” Lottie treats looping as a player option rather than a property of the document: `loop: true` in lottie-web, the `loop` prop in React Native, `loopMode` on iOS, the equivalent on Android. So the JSON contains one clean traversal. If your Figma animation repeated the traversal on its timeline, the plugin says so in the notes rather than baking the repeats into the file. That is the right default — a looped file that the player then loops again is a bug that only shows up as a slightly wrong rhythm, which is the worst kind to find. ### 3. “Here is what did not cross over.” ![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 plugin prints notes under the snippet naming anything in _your_ animation that Lottie cannot carry. Forward them. An effect that quietly vanished is discovered on a device in QA and becomes an argument about whether the implementation is wrong; an effect named at export time is a decision the two of you make together, now, cheaply. The pattern is consistent enough to explain in a sentence: anything riding the layer transform crosses over, anything living in the artwork or on the canvas does not. [The fidelity guide](https://systergon.com/figma-motion-to-lottie) works through each case. ## Send an MP4 alongside it This is the cheapest improvement available to most handoffs, and it costs one extra export. ![The Export video panel set to MP4 with frame rate 30 fps, quality High, size 100 percent, a summary line and a blue Export MP4 button](https://systergon.com/motion-guides/shots/export-video-mp4.png) A Lottie is a runnable artefact, and running it requires opening something. An engineer triaging fifteen tickets will not do that to understand what a task is about — but they will watch a two-second clip that autoplays in the ticket. The MP4 answers “what am I building?” in one second; the JSON answers “how do I build it?” when they sit down to it. [The video export guide](https://systergon.com/figma-motion-export-video) covers the settings; the defaults are right for this. ## What each platform does with the file ![Two code snippets: lottie-web loading the JSON with loadAnimation, and lottie-react-native rendering it with a source prop, with a note that loop is a player setting](https://systergon.com/motion-guides/diagrams/json-to-code.svg) It is short everywhere, which is worth knowing when you are asking for the work to be prioritised — the integration is rarely the expensive part. - **Web** — `lottie-web`, pointed at the JSON as a static asset. - **React Native** — `lottie-react-native`, with the file bundled through `require`. - **iOS** — `lottie-ios`, the JSON in the app bundle, played through a `LottieAnimationView`. - **Android** — `lottie-android`, the JSON in `src/main/assets`. The reason this matters to a designer is not the API. It is that all four consume _the same file_, so one export covers every platform — and a change to the motion is one re-export rather than four separate implementation tickets. ## What Lottie buys you that a video cannot Worth having ready, because someone will ask why an MP4 is not enough. A Lottie is vector, so it is resolution-free — the same file is crisp on a phone and on a 5K display, with no 2× and 3× variants to produce. It usually weighs less than the video of the same animation. And, most importantly, it is _drivable_: a player can pause it at 40% while a form validates, run it in reverse when an action is undone, speed it up on a fast connection, or play only a frame range. None of that is possible with pixels. That last capability is the one that changes what motion can be in a product. An animation that responds to state is interface; an animation that plays start to finish regardless is decoration. Lottie is what lets the first kind exist. ## Reviewing the result on a device The animation will be reviewed eventually, and it goes better if you decide in advance what you are reviewing against. Two failure modes account for most of the disagreements. The first is **context**. An animation that reads beautifully alone on a canvas can be far too slow when it sits between a tap and a screen transition, because in the file it is the only thing happening and in the product it is holding the user up. This is not an implementation bug and asking an engineer to “make it match Figma” will not fix it — the honest response is to shorten it and re-export. The second is **the placeholder swap**. Once real artwork replaces the placeholder shape, the motion is unchanged but the perception of it is not: a heavier or larger asset reads as slower at identical timing, and an asset with a different visual centre can look like it is drifting off the path when the transform is exactly right. Check the swapped version, not the exported file, before signing anything off. Neither of these is a reason to distrust the export. They are reasons to review the animation where it will actually live — which is the same advice as for any other part of an interface, and just as easy to skip. ## Team conventions worth agreeing early Three decisions save a lot of friction if made before the first file rather than after the third. **Who owns the file after handoff.** Either the designer owns it and it is regenerated from Figma, or engineering owns it and Figma becomes a reference. Both are legitimate. What is not legitimate is nobody deciding, because then the file gets hand-edited once and the Figma file silently stops being the source of truth — and nobody finds out until the next export overwrites the edit. **Re-export rather than hand-edit.** Following from that: if the motion needs to change, change it in Figma and export again. The export is cheap, and it is the whole reason the plugin writes native Figma keyframes rather than running its own engine — the file stays regenerable. Runtime differences like speed belong in the player, where they are meant to live. **Naming.** Every export downloads as `motion-path.json`. Rename for the behaviour it represents — `checkout-success.json` — before it enters a repository, or you will have four identically named files and a bad afternoon. ## When Lottie is the wrong handoff ![A table mapping destinations to formats: Slack and slide decks to MP4, release emails 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 motion is a web interaction the browser should own, **CSS** is often the better artefact — the same panel emits an `offset-path` snippet that a front-end developer can read and edit, rather than a few hundred baked keyframes they cannot. If the animation depends on an effect Lottie cannot carry, a video is more honest than a Lottie that quietly differs. And if the recipient is approving rather than building, send the video alone; the JSON is noise to them. ## Frequently asked questions ### How do I hand off a Figma Motion animation to developers? Export Lottie from Motion Path (**… → Copy as code → Lottie → download**), and send that file with an MP4 of the same animation plus three notes: the shape is a placeholder, looping is a player setting, and here is what did not cross over. ### Which Lottie players does the file work with? lottie-web, lottie-ios, lottie-android and lottie-react-native. The export writes schema 5.9, which every maintained release of those reads, and it keeps to the transform tracks all four implement identically. ### Why is the artwork missing from the file? It is a placeholder by design. The motion lives on the layer transform rather than in the shape, so a developer swaps in the production asset — or parents it to that transform — and keeps the motion exactly. It also means one motion file can drive different artwork. ### Do I need to send a video as well? Not strictly, but it is the cheapest improvement available. A ticket with an autoplaying two-second clip gets understood during triage; a ticket with only a JSON attachment gets opened later, or not at all. ### Can a developer change the timing without going back to me? They can change playback speed, direction and which frame range plays — all player settings. Changing the easing or the path means changing the design, which should come back to Figma and be re-exported. ### Will the animation look the same on iOS and Android? It should. The export deliberately sticks to transform tracks that every player implements the same way, rather than reaching for newer Lottie features with uneven support. That is the reason the file is as plain as it is. ### How big is the file? Typically a few hundred kilobytes of repetitive numeric text, which compresses very well over the wire — usually smaller than the MP4 of the same animation, and unlike the MP4 it is resolution-independent. ### What if my animation uses motion blur or colour shift? Those cannot cross over — they live in the artwork or on the canvas rather than on the transform. The export notes will name them. Either accept the difference, rebuild that part in the player, or hand over [a video](https://systergon.com/figma-motion-export-video) instead if the effect is essential. ### Is Motion Path free? Yes, on the Figma Community, exports included. [Install it here](https://www.figma.com/community/plugin/1654530170219655744). ## Where to go next - [Figma Motion export to Lottie](https://systergon.com/figma-motion-export-to-lottie) — the complete step-by-step. - [Figma Motion export JSON](https://systergon.com/figma-motion-export-json) — the file, and the code that plays it. - [Figma Motion to Lottie](https://systergon.com/figma-motion-to-lottie) — what survives the conversion and how to verify it. - [Figma Motion and Lottie](https://systergon.com/figma-motion-lottie) — the primer, if Lottie is new to your team. - [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 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 Export JSON](https://systergon.com/figma-motion-export-json) — How to export a Figma Motion animation as a JSON file — copy versus download, the file name and MIME type, and the code that loads the result in lottie-web, lottie-ios, lottie-android and React Native. - [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 and Lottie](https://systergon.com/figma-motion-lottie) — An orientation piece on Figma Motion and Lottie: what Lottie is, why product teams standardise on it, what native Figma Motion can and cannot hand over, and how the gap is closed.