- 理解 Figma 代码层 (Code Layers) 的核心概念与四种导入方式
- 掌握在画布上协同迭代代码原型并管理多版本的技巧
- 学会使用 Specs 整合 Markdown、设计和代码，为 AI 代理提供完整上下文
- 了解如何通过 Figma Weave 将设计系统转化为营销资产的可复用工作流
背景：为何需要新的构建工作流？
在 AI 时代，编码成本降低，团队构建产品的方式正在分化。一种是“为思考而构建”，快速创建概念原型以探索问题；另一种是“为交付而构建”，注重细节和精确性。然而，在这两种模式间切换是困难的。
传统的代码原型开发往往在 IDE 中孤立进行，难以与设计团队共享和协作。反馈循环变慢，设计意图在传递中容易丢失。Figma 推出的新功能，旨在弥合这一鸿沟，将代码、设计和项目上下文都带入其“全栈创意画布”中，实现真正的协同构建。
- 为思考而构建：快速、探索性，用于验证想法。
- 为交付而构建：精确、细致，用于生产就绪的成果。
- 核心挑战：两种模式间的切换导致协作断层和上下文丢失。
准备：认识核心工具
在开始实操前，你需要了解 Figma 为新的构建工作流提供的几个核心组件。它们共同构成了一个从探索到交付的完整环境。
- 代码层 (Code Layers)：在 Figma 画布上嵌入和编辑交互式代码原型的图层。支持导入现有代码或从设计转换。
- Specs：一个多人在线的 Markdown 容器，用于整合设计决策、代码片段、图表等所有项目上下文。
- Figma Weave：一个可视化节点编辑器，用于创建可重复使用的 AI 驱动工作流，例如将设计系统转化为营销素材。
- Figma 代理 (Figma Agent) 与 MCP 服务器：AI 代理，可以读取画布上的内容（如 Specs）并执行任务，MCP 服务器则用于连接外部 AI 工具。
1将代码带入画布——代码层的四种用法
代码层让你能在 Figma 画布上直接与可交互的代码原型协作。这打破了设计与代码之间的壁垒。以下是四种主要的创建方式。
从现有代码导入
你可以将本地文件夹中的轻量级原型代码，或 GitHub 仓库中的代码导入为代码层。从 GitHub 导入时，代码层会保持与该仓库的连接，便于后续同步。
从实时网页捕获
使用 Figma 的 Chrome 扩展，可以将任何正在运行的网页作为代码层捕获到画布上。这便于基于现有产品进行迭代，或对齐利益相关者。
从 Figma 设计转换
你可以将静态的 Figma 设计帧转换为交互式代码层。这对于早期验证交互和可访问性非常有用，能在投入开发前达成共识。
通过 MCP 从编码工具带入
当你或 AI 代理在 IDE 中创建了原型，可以通过 Figma 的 MCP 服务器将其作为代码层发送到 Figma 画布，便于团队评审。
案例：在 Cox Automotive，高级产品经理 Lindsay Brechler 将现有的 HTML 原型导入代码层，以对齐利益相关者。因为每个版本都保留在画布上，她可以随时从任一版本继续迭代，无需从头开始。2在画布上协同迭代与精炼
代码层上画布后，真正的协同威力开始显现。团队可以并行探索多个方向，并利用 AI 代理快速精炼细节。
并行探索与版本对比
你可以在画布上复制代码层，尝试不同的交互或视觉方案，并将多个版本并排展示以供对比。这避免了在工具间切换，让决策过程更直观。
使用 Figma 代理修复与优化
你可以直接向 Figma 代理描述问题，让它修复代码层中的错误或优化交互。例如，当卡片堆叠顺序出错时，一个精确的提示就能让代理修复它。
提取设计以进行视觉调整
“提取设计”功能可以将代码层中的屏幕或流程转换为可编辑的 Figma 图层。这样，设计师可以轻松地进行视觉抛光，然后再将更改同步回代码层。
合并不同版本的优点
如果团队喜欢一个版本的布局和另一个版本的交互，可以要求 Figma 代理将它们合并成一个新版本进行测试。
案例：在 Superside，动态设计负责人 Leonardo Rica 通过提示 Figma 代理，修复了一个信用卡钱包代码层中卡片短暂堆叠顺序错误的问题。3用 Specs 整合所有项目上下文
Specs 是一个革命性的工具，它解决了 Markdown 文件孤立、缺乏关联性的问题，为团队和 AI 代理提供了一个共享的、富含上下文的决策中心。
创建与丰富 Specs
按下键盘 ‘D’ 或点击工具栏图标即可创建 Specs。你可以将现有的 .md 文件拖入画布，或直接在其中编写。Specs 的强大之处在于可以嵌入画布上的任何节点——设计帧、代码层、FigJam 图表，让文字描述和具体工作成果并肩而立。
连接外部数据源
通过连接器（如 GitHub、Hex），你可以将外部上下文直接引入 Specs。例如，在撰写技术规格时，可以从代码库拉取相关片段；对于产品数据问题，可以要求代理运行分析并将结果以评论形式留在文档中。
为 AI 代理提供行动指南
Specs 是指导 AI 代理（无论是设计代理还是编码代理）的完美载体。你可以将包含完整上下文的 Specs 链接提供给编码代理，它就能读取其中的 Markdown、引用的设计、图表和代码片段，从而更准确地实现设计意图。
协同决策与反馈循环
团队成员可以在 Specs 中评论，Figma 代理也能阅读并回复评论，提出修改建议。这创造了一个人机协同的反馈循环，加速决策过程。
案例：Figma 软件工程师 Noah Finer 在构建 Specs 功能时，创建了一个 Spec 来为他的编码代理提供上下文。他首先写下了处理边界情况的指导原则，嵌入了展示流程的 FigJam 图表，然后与队友共享以获取评论。最终将这个完整的 Spec 通过 MCP 服务器提供给他的编码代理。案例分析：从设计系统到营销活动的 Weave 工作流
这个案例展示了如何超越 UI 组件，利用设计系统生成品牌营销素材。我们跟随虚构的“未来推测博物馆”的产品设计师，看看他们如何在品牌设计师缺席时，使用 Figma Weave 快速创建一场展览的宣传活动物料。
搭建可复用的节点工作流
设计师将设计系统中的关键帧（布局、色彩板）作为 Figma 节点粘贴到 Weave 画布上。使用图像描述节点分析现有设计的用色、布局和摄影风格。同时，将品牌色板输入色彩调色板节点，并用多个图像描述节点分别分析不同色系（如灰、黄橙、蓝）的微妙变化。
生成具有品牌一致性的视觉效果
上传展览的实景照片，通过之前设置好的色彩和布局规则节点，使用生成效果节点为照片应用统一的视觉特效（如特定的色彩分级和边缘模糊），从而生成一系列风格一致的宣传图像。
跨格式与多语言扩展
将处理好的图像通过 Figma 节点发送回 Figma Design 文件，套用到不同的版式中（海报、广告牌、社交媒体帖子）。对于多语言社交媒体文案，在 Weave 中为每种语言设置一个任意大语言模型节点，并输入品牌文案指南，自动生成符合文化和品牌要求的本地化文案。
工作流的复用价值
这个工作流的结构是可复用的。节点图会读取它被指向的任何参考素材。当品牌设计师回归或有新展览时，可以重复使用此工作流快速生成新素材，且通过连接的 Figma 节点，能自动同步设计系统的更新。
工具对比与选择建议
Figma 的新功能并非孤立存在，它们与传统的开发工具和流程共同构成了一个生态系统。理解各自的定位有助于你做出合适的选择。
| 工具/方法 | 核心优势 | 适用场景 | 注意事项 |
|---|---|---|---|
| Figma 代码层 | 可视化协同、快速原型迭代、设计与代码并置对比 | 早期概念验证、团队对齐、交互细节打磨、基于现有产品/设计的快速原型 | 适合轻量级原型；复杂应用逻辑仍需传统 IDE |
| 传统 IDE/物理引擎 | 对复杂逻辑和性能的完全控制、成熟的调试工具 | 需要复杂物理模拟、高性能图形、大型代码库管理的生产级应用开发 | 协作和设计对齐成本较高，容易形成信息孤岛 |
| Figma Specs | 整合多模态上下文、为 AI 代理提供结构化输入、决策持久化 | 撰写 PRD、记录设计决策、管理项目知识库、指导 AI 代理任务 | 需要团队养成在画布上记录和更新上下文的习惯 |
| Figma Weave | 创建可复用的视觉生成工作流、连接设计系统与内容生成 | 品牌营销素材批量生成、设计语言探索、创建团队内部自动化工具 | 需要一定的节点图逻辑思维，输出结果具有一定随机性 |
进阶技巧与最佳实践
要充分发挥这些新工作流的潜力，可以参考以下进阶技巧。
- 为 AI 代理提供高质量上下文：无论是通过 Specs 还是 MCP，清晰、结构化的输入是获得准确输出的关键。明确标注设计系统中的组件用途、交互状态和品牌指南。
- 建立“探索-决策-交付”的飞轮：在画布上自由探索多个方向（代码层、设计），使用 Specs 整合反馈并记录决策，然后将确定的上下文无缝传递给交付阶段的工具或代理。
- 关注性能与资产优化：当使用包含复杂动画的 Lottie 文件或大量代码层时，需注意文件大小对加载性能的影响。考虑实施按需加载、连接监控等优化策略。
- 将工作流产品化：像 Weave 示例那样，将重复性的创意任务构建成可发布的工作流工具，供整个团队或社区复用，能极大提升规模化效率。
总结
Figma 通过代码层、Specs、Weave 和增强的 AI 代理能力，正在重新定义“构建”的含义。它不再仅仅是设计师或开发者单独在各自工具中的活动，而是一个在共享画布上，融合了设计意图、代码逻辑和项目上下文的协同过程。
这种“按设计构建”的理念，让团队能够更自由地在“为思考而构建”和“为交付而构建”之间流畅切换。快速探索的想法可以迅速具象化为可交互的原型，而关键的决策和上下文得以沉淀并指导后续的生产。
作为设计师，拥抱这些新工具意味着你能更直接地参与产品塑造过程，用可运行的代码表达交互理念，并用丰富的上下文确保设计意图被准确实现。未来属于那些能够跨越传统角色边界，在统一上下文中协同创造的团队。
要点速览
- 代码层让交互式代码原型成为 Figma 画布上的一等公民，支持导入、编辑和协同对比，打破了设计与代码的孤岛。
- Specs 是项目上下文的“集线器”，它解决了传统 Markdown 的孤立性问题，并能有效指导 AI 代理完成设计到代码的转换。
- 利用 Figma Weave 可以创建基于设计系统的可复用 AI 工作流，自动化生成品牌一致的营销素材等内容。
- Figma 代理与 MCP 服务器是关键赋能者，它们能理解画布内容并执行任务，连接起探索、决策和交付的全流程。
- 新的工作流强调“上下文”的价值，清晰的结构化输入是获得高质量 AI 协作输出的前提。
- 团队应根据项目阶段灵活组合使用这些工具，建立“探索-决策-交付”的敏捷飞轮，提升从创意到产品的整体效率。
