---
title: "Figma 做动画并导出 GIF、MP4、Lottie，自带 Motion（Beta）和插件各管什么"
excerpt: "Figma Motion 已逐步开放：顶部切到 Motion 用时间轴和关键帧做动画，直接导出 GIF、MP4、WebM、SVG 和 Lottie；讲清套餐与 Lottie 限制，再看觅件库 9 款动画插件分别补哪块。"
canonical: https://plugmate.figmod.top/blog/figma-motion-animation
---

# 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」](https://help.figma.com/hc/en-us/articles/41274629073303-Explore-Figma-Motion) 的说明：

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

### 关键帧怎么打

[「Add, select, and delete keyframes」](https://help.figma.com/hc/en-us/articles/41307938657559-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?」](https://help.figma.com/hc/en-us/articles/4406787442711-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」](https://help.figma.com/hc/en-us/articles/41307983648407-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 噪点颗粒感教程](/blog/figma-noise-texture)，在做动画前就想好要不要保留它；渐变相关可以看 [Figma 四种原生渐变](/blog/figma-gradients)。

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

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

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

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

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

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

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

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

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

### 想要比 Beta 更全的动画工具

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

### 想用 AI 先出几版动效草稿

- [Magic Animator ｜动画](/plugin/plugin-470)：选中画框或组件一键生成 4 种可继续编辑的动画方案，可导出 MP4、GIF、Lottie JSON 等。
- [Jitter · Animation for Figma丨动画](/plugin/plugin-364)：把 Figma 设计导入 Jitter 做动画，有 400+ 模板和多人协作，可导出 MP4、MOV、WebM、GIF、Lottie；介绍里写明一次只能导出一个画框或图层，复杂蒙版支持有限。
- [Figma to Lottie Animation｜Lottie 动画](/plugin/plugin-471)：把设计导入 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。

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