25年6月 Figma MCP Server + Cursor踩坑记录

文中所使用的所有工具、App均是当时的最新版本，具有一定的时效性------2025.06.09

最近刷到了很多相关的文章，正好我司设计出图也是用Figma，很是心动，遂照着配置了一番，但无奈根本调不通，始终提示无法解析Figma里的内容balabala。

官方文档在这，可以看到，网文没提到的关键点有二：

1. 必须是付费席位（Dev Mode）
2. 必须是Beta版的Figma Desktop App，下载链接

付费席位这玩意，各位看官各凭本事，小弟我在公司求爷爷告奶奶，最终得来全不费得来，混到了个付费席位

Enable the MCP Server

按照文档来配，第一点就卡了我好久

看他这么写，我以为是Mac状态栏的Perfermance

捣鼓了好久始终也没找到什么Enable Dev Mode MCP Server选项，后来发现文档里下边还有张图，是在这里的Perfermance...

点了之后可以看到一个提示

Set Up Your MCP Client

点击Cursor右上角的小齿轮

在打开的设置页面中选择MCP Tools - New MCP Server ，打开了一个JSON文件

如下JSON复制进去并保存

{
  "mcpServers": {
    "Figma": {
      "url": "http://127.0.0.1:3845/sse"
    }
  }
}

这里需要注意一下你Figma客户端刚才提示的端口是否正确

保存后关闭JSON退出来，如果看到Figma的Client上有个小红点，就点右边的switch重启一下直到变成绿色，并且有几个tools是enable状态

Prompt Your MCP Client

接下来就可以测试生成效果了，按照官方来说，支持两种prompt模式：

1. 在Figma Desktop App里选中frame/layer，在Cursor中prompt
2. 在Figma Desktop App里选中frame/layer并右键，选择copy link to selection，在Cursor中粘贴链接并prompt

但我使用下来，1并没生效，Cursor没读到我在Figma里选中的东西，2复制链接丢过去倒是可以。

使用心得

目前仅试用了一个页面，样本不多，感悟如下：

• 不太适合组件生态丰富完善的团队：生成的代码默认会使用原生/你指定的组件库去实现，跟已有代码的样式肯定是高度不统一的，哪怕你显示指定了XXX组件去实现，部分props/配置也需要经过多轮prompt，且最终效果也不尽如人意
• 比较适合样式要求不高、交互不太复杂的小模块：比如复杂的表单模块，经过简单的prompt后就能达到使用标准，或者也可以把生成的代码当做模块骨架，在其基础上进行人工完善
• prompt是门技术活

后边还会继续去探索不同场景的生成质量，各位看官老爷们如果有其他心得想要交流，欢迎留言讨论~

下班下班~