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

Elecat
2,645 阅读2分钟

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

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

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

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

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

image.png

Enable the MCP Server

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

image.png

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

image.png

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

image.png

image.png

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

image.png

Set Up Your MCP Client

点击Cursor右上角的小齿轮

image.png

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

image.png

如下JSON复制进去并保存

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

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

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

image.png

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是门技术活

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

下班下班~

image.png

avatar
文章
阅读
粉丝