LottieFiles

Figma Motion to Lottie: formats, limits & production workflow

Figma Motion to Lottie: formats, limits & production workflow

Figma Motion handles design-side exports like previews and Animated SVGs. LottieFiles takes it further, converting animations into production-ready formats: Lottie, dotLottie, and interactive runtime files.

Figma Motion handles design-side exports like previews and Animated SVGs. LottieFiles takes it further, converting animations into production-ready formats: Lottie, dotLottie, and interactive runtime files.

Open LottieFiles for Figma

Open LottieFiles for Figma

Launch Lottie Creator

Launch Lottie Creator

Figma Motion is now a native place to create animation inside Figma.

As of June 25, 2026, Figma’s beta FAQ confirms exports include MP4, GIF, WEBM, and Animated SVG, with Lottie listed as a future format.

For teams that need Lottie JSON, dotLottie, state machines, optimization, hosting, developer handoff, or runtime playback, LottieFiles is the production layer after the motion is created. This page explains which Figma Motion export becomes a shippable animation file, and when it should not.

Figma Motion is now a native place to create animation inside Figma.

As of June 25, 2026, Figma’s beta FAQ confirms exports include MP4, GIF, WEBM, and Animated SVG, with Lottie listed as a future format.

For teams that need Lottie JSON, dotLottie, state machines, optimization, hosting, developer handoff, or runtime playback, LottieFiles is the production layer after the motion is created. This page explains which Figma Motion export becomes a shippable animation file, and when it should not.

In short
In short

Create and preview in Figma Motion. Use LottieFiles when the animation needs to ship as Lottie, dotLottie, or an interactive runtime file.

Create and preview in Figma Motion. Use LottieFiles when the animation needs to ship as Lottie, dotLottie, or an interactive runtime file.

Create and preview in Figma Motion. Use LottieFiles when the animation needs to ship as Lottie, dotLottie, or an interactive runtime file.

Figma Motion exports are mostly for watching. Runtime files come from LottieFiles

Figma Motion exports are mostly for watching. Runtime files come from LottieFiles

Figma Motion exports are mostly for watching. Runtime files come from LottieFiles

Why does it matter? MP4, GIF and WEBM are playback assets, good for watching, sharing or placing in a deck. Animated SVG bridges toward Lottie when compatible. Lottie JSON and dotLottie are runtime assets you can load, control, theme, optimize and reuse in product interfaces.

Figma Motion can be inspected in Dev Mode and copied as CSS, JSON or React, or passed through the Figma MCP server. But dev-handoff JSON is not automatically Lottie JSON. Treat it as structured motion data until it has been mapped and validated.

Why does it matter? MP4, GIF and WEBM are playback assets, good for watching, sharing or placing in a deck. Animated SVG bridges toward Lottie when compatible. Lottie JSON and dotLottie are runtime assets you can load, control, theme, optimize and reuse in product interfaces.

Figma Motion can be inspected in Dev Mode and copied as CSS, JSON or React, or passed through the Figma MCP server. But dev-handoff JSON is not automatically Lottie JSON. Treat it as structured motion data until it has been mapped and validated.

Why does it matter? MP4, GIF and WEBM are playback assets, good for watching, sharing or placing in a deck. Animated SVG bridges toward Lottie when compatible. Lottie JSON and dotLottie are runtime assets you can load, control, theme, optimize and reuse in product interfaces.

Figma Motion can be inspected in Dev Mode and copied as CSS, JSON or React, or passed through the Figma MCP server. But dev-handoff JSON is not automatically Lottie JSON. Treat it as structured motion data until it has been mapped and validated.

Preview & Vector

Available in
Figma Motion today

Available in
Figma Motion today

MP4

Video playback, product demos and social previews.

GIF

Quick previews and lightweight stakeholder shares.

WEBM

Web video where a rendered asset is enough.

Animated SVG

Vector-style export and the bridge into Lottie.

MP4

Video playback, product demos and social previews.

GIF

Quick previews and lightweight stakeholder shares.

WEBM

Web video where a rendered asset is enough.

Animated SVG

Vector-style export and the bridge into Lottie.

MP4

Video playback, product demos and social previews.

GIF

Quick previews and lightweight stakeholder shares.

WEBM

Web video where a rendered asset is enough.

Animated SVG

Vector-style export and the bridge into Lottie.

MP4

Video playback, product demos and social previews.

GIF

Quick previews and lightweight stakeholder shares.

WEBM

Web video where a rendered asset is enough.

Animated SVG

Vector-style export and the bridge into Lottie.

Runtime

Runtime

Production targets

through LottieFiles

Production targets

through LottieFiles

Lottie JSON

Lightweight vector playback in apps and on the web. Loadable, controllable, and themeable. Planned in Figma, available now through LottieFiles.

dotlottie

The packaged format. Smaller delivery, plus state machines and theming in a single file. Recommended for most production use.

Lottie JSON

Lightweight vector playback in apps and on the web. Loadable, controllable, and themeable. Planned in Figma, available now through LottieFiles.

dotlottie

The packaged format. Smaller delivery, plus state machines and theming in a single file. Recommended for most production use.

Lottie JSON

Lightweight vector playback in apps and on the web. Loadable, controllable, and themeable. Planned in Figma, available now through LottieFiles.

dotlottie

The packaged format. Smaller delivery, plus state machines and theming in a single file. Recommended for most production use.

Lottie JSON

Lightweight vector playback in apps and on the web. Loadable, controllable, and themeable. Planned in Figma, available now through LottieFiles.

dotlottie

The packaged format. Smaller delivery, plus state machines and theming in a single file. Recommended for most production use.

Which motion format to use and where

Which motion format to use and where

Start from the destination, not the export menu. Find the row that matches where your animation ships, use the format in the middle and the last column is why it wins.

Start from the destination, not the export menu. Find the row that matches where your animation ships, use the format in the middle and the last column is why it wins.

Where it ships

Where it ships

Use this format

Use this format

Why this one

Why this one

Design review

Design review

GIF or MP4

GIF or MP4

Easy to drop in a deck or a Slack thread and share fast. No code needed.

Easy to drop in a deck or a Slack thread and share fast. No code needed.

Marketing embed

Marketing embed

MP4, WEBM, or Lottie

MP4, WEBM, or Lottie

Pick video for plain playback, or Lottie when you need a scalable vector that stays crisp.

Pick video for plain playback, or Lottie when you need a scalable vector that stays crisp.

Website Ul

Website Ul

Lottie or dotLottie

Lottie or dotLottie

Small files, programmatic playback, and responsive vector behavior in the browser.

Small files, programmatic playback, and responsive vector behavior in the browser.

Mobile app

Mobile app

dotLottie or optimized Lottie

dotLottie or optimized Lottie

Reusable across runtimes with tighter control over delivery size on device.

Reusable across runtimes with tighter control over delivery size on device.

Interactive states

Interactive states

dotLottie State Machine

dotLottie State Machine

One file carries states, triggers, and transitions, so the animation reacts at runtime.

One file carries states, triggers, and transitions, so the animation reacts at runtime.

Not sure yet

Not sure yet

Start with dotLottie

Start with dotLottie

The most flexible production target. It converts down to other formats when you need them.

The most flexible production target. It converts down to other formats when you need them.

Lottie is still a future format for Figma Motion. However, Animated SVGs from Figma Motion can be brought into Lottie Creator for further editing, optimization, or conversion before shipping as dotLottie.

From a Figma Motion to a
shippable asset in 5 steps

From a Figma Motion to a
shippable asset in 5 steps

Decide first whether the asset will be watched, embeded or controlled. That tells you which path to take.

Decide first whether the asset will be watched, embeded or controlled. That tells you which path to take.

1

1

1

Create

Create

Build timing, easing and keyframes in Figma Motion.

2

2

2

Export

Export

MP4, GIF, or WEBM for previews. Animated SVG to convert.

3

3

3

Convert

Convert

Run Animated SVG to Lottie, then compare against the original.

4

4

4

Finish

Finish

Repair, optimize and package in Lottie Creator.

5

5

5

Ship

Ship

Hand off with developer links, embed code and runtime notes.

The most important step is visual comparison. A valid file is not the same as a faithful animation. Check timing, easing, layer order, masks and responsive behavior before shipping.

Figma Motion JSON is not Lottie JSON

Figma Motion JSON is not Lottie JSON

A dev handoff describes the timeline with fields, keyframes, value and easing. It is structured motion data, not a drop-in Lottie file.


Translation and easing map toward Lottie, but layer models, masks, springs and effects need compatibility checks and visual QA. Lottie Creator is where that conversion gets finished.

Launch Lottie Creator

Launch Lottie Creator

Frequently asked questions

Frequently asked questions

Can Figma Motion export Lottie?

Figma's beta FAQ says Figma Motion currently exports MP4, GIF, WEBM, and Animated SVG, and says future formats will include Lottie. Until Lottie export is current and tested, use LottieFiles for Figma, Animated SVG to Lottie, SVG to Lottie, or Lottie Creator depending on the source asset.

Can Figma Motion export Lottie?

Figma's beta FAQ says Figma Motion currently exports MP4, GIF, WEBM, and Animated SVG, and says future formats will include Lottie. Until Lottie export is current and tested, use LottieFiles for Figma, Animated SVG to Lottie, SVG to Lottie, or Lottie Creator depending on the source asset.

What file formats does Figma Motion export?

As of June 25, 2026, Figma's beta FAQ lists MP4, GIF, WEBM, and Animated SVG as Motion export formats. It also says additional formats are planned, including Lottie.

What file formats does Figma Motion export?

As of June 25, 2026, Figma's beta FAQ lists MP4, GIF, WEBM, and Animated SVG as Motion export formats. It also says additional formats are planned, including Lottie.

Is Figma Motion JSON the same as Lottie JSON?

No. Dev handoff JSON can describe Figma Motion timeline data, but that does not make it Lottie JSON. A sample handoff included nodes, timeline duration, fields, keyframes, values, easing, and hold states. Those fields can be useful for a converter or validator, but they still need mapping and visual QA before becoming Lottie or dotLottie.

Is Figma Motion JSON the same as Lottie JSON?

No. Dev handoff JSON can describe Figma Motion timeline data, but that does not make it Lottie JSON. A sample handoff included nodes, timeline duration, fields, keyframes, values, easing, and hold states. Those fields can be useful for a converter or validator, but they still need mapping and visual QA before becoming Lottie or dotLottie.

Can Animated SVG from Figma become Lottie?

It can be a practical conversion path when the animation uses compatible SVG animation features. LottieFiles has an Animated SVG to Lottie converter, but every conversion should be checked for timing, easing, masks, layer order, and visual fidelity before production use.

Can Animated SVG from Figma become Lottie?

It can be a practical conversion path when the animation uses compatible SVG animation features. LottieFiles has an Animated SVG to Lottie converter, but every conversion should be checked for timing, easing, masks, layer order, and visual fidelity before production use.

Should a product team use GIF, video, Lottie, or dotLottie?

Use GIF, MP4, or WEBM when the animation is only a rendered preview or playback asset. Use Lottie JSON when the animation needs lightweight vector playback in an app or website. Use dotLottie when the team needs packaging, smaller delivery, theming, or state machine behavior.

Should a product team use GIF, video, Lottie, or dotLottie?

Use GIF, MP4, or WEBM when the animation is only a rendered preview or playback asset. Use Lottie JSON when the animation needs lightweight vector playback in an app or website. Use dotLottie when the team needs packaging, smaller delivery, theming, or state machine behavior.

When is Lottie the wrong choice?

Some motion should not become Lottie. For a one-off preview, a social GIF, or a launch video, the MP4, GIF, or WEBM export from Figma Motion is enough. If the animation depends on springs, shaders, audio sync, or complex masks, those may not map cleanly and can need a manual rebuild or a different tool, so do not promise an automatic conversion. And when you need frame-perfect video with footage or compositing, use a video timeline. Lottie is lightweight vector motion for app and web interfaces, not a replacement for video.

When is Lottie the wrong choice?

Some motion should not become Lottie. For a one-off preview, a social GIF, or a launch video, the MP4, GIF, or WEBM export from Figma Motion is enough. If the animation depends on springs, shaders, audio sync, or complex masks, those may not map cleanly and can need a manual rebuild or a different tool, so do not promise an automatic conversion. And when you need frame-perfect video with footage or compositing, use a video timeline. Lottie is lightweight vector motion for app and web interfaces, not a replacement for video.

Where does Lottie Creator fit?

If the final Figma file needs editing after conversion, use Lottie Creator. The web-based Lottie Creator lets you add a State Machine for interactive animations, theming for color and motion changes, and motion tokens for real time data updates.

Lottie Creator imports Lottie JSON, dotLottie, SVG, SMIL animated SVG, and all other file types using our universal file importer. It exports Lottie JSON, dotLottie, optimized Lottie, SMIL animated SVG, GIF, MP4, MOV, and WebM.

Where does Lottie Creator fit?

If the final Figma file needs editing after conversion, use Lottie Creator. The web-based Lottie Creator lets you add a State Machine for interactive animations, theming for color and motion changes, and motion tokens for real time data updates.

Lottie Creator imports Lottie JSON, dotLottie, SVG, SMIL animated SVG, and all other file types using our universal file importer. It exports Lottie JSON, dotLottie, optimized Lottie, SMIL animated SVG, GIF, MP4, MOV, and WebM.