# Figma Motion Lottie Export _September 1, 2026 · 11 min read · by Systergon_ > A field-by-field reference for the Lottie export in Motion Path: where it sits, what every part of the generated document means, the notes printed under the snippet, and the difference between copying it and downloading it. **Answers the question:** figma motion lottie export **What this page is for:** 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. URL: https://systergon.com/figma-motion-lottie-export 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. **Open Copy as code** — The ⋯ menu in the Motion Path titlebar. 2. **Choose the Lottie tab** — The description line states the composition length, for example 60 frames at 60 fps. 3. **Read the generated document** — The code box shows the Lottie JSON beginning with its schema version. 4. **Copy or download** — The two header icons act on whichever tab is selected. --- [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:** the Lottie export lives in [Motion Path](https://systergon.com/products/figma-plugins/motion-path) under **… → Copy as code → Lottie**. It is one of four tabs in that panel, it generates a Lottie 5.9 document from the same resolved path and timing the preview shows, and two icon buttons in the panel header copy it or download it as `motion-path.json`. This page is the reference: every control in the panel, every field in the generated document, what the notes underneath mean, and how the Lottie tab differs from the three beside it. If you want the walkthrough instead, [the step-by-step guide](https://systergon.com/figma-motion-export-to-lottie) is the better page. ## Where the panel sits The **…** button at the right of the plugin titlebar opens a six-item menu. Three of those items are exports. ![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) ![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) **Copy as code** is the design-to-code handoff. **Export video** is a rendering, covered in [the video guide](https://systergon.com/figma-motion-export-video). **Config JSON** is neither — it holds the plugin settings, and [the JSON comparison](https://systergon.com/figma-motion-to-json) explains why it is easy to grab by mistake. ## The four tabs The panel opens on CSS. All four tabs describe the same motion, generated from the same resolved polyline and timing, and they differ in what the other end can do with them. ### CSS ![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) A semantic CSS Motion Path snippet: `offset-path`, `offset-distance` and `offset-rotate`. The object rides the path rather than moving between baked keyframes, so the file is short, readable, and editable by hand afterwards. The comment at the top notes that the coordinates are in pixels relative to the containing block, so the element needs a positioned parent. Filename `motion-path.css`. ### SVG ![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) An `` snippet with the path and timing baked in. Useful when the animation has to live inside one self-contained image rather than depend on a stylesheet. Filename `motion-path.svg`. ### HTML ![The Copy as code panel on the HTML tab, describing a standalone demo page that runs the motion live in a browser and offers copy and download for the CSS and SVG](https://systergon.com/motion-guides/shots/copy-as-html.png) A standalone demo page. Open it in a browser and the motion runs live, with its own controls to copy or download the CSS and SVG from inside it. It is the fastest way to show someone the real motion without asking them to install anything. Filename `motion-path-demo.html`. ### Lottie ![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 about the placeholder shape](https://systergon.com/motion-guides/shots/copy-as-lottie.png) A complete Lottie document for iOS, Android, React Native and web. Filename `motion-path.json`, MIME type `application/json`. Two details in this tab are worth pointing out because they are easy to skim past. The description line states the composition length — _60 frames at 60 fps_ in the screenshot — so you know what you are handing over before you copy it. And the Lottie document is generated _only_ when this tab is selected, because it bakes far denser keyframes than the CSS and SVG snippets and there is no reason to compute that while you are looking at CSS. ## Copy and download The two icon buttons in the panel header act on whichever tab is selected, and produce identical content. ![Two cards comparing the copy button, which puts the content on the clipboard, with the download button, which saves the file with the correct name and MIME type for the selected format](https://systergon.com/motion-guides/diagrams/copy-or-download.svg) They sit in the header rather than under each tab so that all four formats fit the plugin’s 320-pixel panel width without the layout changing as you switch. Download is the one to use when the file is going into a repository, because it arrives correctly named and typed. ## The generated document, field by field ![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 keyframe tracks](https://systergon.com/motion-guides/diagrams/lottie-anatomy.svg) - **`v`** — the schema version, `5.9.0`. Chosen because it is what every maintained release of the four official players consumes without a shim. - **`fr`** — frames per second for the composition. - **`ip` / `op`** — the in and out points. Together with `fr` they give the composition its length; `op` is the total frame count. - **`w` / `h`** — the composition box, derived from the path’s bounding box plus the size of your object, so the motion is framed rather than clipped. - **`layers`** — one layer, holding a placeholder shape sized to your object. - **`layers[0].ks`** — the transform, and the important one. `p` position, `r` rotation, `o` opacity, `s` scale. Every bit of the motion is here. That last point is the design decision the whole export rests on. Because the motion is on the transform rather than in the shape, a developer swaps the placeholder for real artwork — or parents their asset to the transform — and keeps the animation exactly. One motion file can drive different artwork. ## Why the position track is so long ![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) The CSS tab describes the curve. The Lottie tab cannot, because Lottie has no equivalent of `offset-path` — there is no way to say _“follow this curve with this easing”_. So the path is sampled densely and the easing is folded into _when_ each sample is reached. The effect is that easing is preserved exactly rather than approximated, and that the spacing of the keyframes _is_ the easing. Travel is measured by real arc length as well, so an uneven distribution of vertices in your source vector does not change the speed of the object. ![Two curves: one sampled by vertex where points bunch together and the object crawls, and one sampled by arc length where spacing is even and speed is constant](https://systergon.com/motion-guides/diagrams/arc-length.svg) ## The notes under the snippet Below the code box, the panel prints a short list of notes. They are generated from _your_ configuration rather than being a static disclaimer, so the list changes with what you actually used. One note always appears: the moving layer is a placeholder shape sized to your object, to be swapped for your own artwork. The others appear conditionally: - **Loop count** — if your animation repeats the traversal, the note says Figma repeats it on its timeline while Lottie loops are a player setting, so the JSON holds one pass. - **Colour shift** — not included; it keys the object’s fill, which lives in your artwork rather than on the transform. - **Motion blur** — not included; Lottie has no layer-blur equivalent that players support consistently. - **Motion trail** — not included; it bakes ghost copies onto the canvas rather than animating this layer. - **Squash & stretch** — not included; it needs a per-axis scale keyed to velocity, which would fight the scale ramp. - **Anticipation & overshoot** — not included; it extends the motion beyond the path ends on the canvas timeline. ![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) Naming them rather than dropping them silently is the point. Forward the notes with the file — [the handoff guide](https://systergon.com/figma-motion-export-lottie) covers why that saves a round trip. ## What the panel reads from Everything in this panel is generated from one source, and knowing that explains several of its behaviours at once. ![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 plugin resolves your path into a polyline — whether it came from a vector pen path, the outline of a shape, or a procedural circle, wave or spiral — and pairs it with the timing model from the Essentials section. That single resolved pair drives the inline preview, the native Figma keyframes written when you press Apply, and all four exports in this panel. Two consequences follow. First, the exports cannot disagree with the preview, because there is no second implementation for them to disagree with. Second, the exports reflect the panel state _live_ — change the duration or the easing on the Animate tab and reopen this panel, and the code has changed with it. That is convenient, and it is also the reason to export after you have finished tuning rather than partway through. It also explains why the active **path range** is respected. If you have trimmed the traversal to run from 20% to 80% of the path, the exports describe that trimmed motion rather than the whole path — the resolved polyline they read from is already trimmed. [Animating only part of the path](https://systergon.com/motion-path/help/path-range) covers the control. ## When the panel is not there The _Copy as code_ section hides itself entirely when there is no resolvable path — a procedural-only edge case, or an empty selection. That is deliberate: empty code boxes look broken, and there is genuinely nothing to hand off yet. If the panel is missing, go back to the Animate tab and check that a path and an object are both resolved. [Why “Apply motion path” is greyed out](https://systergon.com/motion-path/help/apply-disabled) covers the same underlying causes. ## The Text tab has its own export ![The Motion Path Text tab: a Setup section with text layer, split by characters and method, Essentials with duration, stagger, easing and order, a Range selector, an Effects section and an Animate text button](https://systergon.com/motion-guides/shots/text-tab.png) ![A comparison of the Animate tab export, which carries one moving transform, with the Text tab export, which carries one layer per glyph with the cascade baked into their timing](https://systergon.com/motion-guides/diagrams/text-lottie.svg) Text animated along a path is a different shape of animation — many glyphs, staggered — so it has a separate export rather than being squeezed into the Animate tab’s. The Lottie it produces holds one layer per glyph, with the stagger baked into each one’s timing. [Animating text letter by letter](https://systergon.com/motion-path/help/glyph-along-path) covers the setup. ## Reading the code box The box shows the beginning of the generated document rather than all of it, and it scrolls. That is a deliberate limit of a 320-pixel panel rather than a truncation of the output — copy and download always act on the complete file, however little of it is on screen. For the Lottie tab specifically, what you can see at a glance is the header: the version, the frame rate, the in and out points, and the composition dimensions. Those five values are worth reading before you copy, because they are the ones most likely to be wrong for a reason you can fix in ten seconds. A frame rate you did not expect, an `op` that does not match the duration you set, or a composition box far larger than your motion usually means the panel is describing a different path than you think it is — most often because the selection changed while the panel was open. The rest of the document is the transform tracks, and there is no useful way to eyeball those. Verify them by loading the file into a player, not by reading the numbers — [the export JSON guide](https://systergon.com/figma-motion-export-json) describes what to check. ## Frequently asked questions ### Where is the Lottie export in Motion Path? The **…** menu in the plugin titlebar, then **Copy as code**, then the **Lottie** tab. Copy and download icons sit in the panel header. ### What is the difference between the CSS tab and the Lottie tab? CSS describes the curve — `offset-path` plus a timing function, which the browser interpolates. Lottie cannot express a curve that way, so it samples the path densely and folds the easing into the timing. CSS is shorter and hand-editable; Lottie runs on mobile as well as the web. ### What filename and MIME type does the download use? `motion-path.json` with `application/json`. The other tabs use `motion-path.css`, `motion-path.svg` and `motion-path-demo.html` with their matching types. ### What Lottie schema version is emitted? 5.9.0. The export keeps to transform tracks that every current player implements identically, rather than newer features with uneven support, so the file renders the same across web, iOS, Android and React Native. ### Why does the Lottie tab take a moment to populate? The Lottie is generated only when its tab is selected, because it bakes far denser keyframes than the CSS and SVG snippets. There is no reason to compute that while you are looking at another tab. ### What do the notes under the code box mean? They list what your specific animation could not carry into the format, generated from your configuration rather than being a fixed disclaimer. One always appears — the placeholder shape — and the rest depend on which effects you used. ### Why is the Copy as code section missing? There is no resolvable path yet — usually an empty selection or a procedural-only edge case. The section hides rather than showing empty boxes. Resolve a path and an object on the Animate tab. ### Can I export text animation to Lottie? Yes, from the Text tab’s own export. It produces one Lottie layer per glyph with the cascade baked into their timing, rather than the single moving transform the Animate tab produces. ### Does the export change anything on my canvas? No. Every route in this panel is a pure export — it reads the applied animation and writes nothing back. ## Where to go next - [Figma Motion export to Lottie](https://systergon.com/figma-motion-export-to-lottie) — the step-by-step version of this page. - [Figma Motion and Lottie](https://systergon.com/figma-motion-lottie) — what Lottie is and why teams want it. - [Figma Motion export JSON](https://systergon.com/figma-motion-export-json) — getting the file into a codebase. - [Figma Motion to Lottie](https://systergon.com/figma-motion-to-lottie) — the fidelity question in full. - [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 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. - [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.