- 掌握 6 种 Figma Agent 的核心应用场景与具体操作指令
- 学习如何利用连接器（Connectors）整合外部反馈，自动标注设计
- 了解如何创建和使用技能（Skills）来自动化重复性设计任务
- 探索通过代码层（Code Layers）在画布上构建和测试交互原型
- 学会制作自定义着色器（Shaders）和生成式插件来扩展设计表现力
背景：为什么现在必须掌握 Figma Agent
Figma Agent 是一个直接内置在 Figma 画布中的 AI 助手。它不同于通用的聊天机器人，而是专为设计工作流打造，能够理解你的设计文件、组件库和项目上下文。它的核心价值在于将 AI 能力无缝嵌入到你已有的工作环境中，让你无需在多个工具间切换，就能完成从信息处理、创意探索到原型构建的多种任务。
根据官方资料，新发布的 Agent 在遵循指令和处理长任务方面质量更高，在由专业设计师评估的任务中，其表现优于旧版本的比例超过 60%。这意味着它不再只是一个玩具，而是能切实提升产出效率与质量的协作伙伴。
它能解决什么问题？ 设计师日常面临诸多挑战：会议反馈散乱难以整理、设计评论堆积成山、探索多种布局方案费时费力、静态设计难以评估交互体验、想要独特视觉效果却受限于工具内置功能。Figma Agent 正是为了应对这些具体痛点而生。
目前，Figma Agent 可用于 Starter、Professional、Organization 和 Enterprise 计划，以及高等教育计划。Collab、Dev 和 View 席位用户可以在其草稿中使用 Agent。具体价格和版本详情请以官方最新说明为准。
准备：开始使用前你需要什么
要充分利用 Figma Agent，你需要确保软件版本和账号权限支持，并准备好相关的素材与上下文。
- 软件与账号：你需要一个支持 Figma Agent 的 Figma 账号（Starter、Professional、Organization、Enterprise 或高等教育计划）。确保你使用的是最新版本的 Figma。
- 设计文件：一个包含设计内容（框架、组件、评论）的 Figma 文件。Agent 的能力发挥依赖于画布上已有的元素和上下文。
- 设计系统库：如果你在团队中工作，确保你的团队库（Team Library）已发布并可在文件中使用。Agent 可以调用库中的组件、样式和变量。
- 外部工具连接（可选）：为了使用“连接器”（Connectors）功能，你需要拥有 Granola、Notion、Google Drive、GitHub、Atlassian 等工具的账号，并准备好在 Figma 中授权连接。
1整合外部反馈，自动标注设计
在设计评审或会议中，反馈信息如潮水般涌来，手动记录和整理既分散注意力又容易遗漏重点。Figma Agent 结合“连接器”（Connectors）功能，可以自动化这个过程。
核心操作是让 Agent 读取外部会议记录或转录稿，并在画布上相关设计旁边自动添加反馈注释。 这样，你可以在会议期间更专注地参与讨论，会后直接获得结构化的待办事项。
- 在 Agent 聊天框中点击
+号，打开“Connectors”，连接你存放会议笔记的工具（如 Granola、Notion 或 Google Drive）。 - 将笔记或转录稿的链接分享给 Agent。
- 向 Agent 发出指令，让它基于转录稿中的批评反馈来标注设计。
Annotate this design based on the crit feedback in this transcript.2管理设计评论与使用技能（Skills）
设计文件中的评论（Comments）是宝贵的反馈来源，但数量一多就容易混乱。Figma Agent 可以帮助你总结反馈并提出修改建议。更进一步，你可以使用或创建“技能”（Skills）来标准化这一流程。
技能（Skills）是一组可重复使用的指令，你可以在 Agent 的提示框中通过输入 / 命令来触发它。你可以从 Figma Community 保存他人分享的技能，也可以为自己团队创建专属技能。
- 总结反馈：选中带有评论的设计框架，然后提示 Agent 进行总结和提出更新建议。
- 使用社区技能：例如，使用
/comments-do-try-consider技能，可以将评论自动分类为“要做的”（Do）、“可尝试的”（Try）和“可考虑的”（Consider）三类，并将摘要添加到画布上的新框架中。 - 创建自定义技能：将你经常重复的工作流程（如特定的设计审查步骤、风格应用规则）保存为技能，与团队分享，让所有人的工作方式保持一致。
Summarize the feedback on these designs and suggest updates.Use /comments-do-try-consider to sort the comments on this design and add the summary to a new frame next to it./create-anatomy 用于图解组件结构， /create-color 用于将填充、描边等映射到设计令牌。这些技能大大提升了效率。3探索多种设计方案与创建动态效果
探索最佳方案通常需要尝试多个方向。传统上，在画布上构建多个变体需要大量前期时间。现在，你可以让 Agent 根据一个提示词，同时生成一个屏幕或功能的多个变体。
在生成前，务必通过提示框菜单中的“Libraries”选项，选择你团队的设计库。这样 Agent 就会使用你们现有的组件、样式和变量，确保产出符合设计系统。
- 选择你的设计框架。
- 在 Agent 提示框中，明确要求创建多个布局或内容变体，并描述你希望探索的具体差异。
Create three layout variations of this weekly insights screen. Try different sizes for the main image and different placements for the heading and introductory text. Keep the existing content, colors, and visual style.4从静态设计到交互式代码层（Code Layers）
有些交互决策仅凭静态屏幕很难判断。代码层（Code Layers）功能允许你将代码支持的交互式原型直接放在 Figma 画布上。你可以通过多种方式创建代码层，并与 Agent 协作进行探索。
一个典型的工作流是：将现有网页代码引入画布，然后让 Agent 基于此生成多个功能变体进行对比。 之后，你还可以在代码和设计视图间无缝切换，进行精细化调整。
- 创建代码层：使用 Figma Chrome 扩展捕获网页代码；或选择一个设计框架，让 Agent 将其转换为交互式代码层；或克隆连接的 GitHub 仓库。
- 探索方向：选中代码层，提示 Agent 创建多个功能变体。
- 编辑与提取：在代码编辑器中修改，或使用“Extract designs”将代码层中的元素提取为可编辑的 Figma 设计层。修改后，可通过“Update code layer”将更改同步回交互原型。
- 记录流程：使用“Record flow”功能，通过点击交互原型来捕获一系列屏幕，并将其作为连续的设计帧放置在画布上，以便审查整个用户流程。
| 创建代码层方式 | 适用场景 | 关键操作 |
|---|---|---|
| Figma Chrome 扩展 | 基于现有网页快速迭代 | 捕获代码并粘贴到画布 |
| Agent 转换设计帧 | 将静态设计快速原型化 | 选择帧，使用“Build this with code” |
| 克隆 GitHub 仓库 | 与开发代码库同步探索 | 在 Agent 面板选择“Clone repository” |
| 从零开始构建 | 基于 PRD 或描述创建原型 | 创建空代码层，向 Agent 描述需求 |
Make three variations of this and add a new delivery button to the map page. When clicked, the user can choose their address. The first one should be an omnisearch address field, but surprise me with the other two.Make this card stack interactive so users can swipe or drag the top card aside to reveal the next item. Keep the stacked layout and animate the transition between cards.5扩展视觉语言：着色器与生成式插件
如果你想突破 Figma 原生效果的限制，创建独一无二的视觉风格（如液态金属、颗粒感、玻璃扭曲或全息纹理），那么着色器（Shaders）和生成式插件（Generative Plugins）是你的利器。
着色器是由代码支持的效果或填充，它们是动态且可生成的。生成式插件则可以直接在画布上创建，用于生成布局、可视化数据等。你可以直接向 Agent 描述你想要的效果，让它为你构建这些自定义工具。
- 创建自定义着色器：选择画布上的一个元素（如图片），直接向 Agent 描述你希望的效果。
- 应用至多张图片：通过 Connectors 连接 Google Drive 等工具，让 Agent 找到文件夹中的图片并批量应用同一着色器效果。
- 使用启动技能：如果你是新手，可以使用
/shader-starter技能来引导你创建第一个着色器。 - 查找与使用：创建好的着色器和插件会出现在新的“Tools”标签页中，你可以像使用原生效果一样应用和调整它们。
Create a custom shader that gives this photo a grainy, vintage look.Find the photos in this folder and apply the same shader: [folder link].进阶技巧与最佳实践
要充分发挥 Agent 的潜力，需要为其提供丰富的上下文，并善用一些进阶功能。
- 提供优质上下文：直接将用户访谈记录、UX 文案文档或数据报告拖入 Agent 聊天框，Agent 会在整个对话中参考它。粘贴 Figma 文件链接，Agent 能获取完整结构和设计模式，而不仅仅是近似图像。
- 连接开发工作流：Code Connect：对于拥有成熟设计系统的团队（如 Coinbase），利用 Code Connect 将 Figma 组件与生产代码组件映射起来。测试表明，这能为 AI Agent 提供最佳上下文，使其在将设计转换为代码时，平均减少 22.5% 的令牌成本，并提高代码质量和组件选用准确率。
- 关注协作过程：默认情况下，你的协作者可以看到你与 Agent 的对话历史。这不仅是操作日志，更是展示设计思维的窗口，可以成为团队的共享资源。
- 为运动设计建立系统：像 Atlassian 团队那样，将运动资产转化为 Figma 中的可复用组件，然后利用 Agent 在这个系统内进行迭代，确保运动效果既富有表现力又符合品牌规范。
总结：将 AI 转化为你的设计伙伴
Figma Agent 的出现，标志着 AI 从外挂工具向内生协作伙伴的转变。它的强大之处不在于替代设计师，而在于处理繁琐任务、扩展探索边界、并固化团队的最佳实践。
从自动化处理反馈、快速生成方案变体，到构建可交互的代码原型和自定义视觉工具，Agent 正在重新定义设计工作流的“效率”与“可能性”。成功使用的关键，在于清晰地发出指令，并为其提供充足、准确的上下文——关于你的项目、你的品牌和你的工作方式。
现在，是时候打开 Figma，从一次会议记录整理、一个布局变体探索，或一个简单的着色器效果开始，亲自体验这位内置在画布中的设计伙伴能为你带来什么了。
要点速览
- Figma Agent 是深度集成在画布中的 AI 助手，能直接操作设计元素，理解项目上下文。
- 利用 Connectors 连接外部工具（如 Notion、GitHub），可以自动化信息同步与任务启动。
- 技能（Skills）是用
/命令触发的可复用指令，能极大提升团队工作的标准化与自动化程度。 - 代码层（Code Layers）让设计师能在画布上直接构建、测试和迭代交互原型，弥合设计与开发的鸿沟。
- 着色器（Shaders）和生成式插件（Generative Plugins）允许你突破工具限制，创建独一无二的动态视觉效果和自定义工具。
- 为 Agent 提供丰富的上下文（如设计文件链接、文档、设计系统指南）是获得高质量输出的关键。
