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