Figma Agent怎么用 AI设计助手画布内操作教程

Figma Agent是Figma内置的AI设计助手，可以在画布内直接用提示词生成、编辑和原型设计，不用切换工具。打开Figma Design文件后，你可以选中已有图层让它按上下文修改，也可以从空白画布开始描述需求。下面按“打开助手—生成设计—调整细节—制作原型”的顺序操作，跟着点就能试起来。

第一步：打开设计文件并唤出Agent

先在桌面应用或浏览器中打开Figma Design文件，确认当前文件允许编辑。点击左侧导航栏的“Agents”打开助手侧栏；也可以先在画布上选中一个图层，再按Mac的Command+Enter或Windows的Ctrl+Enter，调出画布内提示框。若没看到入口，先确认自己打开的是设计文件而非其他产品。

第二步：从需求生成第一版画面

在提示框里直接写清楚页面目标、设备尺寸、内容结构和视觉方向，然后点击发送。例如：“为户外运动App生成一张移动端首页，包含天气卡片、附近路线、底部导航，整体清爽，使用绿色强调色。”想看不同方向，可以明确要求生成三种布局或风格，方便并排比较后挑选。

第三步：用已有图层限定修改范围

要修改特定内容，先在画布上点选对应图层或画面，再打开Agent输入具体动作，例如“把这个主按钮改成深绿色，圆角保持一致”或“为卡片补上标题和两行说明”。选中对象再提问，助手更容易理解修改目标；一次尽量说一类变化，避免布局、文案和配色混在一句里。

第四步：参考设计系统和现有素材

如果项目已经使用组件库或变量，在提示中说出要遵循的库、组件或样式名称；也可用@提及相关设计资源，减少生成结果与现有规范不一致的情况。需要参考其他文件或图片时，点击提示框中的附件入口添加Figma文件、图片或文本资料，再说明哪些内容要沿用，哪些只作灵感参考。

第五步：继续迭代并比较不同方案

先检查生成结果的层级、间距、文案和组件，再在同一对话里给出可执行的修改指令，例如“标题缩短到一行”“卡片间距统一为16像素”或“保留布局，换成更克制的配色”。若想探索另一种方向，可另开一条提示同时尝试；满意后再手动微调细节，不必把每个像素都交给AI。

第六步：让Agent处理重复编辑

遇到多个页面都要改同一内容时，先说明涉及的页面或对象，再描述统一规则，例如“把这组页面里的旧按钮替换为主组件，并统一按钮文案大小写”。发送后检查每个页面，重点看组件是否替换正确、间距是否被意外改变。发现不合适的结果，可撤销操作，再缩小范围重试。

第七步：把静态页面连成可点击原型

先在画布准备好首页、详情页等必要画面，然后打开Agents，在提示中写明入口、用户动作和跳转结果，例如“点击首页路线卡片进入路线详情，点击开始按钮进入导航状态，返回按钮回到首页”。运行后逐个检查连接和交互是否符合流程；缺少分支时，继续说明触发条件和目标页面。

第八步：预览、补充边界情况并保存

点击原型预览，按真实使用顺序点一遍，检查按钮、页面跳转和状态反馈。若某条路径断开，可重新选中相关画面并要求补齐连接；若返回逻辑不对，就明确指出应回到哪个页面。确认视觉和交互都符合预期后保存文件，再和团队共享链接，请同事直接在画布上反馈。

第九步：没有Figma时尝试国内替代方案

如果手头没有Figma文件，或更习惯中文界面，也可以了解墨刀AI，把页面目标和功能流程写成提示词，从生成的界面继续调整并制作原型。进入润灭页面后，按页面提示开始体验；实际入口和可用功能以打开页面显示为准。无论用哪种工具，都建议先把用户流程讲清楚，再逐步润色视觉样式。