Figma 做动画并导出 GIF、MP4、Lottie，自带 Motion（Beta）和插件各管什么

设计师常搜的几个问题：Figma 能不能直接做动画？做好的动效怎么导出成 GIF、MP4，给开发的话能不能出 Lottie？

先说结论：现在能，而且先不用装插件。 Figma 在 2026 年 6 月 24 日起逐步开放了 Figma Motion（目前是公开 Beta），在设计文件里就有时间轴、关键帧、缓动和预设动画，做完可以直接导出 MP4、WebM、GIF、SVG，帮助中心还写了 Lottie / dotLottie 导出。插件更适合三类需求：把已有原型流程录成 GIF、导入现成的 Lottie 动画、或者想用 AI 一键出几版动效草稿。

下面按「自带能力 → 导出 → 插件补位」的顺序讲，每一步都对应 Figma 帮助中心或插件作者的说明。

先分清两种「动画」

Figma 里其实有两套东西容易混：

原型动画（Prototype / Smart Animate） Figma Motion（时间轴动画） 用来干什么 点击、悬停、延时跳转等交互演示 做一段「播放出来」的动效，比如加载动画、Logo 动画、产品演示 怎么控制 在原型连线上设触发方式和过渡 在时间轴上打关键帧、调缓动 能否直接导出视频/GIF 帮助中心的动画导出说明针对的是 Motion 可以，见下文

如果你要的是「能点的交互稿」，还是用原型；要的是「一段能发出去、能交给开发实现的动效」，用 Motion。

方法一：用 Figma Motion 自己做（所有套餐可用，Beta）

按 Figma 帮助中心「Explore Figma Motion」 的说明：

• 入口：在设计文件顶部工具栏切换到 Motion。看不到这个选项时，先确认你对文件有 can edit（可编辑）权限。
• 时间轴：进入 Motion 后，屏幕底部出现时间轴，在这里打关键帧、调动画位置和时长、预览。新动画默认时长是 2000 毫秒，可以在时间轴控制里的 Duration 改。
• 预设动画：不想手打关键帧时，可以先套预设动画快速出效果。
• 缓动：可以用缓动曲线和弹簧（spring）动画控制加速、减速，让动作不那么机械。

关键帧怎么打

「Add, select, and delete keyframes」 给的基本逻辑是：一个属性至少要两个关键帧（起始和结束），中间由 Figma 自动补间。支持关键帧的属性，右侧栏字段旁边会出现菱形图标。

手动打关键帧的流程：

1. 把播放头拖到动画开始的位置。
2. 点要做动画的属性旁边的 Add keyframe，时间轴上会出现一个关键帧。
3. 在属性框里输入起始值。
4. 把播放头拖到动画结束的位置，输入新的值，就会生成第二个关键帧。两个关键帧之间会连一条线，点这条线可以改缓动曲线。
5. 按空格或点 Play 预览。

想更快，可以打开时间轴控制里的 auto-keyframe（自动关键帧）：开启后时间轴顶部和播放头会出现红线，之后你在设计上改的每个值都会被自动记成关键帧。官方特别提醒：开着它时误改一个值，也会多出一个不想要的关键帧，做完记得关掉。

一个可以直接照做的小练习（来自官方加载动画教程）：选中一个转圈图形，打开自动关键帧，把播放头拖到 1400 毫秒处，在右侧栏把旋转改成 360，时间轴上就会自动生成 0° 和 360° 两个关键帧，按空格就能看到它转起来。

做成可复用的动效系统

如果团队里很多地方要用同一种动效，Motion 支持把动画做成动画组件反复使用，也支持时长和缓动变量，避免每个人手调出不一样的节奏。开发可以在 Dev Mode 里用只读时间轴查看动画，并复制 CSS、JSON 或 motion.dev 的代码；也能通过 Figma MCP 服务器把动画信息交给 AI 编程工具。

有哪些限制

按 Figma 帮助中心「What Figma features are in beta?」：

• Motion 目前是公开 Beta，功能可能变化，也可能有性能问题。
• 所有套餐都能用，但Government 套餐不提供。
• 发布动画组件、用 Figma agent 生成动画、高分辨率视频导出，需要付费套餐的 Full 席位。
• 用 Figma agent 生成动画目前 Beta 期间不扣 AI 额度，正式上线后会按标准 AI 额度计算。

方法二：直接从 Figma 导出 GIF、MP4、WebM、SVG

按 「Export animations from Figma」：

1. 选中包含动画图层的顶层画框（直接放在画布上的 Frame）。带动画的顶层画框会有 Motion 图标。动画图层必须放在画框里才能导出。
2. 在右侧 Export 区域切到 Animated 标签。
3. 设置导出参数：格式（MP4、WebM、GIF 或 SVG）、尺寸、帧率；MP4 和 WebM 可以调质量（压缩程度）；GIF 可以选循环播放或只播一次。
4. 点 Export，文件会在新标签页打开，再点 Download 下载。桌面端会直接让你选保存位置。

几个容易踩的点：

• 看不到 Animated 标签：多半是选中的不是顶层画框。只有顶层画框能导出动画。
• 免费版有分辨率和帧率上限：超过 1920×1080 或超过 30 FPS 的导出，需要 Professional、Education、Organization 或 Enterprise 套餐。
• 文件要允许复制和分享，否则不能导出。
• 帧率越高越流畅，但文件越大。发群聊或文档的 GIF，可以先从较低帧率试起。

给开发：导出 Lottie / dotLottie

同一篇帮助文档写了 Lottie 导出：在 Animated 标签下选 Lottie（不压缩的 JSON，一个文件只能放一段动画）或 dotLottie（压缩包，会把图片和字体一起打包，可放多段动画）。Lottie 是矢量的，放大不糊、体积小，开发还能改颜色、控制播放片段、绑定真实数据（比如让进度条跟着真实加载百分比走）。

但这几样要注意：

Figma 效果 Lottie 导出情况 Shader 着色器 不支持，会导出成不动的平面图 视频 不支持，请改导 MP4、WebM 或 GIF 角度渐变（Angular） 不支持，会变成平面图；想保持矢量，换成线性或径向渐变 投影、噪点、玻璃效果 部分支持，动画过程中不会变化，只用第一帧的样子

官方建议：上线前在你们生产环境要用的 Lottie 播放器里实际测一遍。用了噪点效果的设计，可以参考我们之前写的 Figma 噪点颗粒感教程，在做动画前就想好要不要保留它；渐变相关可以看 Figma 四种原生渐变。

自带工具不方便的，再交给插件

数据来自觅件插件库：觅件「动画」分类目前收录 9 款插件，其中 8 款在库里标为免费、1 款标为付费；9 款里有 7 款的介绍写了可以导出 GIF，6 款写了支持 Lottie（导出或导入）。

下面按需求分，只写插件作者介绍里明确写到的能力。

想把已有原型流程录成 GIF：Prototype Flow to GIF

Prototype Flow to GIF｜原型导出GIF：按原型 Flow 的顺序播放并导出 GIF，会读取原型里已经设好的延时和过渡时长，GIF 保持原画框尺寸。边界也写得很清楚：主要读取 After delay（延时）触发的时间，点击触发的画框会用默认间隔；暂不支持捕捉组件内部的 Smart Animate 等动画；使用前至少要设一个 Flow 起点。适合把已有交互稿快速发给产品或老板看节奏。库里标为免费。

想在原型里快速加循环小动效：Animate it

Animate it丨动画：选中图层后，用预设直接生成带动画的 Smart Component，内置 Fade、Rotate、Zoom、Slide、Bounce、Breathe、Shake、Blink 等，可选是否循环。适合按钮、图标、状态反馈这类原型里的小动效。库里标为免费。

想导入现成的 Lottie 动画：Lottie Flow

Figma 帮助中心讲的是导出 Lottie。反过来要把开发或动效同事给的 .json 放进 Figma 看效果，可以用 Lottie Flow ｜lottie动画：支持拖拽导入 Lottie JSON，在 Figma 里预览播放，并转成矢量和组件变体，自动连好延时交互，做 Loading、动画图标的原型很顺手。它还支持丢帧来减小文件体积。库里标为免费。

想要比 Beta 更全的动画工具

• MotionKit｜动画：在插件里做时间轴、逐帧（带洋葱皮）、形状变形、文字逐字动画和下落、弹跳等物理效果，可导出 MP4、GIF、PNG、Lottie，介绍中提到可与 Figma Motion 互相导入导出，并称离线使用、无订阅。
• Figmotion丨动画：独立的动画编辑窗口，时间轴加表达式，可导出 Lottie JSON 和 GIF、MP4、WEBM。
• Motion – Animate UI & Create Animations in Figma丨动画：直接在画布上做微交互和转场，有近 100 种预设、路径动画，导出格式最多（含 APNG、Animated SVG、CSS、逐帧 PNG）。**库里标为付费。**注意它和 Figma 自带的「Figma Motion」不是一个东西，搜索时别搞混。

想用 AI 先出几版动效草稿

• Magic Animator ｜动画：选中画框或组件一键生成 4 种可继续编辑的动画方案，可导出 MP4、GIF、Lottie JSON 等。
• Jitter · Animation for Figma丨动画：把 Figma 设计导入 Jitter 做动画，有 400+ 模板和多人协作，可导出 MP4、MOV、WebM、GIF、Lottie；介绍里写明一次只能导出一个画框或图层，复杂蒙版支持有限。
• Figma to Lottie Animation｜Lottie 动画：把设计导入 Lottielab 做关键帧和交互状态，导出 Lottie、GIF、最高 4K MP4。

这三款都需要跳到各自的外部编辑器或服务里完成动画。它们在库里标为免费，但高清导出、团队功能等是否收费，以安装时提示为准。

按需求选，一张表看完

你的需求 先用 不够再用 做加载动画、Logo 动画、产品演示短片 Figma Motion MotionKit、Figmotion 导出 GIF / MP4 发群里或放文档 Motion 的 Animated 导出 Prototype Flow to GIF（原型流程） 给开发 Lottie Motion 导出 Lottie / dotLottie Figmotion、MotionKit 把别人给的 Lottie 放进 Figma — Lottie Flow 原型里加循环小动效 原型 + Smart Animate Animate it 不想从零做，先要几版方案 Motion 里的 Figma agent（需付费 Full 席位） Magic Animator、Jitter

常见问题

Figma 工具栏里没有 Motion？
先确认你对文件有可编辑权限；Motion 从 2026 年 6 月 24 日起是逐步开放的，Government 套餐不提供。

免费版能导出动画吗？
能。帮助中心写的是 Starter 套餐也可以导出，但超过 1920×1080 或 30 FPS 需要付费套餐。

原型里的 Smart Animate 能直接导成 GIF 吗？
Figma 的动画导出说明针对的是 Motion 时间轴里的动画。原型流程想要 GIF，可以试 Prototype Flow to GIF，但它不捕捉组件内部的 Smart Animate。

想按场景找更多动画、原型类插件，可以在 觅件 里直接用中文搜「动画」「Lottie」「GIF」，也能从「动画」分类进去看全部 9 款。已经在用 Cursor、ChatGPT、Claude、Kimi 等 AI 工具的话，可以按 MCP 教程 连上觅件，直接说「帮我找能导出 Lottie 的 Figma 插件，先看免费的」。