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复制进去并保存

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

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

下班下班~

相关推荐
RainbowSea4 小时前
9. Spring AI 当中对应 MCP 的操作
java·spring·ai编程
RainbowSea4 小时前
10. Spring AI + RAG
java·spring·ai编程
zzywxc7874 小时前
AI 开发工具全景指南:从编码辅助到模型部署的全流程实践
大数据·人工智能·低代码·机器学习·golang·自动化·ai编程
win4r8 小时前
🚀Claude Sonnet 4.5+Claude Code 2.0彻底解决过度编码顽疾,编程能力实现质的飞跃!全方位真实评测:从SVG生成到原生iOS AP
ai编程·claude·vibecoding
yaocheng的ai分身8 小时前
从 Claude Code 获得良好结果
ai编程·claude
骑猪兜风2339 小时前
6 种常见 AI 编程协作方法总结
ai编程·claude·trae
程序视点9 小时前
全球最强编程模型Claude Sonnet 4.5发布,性能暴涨30%,速度更快、降智问题彻底解决
aigc·ai编程·claude
量子位10 小时前
宇树机器人被曝漏洞,机器人之间可相互感染,官方火速回应
人工智能·ai编程
yaocheng的ai分身10 小时前
Anthropic官方《面向 AI Agents 的有效上下文工程》
ai编程·claude
yaocheng的ai分身10 小时前
GLM-4.6:先进的 Agentic、推理和编码能力
ai编程·chatglm (智谱)