EasyLottie
Figma Motion 动画转换为 Lottie JSON、包、Web 与 App

Figma 动画转 Lottie

在 Figma 里做了动画(Figma Motion / Smart Animate)?导出为 SVG、WebM 或 GIF,在浏览器里转成开发能直接用的 Lottie —— 免费、本地处理、尽量输出矢量,文件不上传。

SVG → 真矢量 Lottie支持 WebM / GIF100% 本地无需注册

为什么把 Figma 动画转成 Lottie?

Figma 能把动效导出为 SVG(CSS @keyframes)、WebM 或 GIF,但开发要的是 Lottie。Lottie 体积小、分辨率无关,在 Web/iOS/Android/React/Flutter 等原生播放。EasyLottie 把你的 Figma 动效导出转成 Lottie:动画 SVG 转成真矢量 Lottie;WebM/GIF 走视频转换器。

如何把 Figma 动画转成 Lottie

  1. 1
    从 Figma 导出
    把动画/原型导出为动画 SVG(或 WebM / GIF)。
  2. 2
    拖进来
    把文件拖到上方工具里,全程浏览器本地处理。
  3. 3
    得到矢量 Lottie
    动画 SVG 会转成真矢量 Lottie 并实时预览;WebM/GIF 转到 视频 → Lottie 转换器。
  4. 4
    下载使用
    下载 .json 放进你的 Web/App 项目 —— 无需 After Effects。
🎨

只想给 Figma SVG 改个色?

免费修改 Figma 导出的动画 SVG 颜色 —— 自动检测每个颜色,实时预览(保留动画)替换,然后下载。

打开 SVG 改色工具

常见问题

可以免费把 Figma 动画转成 Lottie 吗?

可以。EasyLottie 免费把 Figma 动画导出(SVG/WebM/GIF)转成 Lottie,全程浏览器本地处理,无需注册、不上传。

SVG 能转成真矢量 Lottie 吗?

能。动画 SVG(Figma 的 CSS @keyframes 导出)会被编译成真矢量 Lottie —— 体积小、分辨率无关,不是栅格套壳。

WebM 或 GIF 导出怎么办?

WebM/GIF 是栅格视频,请用我们的 视频 → Lottie 转换器(支持 MP4/MOV/WebM/GIF 及图片序列)。

文件会被上传吗?

不会。所有转换都在你的浏览器本地完成,设计稿不离开你的电脑。

相关工具

Video → LottieLottie PreviewSVG Color ChangerColor Changer