📌 一句话总结：Figma 与 Anthropic 联手推出「Code to Canvas」功能，AI 生成的代码可一键转化为 Figma 可编辑设计稿，设计师和开发者之间的工作流壁垒正在被彻底打破。
2026年2月18日 · 资讯分享 · 阅读时间约 5 分钟
Figma × Anthropic：当代码遇上画布
2 月 17 日，设计工具巨头 Figma 正式宣布与 AI 公司 Anthropic 达成合作，推出名为「Code to Canvas」的全新功能。这项功能的核心能力很直接：用户在 Claude Code 等 AI 编码工具中生成的界面代码，可以直接转化为 Figma 中完全可编辑的设计文件。
具体来说，用户只需安装 Figma MCP（Model Context Protocol）应用，在 Claude Code 中输入「Send this to Figma」，浏览器渲染的界面状态就会自动转换为 Figma 图层。无论是生产环境、测试环境还是本地开发服务器上的页面，都能被捕获并转化为设计稿。
在 AI 能帮你构建任何你能描述的可能性的世界里，你的核心工作是在近乎无限的可能性空间中找到最佳方案。换句话说：开始学习一切关于设计的知识吧。
— 来源：Figma CEO Dylan Field 博客文章
解决了什么问题
在 AI 编码工具爆发的当下，越来越多的开发者和产品经理通过 AI 快速生成可运行的界面原型。但问题随之而来：这些代码生成的界面如何进入设计流程？
传统做法是截图、录屏，或者让设计师在 Figma 里手动重建——每一种都意味着摩擦和信息损失。Code to Canvas 直接消除了这个中间环节：
- 全局视图：将代码生成的界面带入画布后，团队可以并排比较多个方案，一眼看出模式、差距和不一致之处
- 无需重写即可探索变体：在 Figma 中复制帧、重新排列步骤、测试结构变化，不需要为了试一个想法就改半天代码
- 更早做出更好的决策：设计师、工程师和产品经理可以在同一个画面上、同一个保真度下讨论同一个方案
- 双向流动：在 Figma 中完成设计调整后，还可以通过 Figma MCP 将设计变更拉回代码库
SaaS 寒冬中的战略布局
这次合作的时机值得玩味。Figma 正处于一个尴尬的市场环境中——华尔街交易员称之为「SaaSpocalypse」（SaaS 末日）。iShares 软件 ETF 已跌入熊市区间，Salesforce、ServiceNow、Intuit 等 SaaS 巨头股价遭受两位数打击，Figma 自去年夏天 IPO 以来股价从 52 周高点 142.92 美元暴跌约 85%。
Anthropic 的产品恰恰是这场 SaaS 抛售的催化剂之一。CNBC 报道指出，Anthropic 超级碗广告为其带来了 11% 的用户增长，Claude Code 等 AI 编码工具正在让市场重新评估传统 SaaS 的价值。
Figma 选择与「颠覆者」合作而非对抗，本质上是在承认一个现实：AI 编码工具不会消灭设计需求，反而让设计变得更重要。但风险也很明显——如果 AI 工具持续进化，团队可能最终跳过设计精炼这一步。Figma 正在为一条自己可能无法控制的高速公路修建更好的入口匝道。
工作流的范式转移
Dylan Field 在博客中强调，产品设计和开发的工作流正在从线性变为非线性。过去的流程是：团队头脑风暴 → 设计 → 编码。现在，你可以从任何地方开始，去任何地方。
Code to Canvas 与 Figma 此前推出的 Figma Make（通过提示词生成可运行原型）形成互补：
| 起点 | 工具 | 终点 |
|---|---|---|
| 提示词 | Figma Make | Figma 画布 |
| AI 生成的代码 | Code to Canvas | Figma 画布 |
| Figma 设计稿 | Figma MCP | 代码库 |
不管你从终端、提示框、可视化界面还是手绘草图开始，Figma 都想成为一切汇聚的地方。
富贵点评
这个合作挺有意思的。表面上看是 Figma 拥抱 AI，实际上是一场关于「谁控制产品构建流程」的卡位战。
AI 编码工具让「从 0 到 1」变得极其容易，但「从 1 到 100」——也就是打磨、比较、迭代、团队对齐——仍然需要一个共享的视觉空间。Figma 赌的就是这个：代码可以生成，但设计判断不能自动化。
不过说实话，Figma 股价暴跌 85% 的背景下推出这个功能，多少有点「不入虎穴焉得虎子」的味道。与其被 AI 编码工具边缘化，不如主动成为 AI 工作流的一环。这步棋走得聪明，但能不能救股价，还得看明天的财报。
对普通开发者和设计师来说，这是个好消息。以后用 AI 写完界面代码，一键丢进 Figma 让设计师接手优化，这个工作流确实丝滑。设计和开发之间的墙，又薄了一层。
📋 要点回顾
- 核心功能：Code to Canvas 将 Claude Code 等 AI 工具生成的界面代码自动转化为 Figma 可编辑设计图层
- 技术实现：通过 Figma MCP 应用捕获浏览器渲染状态，支持生产环境、测试环境和本地开发服务器
- 双向流动：不仅代码可以转设计，设计修改也可以通过 MCP 拉回代码库
- 市场背景：SaaS 板块遭遇「末日级」抛售，Figma 股价从高点暴跌 85%，选择与 AI 颠覆者合作而非对抗
- 战略意义：Figma 定位从「设计工具」转向「产品构建流程的汇聚点」，无论起点是代码还是提示词
❓ 常见问题
Q: Code to Canvas 支持哪些 AI 编码工具？
A: 目前官方演示以 Anthropic 的 Claude Code 为主，通过 Figma MCP 协议实现对接。理论上任何能在浏览器中渲染界面的工具都可以通过 MCP 捕获并转入 Figma。
Q: 转换后的设计稿质量如何？是截图还是真正的可编辑图层？
A: 是真正的可编辑 Figma 图层，不是截图。系统会将浏览器渲染状态转换为 Figma 的原生图层结构，支持直接编辑、复制、重新排列等操作。
Q: 这对设计师意味着什么？AI 会取代设计师吗？
A: Figma 的观点恰恰相反——AI 让创建变得容易，但选择「哪个版本最好」仍然需要设计判断力。Code to Canvas 的定位是让设计师更高效地参与 AI 驱动的工作流，而非被替代。
Q: Figma 股价暴跌 85%，这个功能能扭转局面吗？
A: 短期内很难说。Figma 将于 2 月 18 日盘后发布财报，市场更关注的是收入增长和用户留存数据。但从战略层面看，主动融入 AI 工作流比被动等待颠覆要明智得多。
作者：王富贵 | 发布时间：2026年2月18日
参考来源：CNBC · Figma 官方博客 · Dylan Field 博客