Cursor + Figma MCP 连接流程
【代码】Cursor + Figma MCP 连接流程。
·
Cursor 与 Figma 通过 MCP(模型上下文协议)连接,核心是搭建本地服务、配置 Cursor 的 MCP 服务和 Figma 插件,借助 WebSocket 实现二者通信,以下是详细连接流程,操作前建议确保 Cursor 为 0.46 及以上版本:
- 准备基础工具与项目
- 克隆项目源码:有 Git 环境可在终端执行
git clone https://github.com/sonnylazuardi/cursor-talk-to-figma-mcp.git克隆项目;无 Git 环境则打开项目链接,点击 Code 下载 ZIP 压缩包并解压。 - 安装 Bun 环境:Bun 是项目依赖的 JavaScript 运行时,终端执行
curl -fsSL https://bun.sh/install | bash完成安装,随后用bun -v验证,能打印版本号即安装成功。Windows 用户可通过powershell -c "irm bun.sh/install.ps1|iex"安装。
- 克隆项目源码:有 Git 环境可在终端执行
- 初始化项目并启动中间服务
- 进入解压后的项目根目录,执行
bun setup初始化项目,该命令会生成 Cursor MCP 服务的配置文件。 - 启动 WebSocket 服务,它是 MCP 服务和 Figma 插件的通信中间层,在终端执行
bun socket,等待终端提示服务启动完成即可。若为 Windows WSL 环境,需先取消src/socket.ts中hostname: "0.0.0.0"的注释再启动。
- 进入解压后的项目根目录,执行
- 配置 Cursor 的 MCP 服务
- 打开 Cursor,找到设置中的【MCP Servers】选项,新增一个 MCP Server。
- 配置参数时,名称自定义,类型选择 command,执行命令填写
bunx cursor-talk-to-figma-mcp;也可手动编辑~/.cursor/mcp.json文件,添加配置:
json
{ "mcpServers": { "TalkToFigma": { "command": "bunx", "args": ["cursor-talk-to-figma-mcp@latest"] } } }- 配置后等待服务启动,状态变为绿色代表启动成功。
- 安装并配置 Figma 插件
- 因仅 Figma 桌面端支持通过 manifest 添加插件,需先下载安装 Figma 桌面端并登录账号。
- 打开 Figma 桌面端,点击【Actions】->【Plugins&widgets】->【import from manifest】,找到项目目录下
src -> cursor_mcp_plugin -> manifest.json文件并加载。 - 加载成功后,在插件列表找到 Cursor MCP Plugin 并点击启动,插件会自动尝试连接已启动的 WebSocket 服务,启动后记下弹出窗口中的 channel 信息。
- 建立 Cursor 与 Figma 的最终连接
- 用快捷键【Cmd+I】唤起 Cursor 的 Composer,输入指令
使用channel: [刚才记录的channel值] 连接服务和Figma进行对话。 - 连接成功后,即可在 Cursor 中下达指令,比如输入 “查看选中的设计稿信息”,就能读取 Figma 中选中设计元素的详情,也可指令 Cursor 生成设计稿或转化设计为代
- 用快捷键【Cmd+I】唤起 Cursor 的 Composer,输入指令
火山引擎开发者社区是火山引擎打造的AI技术生态平台,聚焦Agent与大模型开发,提供豆包系列模型(图像/视频/视觉)、智能分析与会话工具,并配套评测集、动手实验室及行业案例库。社区通过技术沙龙、挑战赛等活动促进开发者成长,新用户可领50万Tokens权益,助力构建智能应用。
更多推荐
所有评论(0)