Language简体中文
支柱 02·动效设计指南
Figma Motion：它能做什么和不能做什么（以及用于生产的内容）
Figma Motion 是在 Figma 内设计运动的最快方法。 ExodeUI 适用于该运动必须在产品中运行、具有状态、物理特性和用户输入的情况。
What is Figma Motion：它能做什么和不能做什么（以及用于生产的内容） in ExodeUI?
Figma Motion 是 Figma 的内置动画模式，于 2026 年 6 月 24 日推出公测。它向设计框架添加了时间轴，以便您可以对位置、缩放、旋转、颜色和不透明度进行关键帧设置，然后将结果导出为 MP4、WebM、GIF、动画 SVG、Lottie 或 dotLottie。它停在设计文件上：导出的动画不会自行运行您的产品，并且状态、输入和数据绑定仍然必须在代码中构建。当运动必须在 Web、iOS 和 Android 上的真实应用程序中运行并由状态、物理和用户输入驱动时，ExodeUI 更适合。
核心架构
为什么工程师和设计师选择 ExodeUI
Design, logic and motion in one file that runs inside your app.
可运行组件与导出剪辑
ExodeUI 输出是运行时在您的应用程序中播放的 .exode 文件。 Figma Motion 导出视频、GIF、SVG 或 Lottie，播放动画但不携带您的应用程序状态。
连接到您的应用程序的状态机
将空闲、加载、成功和错误建模为触发代码触发的状态，而不是将每个组合保存为 Figma 变体。
对输入做出响应的物理
弹簧和连续动量在实时产品中运行，因此拖动或甩动会以用户的速度继续，而不是固定的曲线。
带上你的 Figma 作品
框架会遇到 ExodeUI Figma 插件，因此您可以继续在 Figma 中进行设计并在 ExodeUI 中构建交互部分。
客观评价
ExodeUI 相比如何 Figma Motion
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- 作为运行组件提供：.exode 文件在 React、React Native、SwiftUI、Flutter 等中播放，因此不会手动重建运动
- 具有应用程序在运行时触发的输入和事件的状态机
- 对实时产品中的拖动和手势速度做出响应的弹簧和物理原理
- MCP 服务器，以便 Claude Code 和 Cursor 等 AI 编码工具可以创建和编辑运动文件
Figma Motion
- 运动存在于设计文件中，除非您将其导出为视频、GIF、SVG 或 Lottie；它不会单独作为您的应用程序组件运行
- 导出的 Lottie 和 dotLottie 可以播放动画并在格式级别携带交互状态，但它们不会连接到您的应用程序数据
- Figma Motion 处于公测阶段；发布动画组件、代理生成和高分辨率导出需要付费完整席位
- 3D 变形宣布即将推出，但尚未发货
开发者交接
在您的代码中使用它
Your app loads the compiled file through the ExodeUI runtime and talks to it through inputs and events.
从 'exodeui' 导入 { ExodeUICanvas }；
// 弹簧、状态和计时位于 .exode 文件中（设计于
// 编辑器）。您的代码传递输入并听取事件返回。
导出函数 FluidCard() {
返回（
<ExodeUI画布
src =“/fluid_card.bexode”
onTrigger={(name) => console.log('ExodeUI 事件：', name)}
/>
）；
}Figma Motion 是什么
Figma Motion 是 Figma 中的一种模式，它将动画时间线放在您的设计旁边。 Figma 在 Config 2026 上推出，并于 2026 年 6 月 24 日开始推出，目前仍处于公开测试阶段，因此功能可能会发生变化。您可以将帧切换到运动模式和关键帧属性，例如位置、比例、旋转、颜色、描边宽度、路径修剪和弧线。它附带动画预设（淡入淡出、旋转、缩放、调整大小等）和自定义样式、用于缓动和计时的运动变量、贝塞尔曲线和弹簧，以及在您拖动时记录变化的自动键控。后来更新在时间轴上添加了文本动画和音频。当您在所有 Figma 计划（包括 Starter）上进行编辑时，Motion 可用； Figma 为政府计划没有它。
- 在 Config 2026 上发布，于 2026 年 6 月 24 日推出公测版
- 时间轴、关键帧、预设、自定义样式、运动变量和弹簧
- 时间轴上的文本动画和音频已于 2026 年 9 月 30 日更新中发布
- Figma Motion 页面上列出的 3D 变换即将推出
Figma Motion可以导出什么
从带有动画的帧中，您可以直接从 Figma 导出 MP4、WebM、GIF 或动画 SVG。 2026 年 9 月 30 日，Figma 还添加了 Lottie 和 dotLottie 导出。大于 1920 x 1080 或每秒 30 帧以上的导出需要付费计划。 Lottie 导出并不支持所有内容：着色器、视频和角度渐变以静态图像的形式输出，并且一些效果（例如投影、噪点和玻璃）会展平至其第一帧外观，因此 Figma 建议在您计划使用的播放器中测试该文件。开发模式显示完整的运动时间线，并且可以将动画值复制为CSS、JSON或React（包括motion.dev），并且Figma MCP服务器将动画传递给编码代理。复制代码和发布动画组件需要付费的 Full 席位或 Dev 席位。
视频和图像
MP4、WebM、GIF 和动画 SVG，免费套餐的上限为 1920×1080 和 30 FPS。
Lottie 和 dotLottie
2026 年 9 月 30 日添加；不支持着色器、视频和角度渐变，并且某些效果会展平到第一帧。
代码和代理
开发模式将值复制为 CSS、JSON 或 React，并且 Figma MCP 服务器将动作传递给付费席位上的编码代理。
Figma Motion停止生产的地方
Figma Motion 擅长设计界面附近的运动，其导出和开发模式输出弥补了大部分旧的切换差距。限制在于导出的内容：视频、GIF 或 Lottie 文件是播放资产，而开发模式中的代码是开发人员仍在连接的片段。两者都作为您的产品组件单独运行，并且都不受应用程序内的状态和数据的约束。如果按钮必须处于空闲、悬停、按下、加载、禁用和错误状态，并且动画必须对 Web、iOS 和 Android 上的数据和用户输入做出反应，则必须在每个代码库中构建该逻辑。 Figma Motion 现在比发布时涵盖了更多的运动设计和切换步骤；运行时步骤是交给为其构建的工具的地方。
如果动作必须在应用程序中运行
ExodeUI 是一款用于交互 UI 和动画的浏览器和桌面工具，适用于设计师、开发人员和 AI 代理。您可以在带有状态机、弹簧物理、输入和事件的开放 .exode 文件中构建一次运动，然后将其与 React、Vue、Svelte、Angular、Solid、React Native、SwiftUI 和 Flutter 的运行时包一起提供。您的代码传入输入并听取事件返回，因此同一文件在应用程序中运行，而不是在每个平台上重新构建。 MCP 服务器允许 Claude Code、Cursor 和其他 AI 编码工具根据简单语言提示创建和编辑文件。您可以使用 ExodeUI Figma 插件从 Figma 引入帧。我们制作 ExodeUI，因此请相应地权衡这部分。
Topic Cluster Network
探索互联概念和工具
有疑问吗？
常见问题解答
通过真实的运动构建生命组件。
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.