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

参考文档

相关推荐
北京智理科技18 小时前
提示词工程完全指南:从入门到精通
claude
潘小安19 小时前
《5-Day AI Agents Intensive》- Agent Tools & MCP
agent·ai编程·mcp
fanruitian1 天前
SpringAi 创建mcp服务器,客户端连接服务器
springboot·springai·mcp
yaocheng的ai分身1 天前
Claude Code + Chrome 集成:快速设置指南
claude
冬奇Lab2 天前
【Cursor进阶实战·03】四大模式完全指南:Agent/Plan/Debug/Ask的正确打开方式
llm·ai编程·cursor
刘立军2 天前
本地大模型编程实战(39)MCP实战演练
人工智能·后端·mcp
drebander2 天前
Cursor IDE 中 Java 项目无法跳转到方法定义问题解决方案
java·ide·cursor
逸尘散修2 天前
ollama+ngrok 窥探cursor 系统提示词
人工智能·ai编程·cursor
drebander2 天前
Cursor IDE 中 Spring Boot 项目启动内存不足问题解决方案
ide·spring boot·cursor
cos2 天前
Worktrunk 完全指南:让 Git Worktree 和 Claude Code 和平共处
前端·ai编程·claude