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

参考文档

相关推荐
goehou6 小时前
MCP 查数实战:让 LLM 安全地查数据库(只读账号、SQL 校验、参数漂移)
数据库·ai·llm·教程·mcp·function calling
向霸天7 小时前
从Claude code来看业务中如何设计一个agent的核心部分
claude
冬奇Lab7 小时前
一天一个开源项目(第234篇):CC Switch —— 一个 App 管理十款 AI 编程工具的 Provider、MCP、Skills 和 Prompts
人工智能·开源·claude
网络毒刘9 小时前
国庆后开工第一周:用一张 Cursor 能力地图安排学习路径(Rules→MCP→工作流)
cursor·工作流·rules·mcp·学习路径
code2cat11 小时前
【随笔】MCP输入Schema:把参数错误拦在工具执行之前
python·json schema·ai agent·mcp
曹小强wxx13 小时前
让 AI 写代码不“翻车”:用 Claude Code + Codex 给 Flutter 项目搭一套工程规范
flutter·ai编程·claude
iwgh19 小时前
XiaoMate功能介绍: 待办提醒 - 私人事务,不上云才安心
mcp·xiaomate·小美同学·提醒待办
乘风gg19 小时前
Spec Kit vs OpenSpec vs Superpowers:三大 AI Coding 框架深度对比
前端·ai编程·claude
xrlfreedom20 小时前
MCP 面试高频考点:如何为 stdio 传输的 MCP 服务编写可重复执行的 Prompts 集成测试
prompts·mcp·stdio 传输
jyOverQ1 天前
JSON-RPC 2.0、Codex、MCP Client 和 MCP Server 是什么关系?以调用 GitHub 工具为例
ai·mcp