EasyLottie指南
如何将 Figma 动画转换为 Lottie（不带 After Effects）
Figma Motion 导出 SVG、WebM 或 GIF，但您的代码库需要 Lottie。本指南展示了基于浏览器的最快路径 - 以及动画 SVG 何时可以成为真正的矢量 Lottie。
差距：Figma出口动议，开发商出货Lottie
Figma 现在可以导出动画，但只能导出为 SVG（使用 CSS @keyframes 制作动画）、WebM 或 GIF。另一方面，产品代码几乎总是需要 Lottie - 一种紧凑的 JSON 格式，您可以在任何尺寸下控制、主题化并保持锐利。 Figma 中没有内置的“导出到 Lottie”按钮，通常的建议是使用 Bodymovin 插件重建 After Effects 中的整个内容。重新创建您已经设计的动作需要大量工作。
好消息是动画 SVG 已经是带有关键帧的矢量数据。这意味着它可以在浏览器中直接编译为真正的矢量 Lottie - 不包装为视频帧 - 因此您可以完全跳过 After Effects 并保持文件很小。
您应该使用哪个 Figma 导出？
您从Figma中选择的导出决定了您可以取回什么样的Lottie。当您想要最小、最清晰的结果并且您的动画是基于矢量的时，请选择 SVG。当动画依赖于效果时，请使用 WebM 或 GIF Figma 只能光栅化。
| Figma出口 | 最适合 | EasyLottie 中的结果 |
|---|---|---|
| 动画 SVG (CSS @keyframes) | 矢量形状，简单的运动 | 真正的矢量 Lottie - 小且与分辨率无关 |
| WebM | 效果、渐变、复杂运动 | Lottie ZIP / GIF / 透明 WebM 通过视频引擎 |
| GIF | 快速光栅捕捉，广泛支持 | Lottie ZIP / GIF 通过视频引擎 |
分步：将 Figma 动画转换为 Lottie
整个过程在您的浏览器本地运行。没有上传任何内容，并且您不需要帐户或任何桌面软件。
- 在 Figma 中，导出帧或动画。对于矢量结果，将其导出为动画 SVG。如果动画使用 Figma 光栅化效果，请改为导出 WebM 或 GIF。
- 打开EasyLottie的Figma到Lottie工具并将文件放入。
- 动画 SVG 被编译为真实矢量 Lottie。 WebM 或 GIF 通过内置视频到 Lottie 引擎进行路由。
- 检查实时预览，然后下载 .json（或用于光栅源的 ZIP）。
- 将文件直接放入lottie-web、lottie-react、Flutter 或Android 中。
为什么“真实向量”很重要
光栅包装器（存储在 Lottie 内的视频帧）很大，放大后会变得模糊。真正的矢量 Lottie 将形状保持为路径，因此它保持几千字节，并且在任何屏幕和任何像素密度上看起来都很清晰。这正是您对手工构建的 Lottie 的期望，这就是为什么只要您的 Figma 动画是基于矢量的，矢量路径就值得瞄准。
当 SVG 无法成为干净向量 Lottie 时
某些 Figma SVG 导出包含嵌入的光栅图像、渐变、蒙版或滤镜效果，这些效果尚未清晰地映射到矢量 Lottie 形状上。发生这种情况时，该工具会告诉您并指向视频路径：从 Figma 导出相同的动画作为 WebM 或 GIF，然后使用视频到 Lottie 工具将其转换。您仍然可以获得可用的 Lottie 或透明 Web 资源 - 它只是由框架而不是路径支持。
如果您只需要对静态或动画 SVG 重新着色而不是对其进行转换，请使用 SVG 换色器，它可以保留动画并允许您通过实时预览交换颜色。
快速清单
- 从 Figma 导出为动画 SVG（用于矢量）或 WebM/GIF（用于效果）。
- 将文件放入 Figma 至 Lottie 工具中 - 未上传任何内容。
- 确认实时预览与您的 Figma 动画匹配。
- 下载矢量源的 .json，或光栅源的 ZIP。
- 如果 SVG 使用图像或滤镜，请改为转换 WebM/GIF 导出。
常见问题
我可以在没有 After Effects 的情况下将 Figma 动画转换为 Lottie 吗？
是的。 EasyLottie 完全在浏览器中将 Figma Motion 导出转换为 Lottie - 无需 After Effects、无需 Bodymovin，也无需源文件。
Figma是否直接导出Lottie？
否。Figma 将动画导出为 SVG、WebM 或 GIF。 EasyLottie 通过将这些出口转换为 Lottie 来弥补这一差距。
哪个 Figma 导出提供最好的 Lottie？
动画 SVG (CSS @keyframes) 可以成为真正的矢量 Lottie - 小且与分辨率无关。当动画使用 Figma 光栅化效果时，WebM 或 GIF 是最佳选择。
转换时我的文件会上传吗？
不会。转换是 100% 在您的浏览器本地；您的 Figma 导出永远不会离开您的设备。
免费吗？
是的，它是免费的，无需注册，也没有水印。