今天给大家介绍两个 figma MCP插件
• cursor-talk-to-figma-mcp，直接写提示词就可以在 figma上生成设计稿• Figma-Context-MCP, 可以根据设计稿生成前端代码
cursor-talk-to-figma-mcp 使用教程
安装 bun
curl -fsSL https://bun.sh/install | bash
安装 talk-to-figma-mcp 服务
打开 vscode中的 cline，点击 mcp -> Configure MCP Servers，增加如下 mcp配置内容
"TalkToFigma": {
"command": "bunx",
"args": ["cursor-talk-to-figma-mcp@latest"]
}将项目 clone到本地，github地址：https://github.com/sonnylazuardi/cursor-talk-to-figma-mcp
执行启动命令
bun socket
看到 TalkToFigma显示绿灯就表示配置成功了
下载 figma 应用程序
因为网页版不支持 mcp，所以要使用桌面版，下载地址：https://www.figma.com/downloads/
配置 figma
按照下图所示进行操作
选择 cursor-talk-to-figma-mcp/src/cursor_mcp_plugin/manifest.json文件
然后选择第一个 Cursor MCP Plugin，配置成功后可以看到如下结果
开始使用
在 cline中尝试与 figma进行连接
如果操作都没有问题的话，就可以成功连接到 figma了
接下来我们尝试来设计一个移动端的登录页面，让 chatgpt给出一段提示词
复制提示词到 cline中，运行，等待操作完成后，就可以得到一个登录页面了
但是这个效果说实话很一般，我使用的是 DeepSeek-0324模型
然后同样的步骤使用 cursor 再试试看，生成的设计稿如下
这个效果比 deepseek-0324稍好一些，但是也是达不到设计师的水准，但是用来出原型图目前应该还是一个比较不错的选择。
Figma-Context-MCP 使用教程
仓库地址：https://github.com/GLips/Figma-Context-MCP
还是以 cline为例，在 mcp服务中添加如下配置
{
"mcpServers":{
"Framelink Figma MCP":{
"command":"npx",
"args":["-y","figma-developer-mcp","--figma-api-key=YOUR-KEY","--stdio"]
}
}
}然后到 figma网站中点击个人头像 -> Settings -> Security -> Generate new token，复制 token设置好 mcp服务中的 api-key就行了
这里我们直接使用上一步生成出来的设计稿，选中页面，按照上图进行操作，然后扔到 cline中，提示词
https://www.figma.com/design/UzioBfkovMOtuNapyJ2Ubx/Untitled?node-id=2002-2&t=Jytp2VedmvusMQjS-4
按照这个设计稿实现 login.html
不得不说，这种简单的页面，实现的效果还是很好的。
我也使用过真实的项目设计稿来通过 mcp实现代码，但是效果上就没有这么理想了。
所以短期内，AI还是只能辅助做一些复杂度、还原度要求不高的设计，但是相信随着技术发展，未来的能力会越来越强大。
