Lottielab

Lottielab 是一款面向产品团队的动效设计工具，主打在浏览器里创建和编辑 Lottie 动画，并直接交付到 iOS、Android 和网页。它把自己和 After Effects 区分开：不用装重型软件，界面按设计工具的习惯排布，产品设计师、前端甚至后端同事都能上手改。官网称已有 50 万以上设计师使用。

核心能力

• Lottie 原生编辑：以 Lottie 为核心格式，编辑结果在各平台保持 1:1 一致，避免导出后效果走样。
• 从设计稿导入：支持从常用设计工具导入素材，也可在 Lottielab 内从零绘制，官方称导入 Figma 与 After Effects 的大文件依然流畅。
• 动效编辑：提供淡入、路径动画、滑出等常用操作，官方强调易学但功能完整。
• 团队协作：支持实时评论、共同编辑与迭代，适合设计与研发在同一个文件上对齐。
• 体积优化：导出经过压缩优化的文件，在不明显损失画质的前提下加快加载。
• 模板库：提供免费模板，覆盖图标、插画、Logo、样机、作品集与社交媒体等场景。
• 多格式转换：官网工具列表包含 Lottie 转 GIF、MP4、WebM、dotLottie，以及 SVG 转 Lottie。
• Magic Animator：官网将其列为在售工具之一，用于加速动画生成。

适合谁

• 产品设计师，需要给 App 做引导页、加载态和图标微动效。
• 前端工程师，接到设计给的动效需求却不想打开 After Effects。
• 品牌与市场团队，做 Logo 动画和社交媒体短动效。
• 外包团队，需要把动画源文件交给客户并让对方自己改。

使用建议

• 从模板起步最快：挑一个接近的模板换成自己的素材，比从空白画布学工具更快。
• 官网提供免费开始入口，先用一个小图标动画跑通导入、编辑、导出、落地的全流程。
• 动效最终要跑在真机上，导出后在不同机型验证帧率与体积。
• 商用前确认模板与素材的授权范围，客户项目尤其注意。
• 团队协作时先约定图层命名规范，否则多人编辑容易乱。