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

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

下班下班~

相关推荐
AI大模型5 小时前
COZE实战部署(一)—— 扣子任务空间调配和实现
agent·coze·mcp
草梅友仁9 小时前
草梅 Auth 与 AI 开发心得 | 2025 年第 27 周草梅周报
github·ai编程·视觉设计
堆栈future10 小时前
揭秘 Google A2A 协议:赋能智能体协作的未来
llm·agent·mcp
mortimer16 小时前
从零到一:构建一个 Chatterbox-TTS API 服务
开源·github·ai编程
我爱一条柴ya19 小时前
【AI大模型】深入理解 Transformer 架构:自然语言处理的革命引擎
人工智能·ai·ai作画·ai编程·ai写作
猫头虎1 天前
猫头虎 AI工具分享:一个网页抓取、结构化数据提取、网页爬取、浏览器自动化操作工具:Hyperbrowser MCP
运维·人工智能·gpt·开源·自动化·文心一言·ai编程
win4r2 天前
🚀 SuperClaude让Claude Code编程能力暴增300%!小白秒变顶尖程序员!19个专业命令+9大预定义角色,零编程经验也能开发复杂项目,完全碾
aigc·ai编程·claude
slowlybutsurely2 天前
Cursor核心功能及开发实战
ai编程·cursor
ζั͡山 ั͡有扶苏 ั͡✾2 天前
AI辅助编程工具对比分析:Cursor、Copilot及其他主流选择
人工智能·copilot·cursor