Figma Motion 到 Cursor：动效设计直接转代码的实战工作流

设计与开发之间的鸿沟一直是产品落地的痛点，尤其是复杂的交互动效。设计师在原型工具里调得再顺滑，交到工程师手上往往变了味。B站UP主 Cole 分享的一套工作流给出了新思路：先在 Figma Motion 里把动效反复打磨到满意，再借助 AI Agent 生成结构化提示，最后交给 Cursor 直接写成可运行的代码。

从灵感到动效：在 Figma Motion 里反复打磨

这套流程的起点是一个 landing page 的设计需求。Cole 提到，基于文案内容他想在「堆叠」这个概念上做些文章，于是从卡片布局入手，灵感来自 Figma 社区的一张 header 插画——想做一个堆叠卡片式的菜单交互效果。

真正花时间的是动效的调校。Cole 坦言，早期的几个版本都很「jank」（生硬别扭），他基本是在和 Agent 反复较劲，一点点调整时间曲线和缩放方式。他尝试了多种元素进场（scale in）的方案，逐步逼近想要的手感。

这个「试错」过程恰恰是整套工作流的价值所在——动效的好坏是主观的，需要设计师在可视化环境里反复感受、微调，而不是靠盲写代码。Cole 最终找到了一个满意的效果：元素上升、缓动，然后稳稳落回原位。这种「先在设计工具里定手感」的做法，把不确定性留在了成本最低的环节。

Figma Motion 是 Figma 内置的动效设计模块（部分功能通过插件或 Figma 官方的 Prototype 动画系统实现），允许设计师直接在设计稿上定义元素的运动轨迹、缓动曲线（easing）、延迟和持续时间，并实时预览效果。与传统的静态标注方式不同，Motion 让设计师可以「感受」动效而非「描述」动效——这对于需要反复调校手感的交互来说至关重要。缓动曲线（如 ease-in、ease-out、spring 弹簧曲线）决定了动画是否自然流畅，细微的参数差异在视觉上的感受可以相差甚远，而这种感受很难通过数值标注准确传达给开发者，必须在可视化环境中亲自感受和比较。

关键一步：让 Agent 生成可交付的提示词

动效满意之后，真正巧妙的衔接出现了。Cole 没有手动去描述动画参数，而是直接切到 Agent，把做好的动画丢给它，然后下达一个明确指令：「我要在网站上实现这个动画，给我一段包含所有 DOM 元素的提示词，好让我交给 LLM。」

Agent 随即输出了一份结构化的实现说明。这一步是整个链条的枢纽：它把设计工具里的可视化动效，翻译成了工程语言能理解的、带有 DOM 元素描述的提示词。相当于让 AI 充当了「设计到代码」的翻译官，省去了设计师用文字费力描述缓动曲线、延迟、层级关系的麻烦。

这里所说的「结构化提示词」，本质上是一份面向 LLM（大语言模型）的工程实现说明书。它通常包含：动画目标元素的 DOM 结构描述（如 HTML 标签层级、class 命名）、各元素的初始与结束状态（位移、缩放、透明度）、时间参数（duration、delay）以及缓动函数。相比设计师用自然语言描述「卡片慢慢升上来然后落下」，这类结构化说明能显著降低 LLM 的理解歧义，让 Cursor 等 AI 编码工具更精准地生成 CSS Animation、Web Animations API 或 JavaScript 动画代码。这一「设计工具 → 结构化描述 → 代码生成」的转译路径，正是当前 AI 辅助开发中最具潜力的突破点之一。

交给 Cursor：从提示词到可运行代码

拿到这份提示词后，Cole 直接把它贴进 Cursor，代码「非常快」就生成出来了。到这一步，原本停留在 Figma 里的动效已经变成了真实可运行的前端代码。

更进一步，落地成代码之后反而打开了新的可能性。Cole 在代码基础上继续叠加交互，比如加入了一个可拖拽（draggable）的小交互。这说明代码化不是终点，而是让动效具备了在真实环境里继续扩展的能力——这是纯设计原型难以做到的。

Cursor 是一款深度集成了 AI 代码生成能力的代码编辑器，基于 VS Code 构建，支持通过自然语言或结构化提示直接生成、修改代码。与直接使用 ChatGPT 等通用对话工具相比，Cursor 的优势在于它能感知整个项目的代码上下文，生成的代码可以直接嵌入现有文件，并支持在浏览器中即时预览效果。对于前端动效实现，Cursor 通常会根据提示词选择合适的实现方式——CSS Keyframes、JavaScript requestAnimationFrame，或基于 GSAP 等动画库——并生成完整的可运行片段，大幅缩短从设计稿到真实页面效果的时间成本。

工作流的价值与适用边界

完整链路可以概括为：Figma → Figma Motion → Figma Agent → Cursor（或其他 AI 编码工具）。它的核心逻辑是让每个环节各司其职：

• Figma Motion 负责主观的、需要反复感受的动效调校；
• Agent 负责把可视化结果转译为工程可读的提示词；
• Cursor 负责把提示词落地为真实代码。

这套方法的最大意义，是解决了动效「设计与实现脱节」的老问题。以往设计师标注得再细，工程师复现出来也常有偏差；而现在动效的「真身」直接由 AI 转译成代码，还原度更高。

需要注意的是，这仍是一个偏个人实验性质的工作流分享，来自单一创作者的经验。动效的复杂度、生成代码的质量与可维护性、以及不同 AI 工具的适配情况，都可能影响实际效果。Cole 自己也用了「wrestling with the agent」来形容调校过程——AI 并非一键出结果，仍需要人反复引导。

对于同时涉足设计与前端的独立开发者、或者小团队来说，这套流程提供了一个值得一试的思路：把主观判断留在可视化工具里，把重复劳动交给 AI。