版权声明：本文为博主原创文章，未经博主允许不得转载。 文章底部留言可联系作者。
一、背景
现在各种AI工具的普及让人眼花缭乱，大家都在拥抱AI，之前朋友推荐某音的一个小视频看到可以使用Cursor操作Figma自动画图感觉非常神奇，正好我 Claude和Cursor 都在使用，对有意思的工具做了一些尝试，现在总结下经验希望可以帮助大家。
二、Cursor 如何操作 Figma
1. 安装 Cursor
Cursor 可以点击官网下载选择合适版本进行使用。新账号试用过后需要付费使用，具体使用方法可以自行网上百度各种方案,比如无限续杯，或者某鱼看看。如果公司能提供使用的账号那就更不错了。本人目前开通的是Pro版本。
Cursor安装后如何使用这边可以看B站的教学视频进行学习：
2. 安装Figma
Figma 也是付费软件才能使用MCP功能，这里可能会有小伙伴疑惑MCP是什么东西，点击这里链接 来了解什么是MCP。总之有了MCP以后，Cursor、Claude 就可以操作Figma了。
Figma 点击官网进行下载安装。付费版才可以使用MCP功能，开通方式自行搜索，或者有公司提供账号更好。
注意：
- figma 可以通过
shift+D或者右下角</>按钮 切换DevMode，然后开启MCP server，但是开启这个MCP 无法在 Cursor 中操作画图。
3. 配置MCP
当前面两步搞定之后，我们就可以给Cursor配置MCP了。首先从github上搜相关MCP，找到了star最多的，理论上应该也是最好用的MCP：cursor-talk-to-figma-mcp。
此时你一定会好奇为什么不是上面的 Figma-Context-MCP ？这是因为这款MCP主要是用来将设计稿转成代码的。可以参考下这篇文章《Cursor集成Figma Context MCP，设计稿直接生成代码》来学习下。而我们的目标是通过Cursor来操作Figma生成设计稿所以就略微不太合适了。
拷贝项目到本地并启动
首先把项目克隆到本地，然后按照文档提示，安装依赖并启动
1git clone [email protected]:grab/cursor-talk-to-figma-mcp.git 2cd cursor-talk-to-figma-mcp 3 4bun setup 5
启动服务：
1bun socket 2
启动效果如下图：
Figma中配置plugin
打开figma软件以后，新建 Design
选择菜单栏 Plugins -> Development 然后导入 src/claude_mcp_plugin/manifest.json 文件
或者点击 Plugins -> Manage Plugins... 打开下面弹窗，直接搜索Cursor Talk To Figma MCP Plugin
安装后点击打开：
在Cursor配置MCP
将上面json格式文件复制，打开Cursor，选择Tools & MCP菜单，点击 New MCP Server
将刚才json文件添加进去：
然后启用TalkToFigma这个 MCP
此时就可以在Cursor对话框中输入channel id 进行连接，提示连接成功以后如下图所示：
通过Cursor 操作 Figma
此时就可以让Cursor在Figma中进行画图了，如下效果所示：
让figma设计一个移动端的登录页面
三、Claude 如何操作 Figma
1. 安装 Claude
点击查看Claude 官方文档进行安装， 网上有很多安装教程，如果没有 Claude的API key，可以参考这篇教程 通过 DeepSeek 3.1 配置 Claude Code 教程，API key 也可以。
安装完成，启动 Claude Code：
1# 控制台输入 2claude 3
2. 配置MCP
前面已经介绍过如何安装Figma了，这里接介绍下如何给Claude配置MCP，MCP依然使用前面安装的 cursor-talk-to-figma-mcp
注意： 可能你也可以搜索到 claude-talk-to-figma-mcp 这个MCP，但是很遗憾在使用时，启动时会报错，暂时还没有找到解决办法，可以看这个issues：github.com/arinspunk/c… 。但是发现 cursor-talk-to-figma-mcp 是可以在claude中使用。
- 前面步骤中Figma中配置plugin 获取到的MCP的json文件可以配置到项目 .mcp.json 文件中（只有在当前项目目录下才有这个MCP），MCP配置方式可以参考Claude 官方文档
然后通过 /mcp 来查看配置的MCP是否连接正常
3. Claude 操作 Figma
Figma配置和启动等步骤和前面Cursor中介绍的相同，这里配置完MCP就可以测试连接figma：
操作figma生成移动端登录页面：
参考文档
《使用 Cursor & Claude 操作 Figma 画图》 是转载文章，点击查看原文。
