Figma 推出官方 MCP,真正做到了所见即所得

前段时间 MCP 爆火,其中一个最热门的服务是 非官方的 Figma MCP ------用户只需复制 Figma 链接到 Cursor,对话即可自动生成页面。

不过,这个服务对复杂页面的还原度不足。之前和该服务作者沟通过,它的处理方式是对 Figma 源文件内容进行压缩处理。一旦页面较复杂,就容易出现上下文丢失,无法高精度还原。

但是Figma官方的MCP会将变量、组件、布局等信息直接导入至 IDE,复用实际组件,确保生成代码与现有代码库保持一致

一个对比案例:OpenAI.fm 页面还原效果

拿OpenAI.fm的官方页面举例,这个页面看起来简洁,但其实隐藏了很多细节,比如按钮样式、阴影、边距等。,包括按钮的样式、阴影等

过去尝试:用过多个 AI 编程工具(包括第三方 Figma MCP 和截图生成方式)反复调试,但即便交互多轮也难以复刻原貌。

现在尝试:通过官方 Figma MCP,仅需一轮交互即可生成高保真的页面,除了最底部比例略需手动调整,整体布局和细节几乎1:1还原。 原页面 第三方Figma MCP生成的 Figma官方MCP生成的

部署起来也非常简单,不需要获取API之类的

步骤一:更新 Figma 客户端

首先,你需要将 Figma 客户端更新至最新版。然后依次打开:

Settings → Preferences → 勾选 Enable Dev Mode MCP Server

成功后界面底部会显示提示:

MCP Server running at: http://127.0.0.1:3845/sse

打开后在下方会有一个提醒:服务器在http://127.0.0.1:3845/sse本地运行。请在下一步的配置文件中保留此地址。

步骤二:配置 MCP 服务

这里我以Cursor为例,你用任意一个支持MCP服务的客户端也可以,将下方服务代码配置到MCP服务里

json 复制代码
{
  "mcpServers": {
    "Figma": {
      "url": "http://127.0.0.1:3845/sse"
    }
  }
}

配置完成后,确保该MCP图标变绿,表示已连接。如果第一次没有连接成功,可以点击关闭按钮重启一下

步骤三:发起页面生成指令

  1. 在 Figma 中打开 Dev Mode
  2. 选中你想还原的页面或组件 → 点击「Copy link to selection」
  3. 将该链接粘贴到 Cursor 中的对话框,给出简单的指令即可,例如:请用 HTML + CSS 创建这个页面,尽量还原设计

系统会在一次对话中直接生成基础页面,再结合 1~2 轮微调即可高度还原原始页面。相较之前的第三方服务,官方 MCP 的效果提升显著

而且官方的MCP配置流程简单高效,不需要额外申请 API 或复杂配置,只需更新 Figma 客户端即可直接部署本地服务。

相关推荐
每天开心2 小时前
深入理解 CSS 选择器:从基础到高级
css·html·ai编程
俞乾2 小时前
Context Engineering(上下文工程)是 AI Agent 成功的关键吗?
openai·ai编程
kingchen3 小时前
稳定的Claude Code渠道,白嫖100刀
ai编程
量子位3 小时前
“英伟达显卡就是一坨 ”!博主 6000 字檄文怒批:烧接口、缺单元、驱动变砖还威胁媒体
ai编程
运器1233 小时前
【一起来学AI大模型】算法核心:数组/哈希表/树/排序/动态规划(LeetCode精练)
开发语言·人工智能·python·算法·ai·散列表·ai编程
量子位3 小时前
谁是余家辉?“年薪 1 亿美元”AI 研究员,中科大少年班天才,吴永辉的嫡系弟子
aigc·ai编程
qiyue777 小时前
AI编程专栏(一)- 评估AI编程工具对编程语言支持情况
前端·ai编程
我爱一条柴ya8 小时前
【AI大模型】线性回归:经典算法的深度解析与实战指南
人工智能·python·算法·ai·ai编程
坤坤爱学习2.09 小时前
求医十年,病因不明,ChatGPT:你看起来有基因突变
人工智能·ai·chatgpt·程序员·大模型·ai编程·大模型学
草梅友仁20 小时前
草梅 Auth 与 AI 开发心得 | 2025 年第 27 周草梅周报
github·ai编程·视觉设计