# Figma Motion and Lottie _September 1, 2026 · 11 min read · by Systergon_ > What Lottie is, why it is the format app teams ask for, where Figma Motion stops, and what closes the gap. The orientation piece — read this one if you are not yet sure Lottie is what you need. **Answers the question:** figma motion lottie **What this page is for:** 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. URL: https://systergon.com/figma-motion-lottie Plugin: Motion Path for Figma — https://systergon.com/products/figma-plugins/motion-path Install: https://www.figma.com/community/plugin/1654530170219655744 --- [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:** Lottie is a JSON file describing vector shapes and the keyframes that move them. It is what iOS, Android, React Native and web teams use to _ship_ an animation rather than describe one. Figma Motion cannot produce it — Figma’s native _Copy as_ gives you CSS, React and JSON, but not Lottie. [Motion Path](https://systergon.com/products/figma-plugins/motion-path) adds it, under **… → Copy as code → Lottie**. This is the orientation page. If you are not yet sure whether Lottie is what you need, read this one; if you already know and want the clicks, go to [Figma Motion export to Lottie](https://systergon.com/figma-motion-export-to-lottie). ## What a Lottie actually is It is a text file. That is the first surprising thing about it, and most of what follows comes from it. Where an MP4 is a sequence of encoded pictures, a Lottie is a set of instructions: _here is a shape, here is where it is at frame 0, here is where it is at frame 60, and here is how it gets between them_. A player reads the instructions and draws the result at runtime. ![The structure of a Lottie JSON document: 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) The format came out of Airbnb, which built players for iOS, Android and the web so that one animation file could run everywhere rather than being rebuilt three times. Those players — lottie-ios, lottie-android, lottie-web, and lottie-react-native alongside them — are why the format won: the file is genuinely portable, not portable in principle. ## Why product teams ask for it Three properties, and each one is something a video cannot do. **It is vector, so it has no resolution.** The same file is crisp on a small phone and a 5K display. No 2× and 3× variants, no re-export when a new device size appears. **It is small.** Repetitive numeric text compresses extremely well, and a Lottie is usually lighter than the MP4 of the same animation — frequently much lighter, and for a mobile app that ships the file in its bundle, that is a real number someone is tracking. **It is drivable.** This is the one that changes what motion can be. A player can pause a Lottie 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. An animation that responds to application state is _interface_; an animation that plays start to finish regardless is decoration. Lottie is what lets the first kind exist. ![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) ## Where Figma Motion stops Figma’s Motion panel is a real animation tool, and its handoff story is better than people give it credit for. Select an animated layer, open _Copy as_, and you can take CSS, React or JSON. Dev Mode inspects the keyframes properly. What it does not have is a Lottie export. So the moment your motion is going into an app rather than onto a web page, Figma’s native handoff stops short of the format your engineers actually consume — and the fallback is a screen recording plus a written spec, which is where motion designs go to be renegotiated. There is a second gap worth knowing about, in the authoring rather than the export. Open Figma’s Motion → Animations panel and you will see Position, Scale, Rotation, Size, Opacity… and then **Path**, greyed out and unavailable. Animating a layer along a curve is not something native Motion can do yet. ![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](https://systergon.com/motion-guides/shots/animate-tab.png) Motion Path fills both gaps, and it fills the first one _because_ of how it fills the second. ## The part that makes it work The plugin does not run its own animation engine. It samples your path and writes **native Figma Motion keyframe tracks** onto the layer — position, rotation, scale, opacity, path trim. ![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) Three consequences follow, and they are the reason this matters rather than being an implementation detail: Everything Figma offers keeps working. Dev Mode inspects the animation. _Copy as_ emits CSS, React and JSON from it. Figma’s own video encoder can record it. None of that would be true of a plugin that ran its own runtime. Your file does not depend on the plugin. Uninstall it and the animation is still there, still native, still exportable. The plugin is a way of authoring the tracks, not a thing your design sits inside. And there is nothing to migrate if Figma ships path animation itself. The data is already Figma’s. ## Getting a Lottie out Three clicks once the motion is applied. ![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 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) ![The Copy as code panel with the Lottie tab selected: 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) Copy it, or download it as `motion-path.json`. The [step-by-step guide](https://systergon.com/figma-motion-export-to-lottie) covers each step properly. ## Lottie against the alternatives Lottie is not always right, and the cases where it is wrong are worth knowing before you standardise on it. ![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) **Against GIF.** No contest on quality — GIF is 256 colours and much heavier — but GIF plays inline in email, READMEs and issue trackers, and Lottie does not. That single property keeps GIF alive. **Against MP4.** MP4 asks nothing of anyone: it plays in Slack, on a phone, in a deck, with no player and no integration work. If the recipient is going to _watch_ the animation rather than build with it, MP4 is the right answer and a Lottie is an obstacle. See [the MP4 guide](https://systergon.com/figma-motion-export-mp4). **Against CSS.** On the web specifically, CSS is often the better artefact. The same panel emits an `offset-path` snippet: two keyframes and a timing function, readable, and editable by a front-end developer who wants to adjust the curve. A Lottie’s few hundred baked keyframes are not something anyone edits by hand. Choose Lottie on the web when the animation is complex or shared with a mobile app; choose CSS when it is a simple interaction the browser should own. The general rule: **a rendering for people, a description for builds**. [The export hub](https://systergon.com/how-to-export-figma-motion) lays out all the routes. ## What to expect in the file Two things surprise people the first time, and both are deliberate. **The shape is a placeholder.** The moving layer is a rectangle sized to your object rather than your artwork. The motion lives on the layer transform, not in the shape, so a developer swaps in the production asset — or parents it to the transform — and keeps the animation exactly. One motion file can drive different artwork, which is a feature the first time an icon gets redrawn after sign-off. **There are far more keyframes than you drew.** Lottie has no equivalent of CSS’s `offset-path`, so a curve cannot be two keyframes and a timing function — it has to be sampled. The easing then lives in the spacing of those samples, which means it is preserved exactly rather than approximated. ![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) And one thing to be aware of before you promise anything: effects that live in the artwork rather than on the transform — colour shift, motion blur, motion trail, squash & stretch, anticipation — cannot cross over. The plugin names whichever applied to your animation in the notes rather than dropping them silently. [The fidelity guide](https://systergon.com/figma-motion-to-lottie) works through each. ## Where Lottie tends to be used It helps to have concrete cases in mind, because “we should use Lottie” in the abstract rarely survives a planning conversation. The most common is **feedback on a completed action** — a success tick, a saved state, a sent confirmation. These are short, they are everywhere in a product, and they benefit from being drivable: the animation plays when the request succeeds, not on a timer. Second is **loading and progress**, where the drivability matters even more. A Lottie can be held at a frame while work is in flight and released when it completes, which is something no rendered clip can do — and it is the difference between an animation that reflects what the system is doing and one that merely occupies the user. Third is **onboarding and empty states**, where the argument is mostly about weight and crispness. These animations tend to be large on screen, which is exactly where a video’s resolution shows and a vector’s does not. Where it is used least is anything long, photographic, or full-bleed. Lottie is a vector format; it has no advantage over video for a filmed clip or a complex illustration with hundreds of shapes, and at some point the file stops being small. ## Is it worth adopting? A fair question, because a format is a commitment and the cost is not zero — someone has to add a player dependency, and there is a first-time conversation about who owns the files. It is worth it when motion is part of your product rather than part of your presentations: when animations appear in the interface, respond to state, and get iterated. In that world Lottie removes an entire class of work — the rebuilding, the spec-writing, the arguing about whether the implementation matches the design — because the file _is_ the design. It is not worth it when animation is something you show in reviews and ship rarely. There, the overhead of a player and a handoff convention buys you nothing that a good MP4 does not, and you should send the MP4. The middle case — a few key animations, shipped, iterated occasionally — is where most teams actually live, and it is worth it there too, mostly because one file covers every platform. A change to the motion becomes one re-export rather than four implementation tickets. ![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) ## Frequently asked questions ### What is Lottie? A JSON file format for vector animation: shapes plus the keyframes that move them, drawn at runtime by a player. It originated at Airbnb and has official players for iOS, Android, the web and React Native, which is why one file can run on every platform. ### Does Figma support Lottie? Not natively. Figma’s _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. ### How do I get a Lottie from Figma Motion? Install Motion Path, animate your layer, press **Apply motion path**, then open the **…** menu and choose **Copy as code → Lottie**. Copy the JSON or download it as `motion-path.json`. ### Lottie or GIF? Lottie for anything going into a product — it is smaller, resolution-free, and can be driven by application state. GIF only where a video element will not run, which in practice means email, READMEs and issue trackers. ### Lottie or MP4? MP4 if the recipient will watch the animation; Lottie if they will build with it. Sending both is often the right answer: the MP4 so a ticket is understandable at a glance, the Lottie so it is buildable. ### Is Lottie better than CSS for web animation? Not automatically. For a simple interaction the browser should own, CSS `offset-path` is more readable and a developer can adjust the curve by hand. Lottie wins when the animation is complex, or when the same motion also has to run in a mobile app. ### Do I need to know code to export Lottie? No. The export is three clicks and produces a file you hand over. Everything about players and integration is your developer’s side of the line. ### Will my animation look exactly the same in Lottie? Everything on the layer transform — position, rotation, scale, opacity, easing — carries over exactly. Effects that live in the artwork or on the canvas cannot, and the plugin names them at export time rather than dropping them quietly. ### Is Motion Path free? Yes, on the Figma Community, with the Lottie and video 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 to Lottie](https://systergon.com/figma-motion-to-lottie) — what survives the conversion and what does not. - [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. - [300+ animation examples](https://systergon.com/motion-path/examples) — ready-made recipes you can apply and export immediately. - [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 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. - [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 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.