使用 Cursor & Claude 操作 Figma 画图

版权声明:本文为博主原创文章,未经博主允许不得转载。 文章底部留言可联系作者。

一、背景

现在各种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生成设计稿所以就略微不太合适了。

拷贝项目到本地并启动

首先把项目克隆到本地,然后按照文档提示,安装依赖并启动

bash 复制代码
git clone git@github.com:grab/cursor-talk-to-figma-mcp.git
cd cursor-talk-to-figma-mcp

bun setup

启动服务:

perl 复制代码
bun socket

启动效果如下图:

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

bash 复制代码
# 控制台输入
claude

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生成移动端登录页面:

参考文档

相关推荐
程序员辉哥9 小时前
到底是该选Vibe Coding还是Spec Coding?
claude·cursor
百罹鸟16 小时前
现如今的AI IDE:提示词策略与MCP Server使用感悟
前端·人工智能·mcp
rockingdingo18 小时前
利用 OneKey MCP Router Python SDK构建多领域大模型Function Call多工具调用数据集
网络·windows·python·ai agent·mcp
DO_Community2 天前
DigitalOcean 远程 MCP 正式上线,让基础设施“开口说话”
ai·agent·mcp
组合缺一2 天前
Solon AI 开发学习17 - generate - 使用复杂提示语
java·学习·ai·llm·solon·mcp
SunnyRivers2 天前
为什么 MCP 弃用 SSE,转而采用可流式 HTTP(Streamable HTTP)?
sse·mcp·stdio·传输方式·streamable
马里奥Marioぅ2 天前
让AI看懂Maven依赖Jar的黑盒子 - Maven Jar Analyzer MCP工具
copilot·ai编程·mcp
SakuraOnTheWay2 天前
React Grab实践 | 记一次与Cursor的有趣对话
前端·cursor
fxshy2 天前
Cursor 前端Global Cursor Rules
前端·cursor
WindStormrage2 天前
umi3 → umi4 升级:踩坑与解决方案
前端·react.js·cursor