乐于分享
好东西不私藏
夜雨聆风 > > 办公文件 > Figma MCP+X深度体验:真正让AI接管设计落地的方案

Figma MCP+X深度体验:真正让AI接管设计落地的方案

当前时间： 2026-08-17 17:04:31 分类：办公文件 评论(0)
Figma MCP+X深度体验:真正让AI接管设计落地的方案

两个月的深度体验后，我想聊聊 Figma MCP——这个让 AI 直接读取 Figma 设计文件的官方方案。

它很强大，但也有明显的坑。

实际使用体验：功能全，后车在追赶，但是自己也在努力寻找生态位。

两个月前 vs 现在

两个月前，Figma MCP 只开放了 FigJam 功能。这次更新开放了 Figma Design 功能，支持读写操作。

两个月前用 mcp 经常断联不说还很慢，现在用着基本是很稳定了而且速度也提升了不少，定制化功能开通之后企业想依照自己的 taste 去落地就更可行了。还在观望的同学真可以冲了。

功能完整度确实很高：

  • 可以读取整个设计系统的 variables，甚至可以自己去给不同组件进行命名
  • 可以提取组件结构、auto layout 设置
  • 可以让 AI 直接在 Figma 画布上创建内容
我在自己的项目上试过了，先让figma 自己跑一遍你项目的所有组件，让它重构一下利于 ai 阅读，然后就可以让它来尝试构建一个简单界面，当然你会发现他并没有完美使用他之前跑到的组件模版，这里就是需要人工调教的地方了，调教之后产出的界面至少在结构上是没有人工的脏数据。在此基础上再接入项目落地的引擎就会简单很多！不过你要想全部交给 AI 去做目前我尝试的方案成本略高，就是 autoreshearch 去不断测试对比，已经测试成功了直接丢效果图给它，让它还原出来，跑了 8 轮测试达到 88% 准确度，不过就这一个界面耗时 3 小时.其实流程跑通了后面再让 AI 去不断迭代就会更快。后续我再分享具体的方法。欢迎关注。

官方地址我放这里了：

https://help.figma.com/hc/en-us/articles/39216419318551-Get-started-with-the-Figma-MCP-server

与其他AI方案对比

Pencil 插件

定位：内置在 Cursor、VS Code 的设计插件

直接在 IDE 中打开 .pen 文件，用对话设计："创建一个 hero 界面"，设计完成后还可以导出 React + Tailwind 代码。但是实测下来功能并不完善：不支持复制粘贴、形状工具，快捷键缺失（对要求效率的人来说太致命了）；优化速度慢（从 1 月至今改进有限）。

适合体验，从 0-1轻量级设计需求，不需要复杂工具.

OpenPencil

定位：为 AI 而生的开源设计工具，不是"支持 AI"，而是"原生 AI Agent 设计"

本地部署，无资源中转；已支持87 个工具，AGENTS.md：专门给 AI agent 阅读的文档，无头 CLI：AI agent 可直接调用；支持多 Agent 并发：复杂页面拆分子任务。但是社区小，bug 多；导入大型 Figma 文件还可能白屏，距离生产可用还有距离。
也是适合体验，观望一下未来设计的新形势。
对比总结
维度
Figma MCP（云端）
Figma MCP（本地）
Pencil 插件
OpenPencil
功能完整度
⭐⭐⭐⭐⭐
⭐⭐⭐⭐
⭐⭐
⭐⭐
原生 AI 设计
❌（后加的）
❌（后加的）
⭐⭐⭐
⭐⭐⭐⭐⭐
速度
慢（云中转）
中等
中等
快（本地）
输入方式
复制链接
选中即识别
对话式
对话式
定制性
低
低
中
高（开源）
社区成熟度
大
大
中
小

附 Figma部署方式：云端 vs 本地

Figma 提供了两种部署方式，各有适用场景。

云端部署（Remote MCP Server）--免费+官方推荐

URL: https://mcp.figma.com/mcp

配置方式（以 Claude Code 为例）：

claude mcp add --transport http figma https://mcp.figma.com/mcp

特点：

  • 基于 URL 传递上下文：复制 Figma 文件链接或"copy link to selection"，粘贴到 AI 工具
  • 不依赖 Figma 桌面应用，浏览器用户友好
  • 功能最全，官方明确推荐

适合：

  • 主要在浏览器中使用 Figma
  • 无法安装桌面应用
  • 需要最完整的功能集

本地部署（Desktop MCP Server）--付费版，主要是快点

URL: http://127.0.0.1:3845/mcp

开启方式：

  1. 打开 Figma 桌面应用
  2. 进入 Dev Mode（快捷键 Shift + D）
  3. 勾选 "Enable desktop MCP server"

特点：

  • 基于选中传递上下文：在 Figma 中选中元素，AI 工具自动识别
  • 需要 Figma 桌面应用运行
  • 部分工具仅在桌面版可用

如果你用了云端版本可能面临的就是--慢

无论云端还是本地，Figma MCP 的工作流程是：

  1. AI 工具发起请求
  2. Figma MCP 服务器序列化设计数据
  3. 资源下载到本地
  4. 资源重新上传给 AI 工具
  5. AI 工具处理并返回结果

这个"下载 → 上传"的中转环节，是性能瓶颈所在。

在 MCP 调用逐渐追求精简高效的今天，这种资源中转机制显得笨重。

为什么这么设计？

从商业角度看，这很合理：Figma 想把开发流程绑定在自己身上。

  • 走云服务，让 Figma Make 承接更多业务
  • 控制数据流向，避免设计资源流失
  • 为未来的付费功能铺路（官方文档已说明"eventually be a usage-based paid feature"）
  • 本地版本快那你就Pay for use
目前来看从设计到生产的流程是可以打通了。之后就是设计-开发一条龙服务，设计师如果还是只搞设计可能出口会收窄非常多。

我当前主力：Figma MCP（云端部署）

原因很简单：功能最全，成熟稳定。

虽然资源中转慢，但至少能用。对于已经深度使用 Figma 的团队，迁移成本最低。

持续关注：OpenPencil类产品

配置命令速查

Claude Code

# 云端部署claude mcp add --transport http figma https://mcp.figma.com/mcp# 本地部署（需先在 Figma 桌面应用开启 MCP server）claude mcp add --transport http figma-local http://127.0.0.1:3845/mcp

Cursor

# 安装 Figma 插件（推荐）# 插件包含 MCP 配置 + Agent Skills# 或手动配置# Settings → MCP → Add Server# URL: https://mcp.figma.com/mcp

写在最后

Figma MCP 是当前最成熟的"AI + 设计"方案，但不是最优雅的。

它的慢，是架构层面的慢——资源中转这个环节，短期内很难优化。如果你的工作流对性能敏感，建议同时关注 OpenPencil 这类原生 AI 设计工具。

设计工具的 AI 化，才刚刚开始。

你用 AI 做设计吗？用的哪个方案？评论区聊聊。