文中所使用的所有工具、App均是当时的最新版本，具有一定的时效性------2025.06.09
最近刷到了很多相关的文章，正好我司设计出图也是用Figma，很是心动，遂照着配置了一番，但无奈根本调不通，始终提示无法解析Figma里的内容balabala。
官方文档在这，可以看到，网文没提到的关键点有二：
- 必须是付费席位（Dev Mode）
- 必须是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模式：
- 在Figma Desktop App里选中frame/layer，在Cursor中prompt
- 在Figma Desktop App里选中frame/layer并右键，选择
copy link to selection，在Cursor中粘贴链接并prompt
但我使用下来，1并没生效，Cursor没读到我在Figma里选中的东西，2复制链接丢过去倒是可以。
使用心得
目前仅试用了一个页面，样本不多，感悟如下：
- 不太适合组件生态丰富完善的团队：生成的代码默认会使用原生/你指定的组件库去实现，跟已有代码的样式肯定是高度不统一的，哪怕你显示指定了XXX组件去实现，部分props/配置也需要经过多轮prompt，且最终效果也不尽如人意
- 比较适合样式要求不高、交互不太复杂的小模块：比如复杂的表单模块，经过简单的prompt后就能达到使用标准，或者也可以把生成的代码当做模块骨架，在其基础上进行人工完善
- prompt是门技术活
后边还会继续去探索不同场景的生成质量，各位看官老爷们如果有其他心得想要交流，欢迎留言讨论~
下班下班~
