设计师经常使用智能动画和弹簧或贝塞尔缓动在 Figma 中制作过渡原型。然后，开发人员需要在 React 中重现该运动。 Figma 不会将这些过渡导出为工作动画代码，因此工作是翻译。
首先记录原型的作用：什么触发了变化（点击、悬停、延迟后）、哪些层移动、哪些属性发生变化，以及时间（缓动曲线或弹簧的持续时间）。检查模式和原型面板显示这些值。
对于淡入淡出或颜色变化等简单情况，CSS 过渡就足够了。对于弹簧、手势、共享布局转换以及进入或退出动画，Motion（以前称为 Framer Motion）等库是 React 中的常见选择。使用设计师选择的相同弹簧值。
将这些值保存为运动标记，以便下一次转换使用相同的计时。我们免费的 Figma 动画到弹簧转换器将 Figma 缓动转换为弹簧设置。 AI 编码工具可以加快这一速度，特别是当连接到 Figma 的 MCP 服务器时，他们可以读取设计上下文。
对于具有多种状态的组件，例如带有加载、成功和错误的按钮，或者动画启动流程，手动重建会变得昂贵。我们制作的 ExodeUI 允许您设计该组件一次，然后使用 exodeui npm 包在 React 中播放它，并使用代码中的输入和事件来控制它。