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

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

下班下班~

相关推荐
RainbowSea10 小时前
8. LangChain4j + 提示词工程详细说明
langchain·llm·ai编程
RainbowSea10 小时前
7. LangChain4j + 记忆缓存详细说明
langchain·llm·ai编程
GitLqr11 小时前
AI洞察 | 新一代 Agent 框架与 3D 桌面伴侣智能体
agent·ai编程·mcp
yaocheng的ai分身12 小时前
Browser MCP扩展
cursor·mcp
大模型真好玩14 小时前
深入浅出LangGraph AI Agent智能体开发教程(四)—LangGraph全生态开发工具使用与智能体部署
人工智能·python·mcp
量子位15 小时前
Hinton万万没想到,前女友用ChatGPT跟他闹分手
chatgpt·ai编程
腾讯云云开发16 小时前
云开发CloudBase AI Coding创作者激励计划获奖作品集
ai编程·claude·小程序·云开发
因吹斯汀16 小时前
一饭封神:当AI厨神遇上你的冰箱,八大菜系大师在线battle!
前端·vue.js·ai编程
李洋-蛟龙腾飞公司16 小时前
HarmonyOSAI编程万能卡片生成(一)
华为·ai编程·harmonyos
前端小哲16 小时前
MCP从入门到实战
node.js·ai编程