# Export Your Figma Motion as Video or Lottie _August 4, 2026 · 6 min read · by Systergon_ > You animate something in Figma, then someone asks for a GIF for the release email, an MP4 for Slack, a Lottie for the iOS build — and the workflow falls apart into screen recordings and conversions. Motion Path now exports all of them. Video (MP4, GIF, WebM) is encoded by Figma itself, so the file you get back is canvas playback rather than an approximation of it. Lottie is the format iOS, Android, React Native and the web all consume — and the one thing Figma’s own Copy as doesn’t give you. Tags: Figma, Motion, Lottie, Export, Plugin URL: https://systergon.com/blog/motion-path-figma-video-lottie-export --- [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) You animate something in Figma. Then someone asks for it: a GIF for the release email, an MP4 for Slack, a Lottie for the iOS build. And that’s where the workflow used to fall apart — you’d screen-record the canvas, crop it, convert it, and hope the timing survived. Motion Path now exports to all of them. Two additions, both in the titlebar **…** menu. ## 1. Export video — MP4, GIF and WebM Figma itself grew a video encoder this summer (Plugin API Update 131, 16 July 2026), and Motion Path now hands your animation straight to it. That distinction matters: this isn’t a re-render or an approximation of your motion. **Figma encodes the same timeline it plays**, so the file you get back _is_ canvas playback. Open the **…** menu and choose **Export video**: ![Step-by-step in the Motion Path panel: the Animate tab with an object on an S-curve, the overflow menu opening to reveal Export video, the Export video panel set to MP4, then switched to GIF where a Loops field replaces Quality](https://systergon.com/blog/motion-path-figma-video-lottie-export/images/export-video-steps.gif) Pick your format and the panel adapts to it. **MP4** and **WebM** offer a quality preset; **GIF** swaps that for a **loop count**, because that’s the knob GIF actually has — leave it at `0` and it loops forever. ![The Motion Path Export video panel in Figma set to MP4: a format segmented control, Frame rate 30 fps, Quality High, Size 100 percent, a summary line reading MP4 30 fps 100% high quality, and a blue Export MP4 button](https://systergon.com/blog/motion-path-figma-video-lottie-export/images/export-video-mp4.png) Frame rate runs **12 / 24 / 30 / 60** for MP4 and WebM, **8 / 12 / 15 / 24 / 30** for GIF, and **Size** scales the output from 50% to 4×. A line under the controls tells you what you’re about to get before you commit to the encode. One rule worth knowing: Figma encodes a **top-level frame** — a frame sitting directly on the page. You almost never have that selected; you have the _layer_ that moves. So Motion Path walks up and finds the frame for you. Select the animated layer, or its frame, and export either way. ## 2. Lottie export Lottie is what actually ships. It’s the format iOS, Android, React Native and the web all consume, and it’s the one thing Figma’s own _Copy as_ doesn’t give you — native Motion copies out CSS, JSON and React, but not Lottie. It lives beside the other handoff formats. **…** menu → **Copy as code** → the **Lottie** tab: ![Step-by-step in the Motion Path panel: the Animate tab, the overflow menu opening to reveal Copy as code, the Copy as code panel showing CSS by default, then the Lottie tab selected showing the generated Lottie JSON](https://systergon.com/blog/motion-path-figma-video-lottie-export/images/lottie-steps.gif) You get a complete Lottie document, ready to copy or download: ![The Motion Path Copy as code panel with the Lottie tab selected: a description reading 60 frames at 60 fps, a code box showing Lottie JSON beginning with version 5.9.0, and a note that the moving layer is a placeholder shape to swap for your own artwork](https://systergon.com/blog/motion-path-figma-video-lottie-export/images/lottie-tab.png) The whole animation rides the layer’s **transform** — position, rotation, opacity and scale. The shape inside is a placeholder sized to your object, so a developer swaps it for the real artwork (or parents their asset to that transform) and keeps every bit of the motion. Notes under the snippet spell out what Lottie can’t carry — colour shift, motion blur, trail, squash & stretch, anticipation — rather than dropping them silently. ### Why the position keyframes are baked Worth being straight about, because it looks like a lot of keyframes when you open the file. Lottie has no equivalent of CSS’s `offset-path`: there is no way to say _“follow this curve, with this easing.”_ An object riding a curve simply cannot be two keyframes and a timing function. So the path is sampled densely and the easing is folded into _when_ each point along it is reached. The result is that your easing is preserved **exactly** rather than approximated — the same approach Motion Path already uses when it bakes to the Figma canvas. Travel is measured by real arc length too, so a dense cluster of vertices doesn’t quietly slow the object down. We checked it against a real player rather than trusting that the JSON looked plausible: 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. ## Also in this release Two smaller things you’ll notice in the preview. The preview now draws **your actual layer** riding the path, at its true size relative to the path, instead of a placeholder dot — so what you’re judging is the real composition. Toggle it with the shapes icon in the preview controls. ![The Motion Path preview showing a real blue rounded-square layer riding an S-curve path, with the draggable start point marked at the left and the preview controls along the top right](https://systergon.com/blog/motion-path-figma-video-lottie-export/images/preview-object.png) And dragging the **start point** now reports real numbers: distance from the path start and end, and the live X/Y under your cursor — measured against the parent frame, so it matches Figma’s own position panel instead of making you convert. ## Why it matters A motion design that only exists inside a Figma file is a design that has to be re-made by somebody else. The gap between _“it looks right in the panel”_ and _“it’s in the product”_ is where timing gets lost and intent gets negotiated away. Video closes the short half of that gap — the email, the deck, the Slack thread, the Dribbble post. Lottie closes the long half: the engineer drops in a file that already _is_ your timing, and nobody re-derives an easing curve from a screen recording. _Still writes real, native Figma Motion keyframes._ [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)