Neodrop
Create
FeedDiscoverMy ChannelsAuto-publishJoin Our Discord
FeedDiscoverCreateMy Channels
1/5
2026-10-15

能改这份设计的人,也看得到源码

深度产品观察
深度产品观察@JamesChenX
10 月 15 日,Figma 在班加罗尔的 Config India 活动上放出一批变化。代码层(code layers)从这一天起进入开放 beta,所有方案都能用;一个叫 Specs 的 Markdown 容器开始推送;Figma MCP 多了几个新动词;设计库多了一类叫「指南文件」的内容,代码源进到关闭测试,还有一个把设计库、代码与说明收在一处的入口只放出了预览。12
这一批里最不起眼、也最该被读到的一句话,写在帮助中心一页的角落里:能编辑这份设计文件的人,即使他在 GitHub 上没有权限,也能看到底层 git 级源码。3
代码搬进画布之后,看它的名单换成了两份名单的并集。

便宜的代码,需要一个看得见的地方

Figma 的联合创始人兼 CEO Dylan Field 给这一批发布写的总纲,开头讲的是一件更早的事:过去写代码很贵,所以每改一次都要算清楚再动手;现在代码便宜了,团队开始用它来想事情——先把东西搭出来,看看这个想法站不站得住,再决定要不要认真做。他把这叫做「为了思考而搭建」,与此并列的是「为了发布而搭建」。1
这套做法有一个 Field 自己点出来的毛病:为了思考而搭建,多数发生在某一个人的 IDE 里,分享出去只能是一个链接或者一段录屏,看得到结果,看不到过程。他引了一位客户的话:「快,快,快……然后就慢了。」1
Figma 的首席设计官 Loredana Crisan 在发布当天给 TechCrunch 补上了这背后的一组数:现在写出来的代码行数是过去的十七倍,而发布量只多了三成。多出来的代码大多不是为了上线,是为了发现产品到底是什么。4
十七与一点三这两个数出自 Figma 自己的高管,TechCrunch 把它记成一次采访,没有给出统计口径。同一批报道里,daily.dev 给出的是另一个方向的提醒:这个落差意味着团队不要把代码产出量当成交付速度。5
这条线不是这一天开始的。Figma Make 在 2025 年 5 月上线,MCP 服务器在 2025 年 6 月发布,远程 MCP 与 Make 的 MCP 在 2025 年 9 月打通,画布在 2026 年 3 月对 agent 开放,代码层在 2026 年 6 月的 Config 旧金山站首次公布,Figma 自己的设计 agent 在 2026 年 10 月 6 日转为正式可用。678910 这一天变化的是:它从少数人能用的状态,走到了所有方案都能开的状态。
发布场合本身也值得记一笔:这是 Figma 在印度的第一次 Config。官方同日的另一篇稿说,按用户数印度是美国以外的最大市场,孟买证券交易所前一百家公司里有四成在用 Figma。11

代码进了文件,仓库还在外面

代码层是一份由真正运行的代码支撑的交互原型,直接坐在画布上——这是帮助中心给的定义。12 选中它、按播放,里面的按钮能点、状态会变;点开代码编辑器,能看到这份原型背后的代码,也能直接改。12
把它搭起来有六条路:从空白开始让 agent 写、连一个 GitHub 仓库克隆下来、上传本地文件夹里的代码、选中画布上的设计让 agent 转成代码层、用浏览器扩展抓一个线上页面粘上画布、或者让你的 coding agent 经 MCP 把整个项目打包搬进来。12
这些路各自通向不同的地方。从 GitHub 连过来的代码层会与那个仓库保持连接,Figma 存的是仓库的一份克隆;你在里面改动、开分支做实验,然后开一个 PR 把改动送回去。313 前提是 Figma 与 GitHub 两边的组织管理员都批过这次连接,而且一次连接会选定一批仓库:Professional 团队只能连一个 GitHub 组织。3
按仓库地址克隆公开仓库这条路是单行道。官方逐字写着,这种情况下推不回分支、也开不了 PR。3
另外四条路都没有仓库可回。本地文件夹进来的代码、浏览器扩展抓下来的页面、MCP 搬进来的项目,它们的原件都不在 Figma 里,改动也就没有一条回去的路。抓下来的那一份尤其要留意——它抓的是浏览器渲染之后的页面,与源码仓库里的源文件是两样东西。
反过来,画布上的改动可以向两个方向走。Extract designs 能把代码层当前的样子变成可编辑的设计层,拿到画布上继续改;改完的视觉调整可以推回代码层。12 官方给这一幕的说法是:在画布上预览交互式设计,捕捉空状态、加载状态和错误状态,更新它们,再把更新推回代码层乃至你的代码库。12
一位在 IDE 里做出原型的 Figma 设计师解释了它解决什么:在编程工具里工作很难分享、很难迭代,那是一个很孤立的环境;现在凡是有这份文件权限的人都能进去玩一玩。13

Specs 把上下文做成了画布上的一个对象

这一批真正新造的东西是 Specs。官方给的理由是:团队越来越多地与 agent 一起工作,Markdown 因此变得无处不在;但 Markdown 文件彼此没有关系,与它们所属的项目也没有关系,文件里引用的图片、链接甚至别的 Markdown 文件,对协作者来说都是不透明的。14
Specs 有三种形态:独立的 Spec 文件、直接插到 Figma Design 画布上的一块、插到 FigJam 白板上的一块。15 它用 Markdown 写,标题、列表、待办、引用、代码块都有对应的简写,也可以把一个 .md 文件直接拖上画布变成一份 Spec。15
它的特殊之处在于能把画布本身当素材:任何一个画框、任何一个节点、甚至一个 FigJam 文件,都可以嵌进正文里,让文字与设计并排放在一起,取代塞进截图和过期链接里的做法;反过来,从 Spec 里拖出去的内容,还能保留它的 Figma 属性。1415
给 agent 留的接口是同一套 MCP 工具加一个叫 figma-spec 的技能:agent 可以读、可以新建、可以更新独立文件里的 Spec,也可以更新嵌在设计文件和白板里的那一块;官方说它的修改是定点修改,评论也仍然留在对应的那段文字上。14
Specs 里还有一件容易被忽略的事:agent 能读写 Spec 里的评论,所以你可以让它逐条回复一份文档里所有未解决的评论并给出建议改法,而同事在同一份文档里继续讨论,每条讨论各走各的线程,可以并行跑好几条。14
计费上它比代码层简单:直接在 Spec 里写字不花钱,调用 agent 才消耗 Figma AI credits。15 可售范围官方给了三种写法,下面会讲。

agent 手里多了几个动词

这批 MCP 更新,讲的是外部 agent 现在能对 Figma 做什么。
第一个动词是生成图片。generate_image 按提示词生成一张栅格图,每次消耗 Figma AI credits;它返回的是一个临时链接,官方要求在七天内按返回的说明下载,链接过期之后图片就不再加载。16 而且这个工具只返回一个独立素材,不会把图放到画布上;要上画布,需要 agent 再走一步上传,而画布工具 use_figma 自己加不了新图片。17
第二个动词是把 HTML 变成设计层:html_to_figma 把 agent 生成的 HTML 转成 Figma 里可编辑的设计层。2
第三个动词是把代码送进来:agent 可以用 send_code_to_figma 在你的画布上建一个代码层,这件事需要 Full 席位,还要账号上打开了代码层开关。16 这个工具名没有出现在开发者文档的工具全表里,而帮助中心那篇 FAQ 的链接恰恰指向工具表上的一个锚点——两份官方文档没有同步。17
第四个方向是把 Figma 自己的工作流交出去跑。MCP 提供六个与 Weave 有关的工具:列出已发布的工具、查看它要什么输入、上传素材、运行、查结果、取消;官方特意注解了一句,这里的「工具」指的是发布出来的 Weave 工作流。17 经 MCP 跑工作流的门槛在另一个产品上:要有一个付费的独立 Weave 账号,用的额度是 Weave credits,不是 Figma AI credits;付费运行之前,agent 会先把价钱给你看、要你确认。16 能跑的只有已经发布并分享给你的工作流,私有的用不了。16
至于往画布里写的那些工具,官方给了三条很具体的限制:一次调用最多返回 20 KB;字体必须已经上传到你的账号;输出是 beta 质量,可能需要人工复核和清理。1718
公告里那句「二十个新的 MCP 合作伙伴」,实际点名的只有四个:OpenCode 把自己的设计系统上下文交给 coding agent,再把原型送回 Figma 复核;Dia 是一个 AI 原生浏览器,把网页界面变成可编辑的设计层;JetBrains 的 Junie 把写好的原型作为代码层搬进 Figma 打磨;Meta 的 Muse 让品牌设计从 Figma 走到 Muse 里生成更多视觉稿。1 四个描述指向的是同一件事的两个方向——把 Figma 的上下文送出去,把外面的产物收进来。

那条改了名单的条款

同一页帮助中心的原文是这样的:
Anyone with permission to view a Figma Design file that contains a code layer can see the preview of that code layer and the preview's source code. Anyone with permissions to edit the Figma Design file that contains a code layer or a Make file can see the underlying git-level source code, even if they don't have permissions in GitHub to do so. 3
直译过来:有查看权限的人,能看到这一层代码的预览以及预览的源代码;有编辑权限的人,能看到底层 git 级的源码——即使他们在 GitHub 上没有权限。
这两句话描述的是两套权限系统的并集。仓库那把锁管着谁能读源代码、谁能推分支;文件那把锁管着谁能看、谁能改这份设计文件。在代码层出现之前,这两把锁各管各的:设计文件的编辑权覆盖的是画框、图层、评论和原型,与仓库里的源代码无关。现在一份仓库的克隆被放进了文件,编辑这份文件就成了读这段代码的一条路。
这条条款是否随这一批发布一起出现,无法证实。Figma 的帮助中心与开发者文档里没有任何「最后更新」字段,页面上也读不到改动时间。17 能确定的只有两件事:写这条条款的那一页今天讲的正是代码层;而代码层从今天起对所有方案开放,所以它覆盖的人群比昨天大得多。
同一套逻辑也出现在别处。用 MCP 的 agent 只能访问你在 Figma 里已经有权限查看或编辑的内容;用 agent 写入草稿以外的文件需要一个 Full 席位,Dev 席位的持有人只能做只读的取数工作。1920 也就是说,MCP 打开的不是一扇新门,它沿用文件原本的门。
这条并集对做安全评审的人是新的工作量。过去的问法是「谁有这个仓库的权限」;现在要问的是「谁有这个仓库的权限,再加上谁有这份设计文件的编辑权」。官方把答案写在了条款里,没有把工具给出来:本次发布的五篇公告与当天的发布说明里,审批、审计、企业管控一个字都没有出现。6

三本账

这一批能力最后落在三张不同的表上。
第一张是 Figma AI credits。代码层在开放 beta 期间使用 AI credits,用多少取决于任务复杂度;同时官方给了一个窗口:到 2026 年 11 月 4 日之前,在付费方案里,代码层内部的生成与编辑免费。这个免费只覆盖「生成与编辑代码层」这一类任务,同一次提问里 agent 做的其他事照旧消耗 credits。12
第二张是 Weave credits,而且它属于另一个产品。Figma Weave 是 2025 年 10 月收购 Weavy 之后改的名字,今天是一个独立站点 weave.figma.com 上的产品;在 Figma 里能用的那些 Weave 工具,每一个背后都是在那里搭好的节点式工作流。2122 官方的定价口径是:目前没有做价格调整,Weave 的 credits 与 Figma 的 credits 是两本账。21 另有一条例外值得记住——购买了 Governance+ 附加包的客户,现在用不了 Weave 工具。22
第三张是席位。创建代码层需要 Full 席位;用 agent 往草稿以外写入也需要 Full 席位。1220 席位还决定 MCP 的调用量:查看与协作席位每月最多二十次调用;开发与完整席位上,Professional 每天两百次,Organization 每天两百次,Enterprise 每天六百次。19
已经预告但还没有价目的,是往画布里写的动作。官方现在的说法是:这项功能在 beta 期间免费,将来会变成一个按用量计费的功能。18 这句话在文档里出现了两次,措辞一样。

公告里找不到的那半页

审批这一栏,这次只在两个地方出现过。一处在帮助中心讲与 Git 一起用的时候:agent 为了保证克隆下来的代码能跑起来,偶尔需要做小的改动,这时它会先向你请求许可。3 另一处是企业侧的开关:管理员可以从团队或组织设置里关掉代码层——但关掉的方式是关掉 AI 功能,而关掉 AI 功能会连带关掉 Figma 里所有别的 AI 功能;这个开关只有组织管理员能动。1223
有两处边界值得单独记下来。
一是本地那条路。Figma 的桌面 MCP 服务器跑在本机的 127.0.0.1:3845 上,不需要 OAuth;官方人员在论坛里对提问者的回答是,它「完全绕开了 OAuth 问题和允许列表」。24 也就是说,9 月底那场关于远程 MCP 客户端白名单的争论,管的只是远程入口。25
二是远程 MCP 的授权本身。Figma 没有公布这套 MCP 的 OAuth scope 清单,REST 文档里明确写着 MCP 服务器自己处理认证、不需要为它配置 REST scope。26 在公开文档里能查到的企业级托管授权只有一条路:通过 Okta 的 Cross App Access 给 Claude 做单点授权。19 审计这件事,MCP 文档里唯一的「审计」字样是一条免责声明——Figma for Government 的 MCP 服务不在 FedRAMP 审计范围内。27 同一个页面还写着,政府版没有远程 MCP,也没有写入画布与从代码建层这两类能力。27

名字与口径上的几处对不上

代码层包不包括 K-12 教育版,帮助中心的两页说法相反:一页把它列为可用方案,另一页写成 Education (not K-12)。212
Specs 的可售方案有三种写法:汇总页写 Education、Professional、Organization、Enterprise 与 Government;Specs 自己的帮助页写 Professional、Education、Organization、Enterprise;定价页写「Specs beta 在付费席位上可用」。21528 三种写法都不含免费版。
MCP 客户端的名单有两个版本。官方目录页今天能读出三十个条目,没有任何「新增」标记,也没有一句话说明;帮助中心的那张支持客户端表只列了二十一个,还分了四栏——本地服务器支持、远程服务器支持、能否写入画布、插件与技能支持。两边都自称权威。1829 公告里说的二十个新伙伴,目录页上既没有标记,被点名的 Junie 与 Meta Muse 也不在名单里,这份数字对不上。
生成图片这件事,公告句与文档句也不一样。总纲写的是「在画布上生成图片」,开发者文档写的是「该工具返回一个独立素材,并不会把它放到画布上」。117
时间上也有一层:官方没有用「early access」或「排队」描述过代码层的上一个阶段,只说它是在 Config 旧金山站公布的;这一次是「未来几周陆续到位」,你和你的团队可能不是同一天拿到。12
调用量的数字也有两个版本。官方技能仓库的说明写的是,Starter 方案或付费方案的查看、协作席位每月最多六次调用;现行文档与帮助中心都写二十次。30 以文档为准,那份说明没有跟上。

谁会受影响

写设计的人。 这一次给他们的是一个新的表达工具,也是一份新的责任。代码层让非工程背景的人能在画布上改一段真实运行的代码,而这段代码可能连着公司的仓库。在把仓库连进文件之前,值得先确认两件事:连接时选的是哪个仓库,以及这个文件现在有谁在编辑。
做工程的人。 从 GitHub 连进来的那份克隆可以开分支、可以提 PR,与日常流程一致;公开仓库那条克隆路径只能进不能出,本地文件夹与浏览器抓取进来的是没有上游的一份副本。团队需要自己定一条规矩:哪一种可以留在画布上,哪一种必须回到仓库。
平台管理员与安全。 这一批给了他们一个开关和一句条款。开关是组织级的,关掉 AI 功能等于关掉 Figma 的全部 AI 功能;条款是那句话——编辑权等于看得到 git 级源码。评审的清单因此要从「谁有仓库权限」扩到「谁有文件权限」。
采购。 真正的计价点有三个:代码层到 11 月 4 日之前的免费窗口、写画布从 beta 免费转向按用量计费的预告、以及 Weave 那一本独立的账——它需要另一个付费账号,Governance+ 客户目前还用不了。
给这些工具定规矩的人。 这批发布里,能让 agent 更守规矩的东西是「指南文件」:把设计规则写成文件挂到设计库上,让 agent 照着做。它现在是开放 beta,在付费方案上可用,所有指南文件加起来不能超过 200 KB,而且 beta 期间要你自己写、自己传。31 一家聚合站的编辑把这层限制说得很准确:关键仍然在于,写下来的规范能不能让生成的结果更可预测;Figma 说那是目标,不是保证的结果。32

还不能确定的

那条权限条款是什么时候写下的,查不到。帮助中心与开发者文档都没有日期字段,只有博客、发布说明与论坛带时间。17 所以「这条规则随今天出现」这句话无法证实,能成立的只有「它今天覆盖的人比昨天多」。
代码层能跑什么样的代码库,官方给的是一个上限:支持的是「轻量的原型代码库」,更复杂的代码库官方说以后再支持。1 这条限制在发布前就被讨论过。2026 年 10 月 1 日的一次讨论里,参与者提到代码层只支持有限的 React 代码库。33
没有人公布过这些能力的效果数据。生成代码的准确率、Specs 让 agent 更守规矩的比例、代码层在真实团队里省下的时间,官方与第三方都没有给。两个客户案例里有两组自称的数字——一家代理公司说迭代快了三成、文档少了五成——它们来自 Figma 的博客,没有独立核验。13
社区这次几乎没有反应。发布后的这几个小时里,Hacker News 上没有这一批的条目,Figma 官方论坛上也没有新帖;英文媒体里能做独立采访的只有 TechCrunch 一篇,其余是复述。34
同赛道在同一周没有对标动作。Anthropic 的 Claude Design 在 2026 年 4 月发布,Google 的 Stitch 在 2026 年 3 月,Framer 3 在 2026 年 6 月,与这一批的时间都不重合。353637
设计到开发的交接问题也不是新的。一份 2026 年 6 月的行业梳理把老毛病分了类:设计里的 token 是一套、代码库里是另一套、群里还有一层非正式翻译。38 代码层把这三层压到同一个文件里,代价是这份文件从此要同时承担设计和源码的权限责任。
采购与安全真正该问的问题,这一批发布没有回答:这份文件里的代码改动,谁批准、记在哪里、能不能查。条款写清了谁能看,写在别处的开关写清了谁能关,中间那一格还空着。

References

  1. 1
    Build by design: New workflows for new ways of building

    figma.com

  2. 2
    What's new from Config India 2026

    help.figma.com

  3. 3
    Use Git with Figma Make and code layers

    help.figma.com

  4. 4
    Figma announces new features to define how agents work on its platform

    techcrunch.com

  5. 5
    Figma wants to be your IDE, and the PRD, too

    daily.dev

  6. 6
    Release notes

    figma.com

  7. 7
    Introducing Figma Make

    figma.com

  8. 8
    Design context, everywhere you build

    figma.com

  9. 9
    The Figma canvas is now open to agents

    figma.com

  10. 10
    Code on the Figma canvas

    figma.com

  11. 11
    Figma deepens investment in India

    figma.com

  12. 12
    Code layers in Figma Design

    help.figma.com

  13. 13
    Design together with code layers on the canvas

    figma.com

  14. 14
    Introducing Specs: Markdown as a medium

    figma.com

  15. 15
    Guide to Specs in Figma

    help.figma.com

  16. 16
    Figma MCP server FAQs

    help.figma.com

  17. 17
    Tools and prompts

    developers.figma.com

  18. 18
    Figma MCP server

    help.figma.com

  19. 19
    Rate limits & access

    developers.figma.com

  20. 20
    Write to canvas

    developers.figma.com

  21. 21
    Figma Weave FAQ

    help.figma.com

  22. 22
    Use Weave tools in Figma

    help.figma.com

  23. 23
    Manage AI settings and content training for your team or organization

    help.figma.com

  24. 24
    Figma's MCP product|官方回复

    forum.figma.com

  25. 25
    How to access MCP OAuth scope (mcp:connect)|官方回复

    forum.figma.com

  26. 26
    Scopes

    developers.figma.com

  27. 27
    Set up the desktop server

    developers.figma.com

  28. 28
    Plans & Pricing

    figma.com

  29. 29
    Figma MCP Catalog

    figma.com

  30. 30
    Figma MCP Server Guide

    raw.githubusercontent.com

  31. 31
    Add guidelines files to a design library

    help.figma.com

  32. 32
    Figma adds shared design rules for AI agents and opens code layers to public beta

    superpowerdaily.com

  33. 33
    Hacker News 讨论(2026-10-01)

    hn.algolia.com

  34. 34
    Figma introduces workflows for new development methods

    techzine.eu

  35. 35
    Claude Design

    anthropic.com

  36. 36
    Stitch: AI for UI design

    blog.google

  37. 37
    Framer 3

    framer.com

  38. 38
    Design to dev handoff problems

    figr.design

深度产品观察
深度产品观察@JamesChenX

This story was produced automatically by a channel. One sentence is all it takes for Neodrop to keep producing for you.

Related content

Comments