Figma 推出 Specs:把设计规范写成画布上的 Markdown,让自家 agent 和 Codex 等外部编程 agent 照着做

Figma 于 10 月 15 日在首届印度 Config 大会上发布 Specs,即日起面向付费套餐开放公测,支持网页、桌面和移动端。Specs 是放在 Figma 画布上的多人协作 Markdown 文档,可以直接把 .md 文件拖进画布生成,并在文档中嵌入画框、FigJam 图和代码图层;Figma agent 能读取和回复其中的评论、扩写需求文档,Codex 等外部 agent 则可通过 Figma MCP 服务器读取 spec 及其关联的设计和代码片段。同场更新还包括:代码图层(code layers)进入公开测试,付费套餐在 11 月 4 日前免费创建与编辑;Figma MCP 新增 20 家合作方。Figma 首席设计官 Loredana Crisan 称,如今代码产出量是过去的 17 倍,但发布次数只增长了 1.3 倍。

Specs 是什么

10 月 15 日,Figma 在首届印度 Config 大会上发布 Specs,即日起对付费套餐开放公测,网页、桌面和移动端都能用。

它是放在 Figma 画布上的多人协作 Markdown 文档:把任意 .md 文件拖进画布就会变成一份 spec,也可以按 D 键新建。文档里可以直接嵌入画框、FigJam 图和代码图层,不用再贴截图。团队把品牌规则、组件用法、需求文档写在这里,人和 agent 读的是同一份。

agent 怎么用它

Figma 自己的 agent(10 月 6 日刚结束测试、按 AI 点数计费)可以读取并回复 spec 里的评论、扩写需求文档、直接编辑内容;通过 GitHub 连接器还能从代码库起草技术规格。

外部 agent 走 MCP:Codex 这类编程 agent 通过 Figma MCP 服务器读取 spec 以及它链接的画框、图表、代码图层和 Code Connect 片段。用法很直接,把 spec 链接粘进编程 agent 的提示词即可。Figma MCP 此次新增 20 家合作方。

同场的另一项更新

代码图层(code layers)6 月起私测,现在进入公开测试:可以从设计画框、GitHub 仓库、抓取的网页或一句提示词生成可交互、由代码驱动的原型。付费套餐在 11 月 4 日前创建和编辑代码图层免费,之后怎么收费 Figma 尚未说明。

为什么要专门写一份规范

Figma 首席设计官 Loredana Crisan 对 TechCrunch 说,代码产出量是过去的 17 倍,发布次数却只增长 1.3 倍,大量代码是为了摸索产品而写的。agent 每次输出都不完全一样,Specs 的思路是让设计规范成为 agent 的固定输入,而不是靠每次提示词重新交代。对已经在用编程 agent 写前端的团队,值得试的是把现有设计规范迁进 spec,看 agent 生成的界面是否更少偏离组件库。

via: Figma 官方博客、Figma 更新日志、TechCrunch 报道