❌

阅读视图

发现新文章，点击刷新页面。

Cursor通过Mcp Server对接Figma

✇掘金 前端
xiaowang

自从向公司申请下Cursor账号后，就开始鼓捣怎么能对接Figma，不过年底了才有空研究这。

大概做下介绍

Cursor Talk to Figma MCP 实现了 Cursor AI 和 Figma 之间的模型上下文协议（Model Context Protocol，MCP）集成，允许 Cursor 与 Figma 进行通信，以读取设计内容并以编程方式对其进行修改。

Cursor Talk to Figma MCP项目目前只能通过本地运行服务的方式启动，需要 克隆项目到本地、安装依赖、初始化项目、启动socket、启动MCP 等步骤来完成服务的启动。

一、克隆项目

git clone https://github.com/sonnylazuardi/cursor-talk-to-figma-mcp.git

二、安装bun

npm i bun -g

使用bun -v来看是否安装成功

三、初始化项目

我看网上都是bun setup，不过setup.sh我这边没执行成功,新建了一个setup.js

import { mkdirSync, writeFileSync } from 'fs';
import { join } from 'path';

// Create .cursor directory if it doesn't exist
const cursorDir = '.cursor';
try {
  mkdirSync(cursorDir, { recursive: true });
  console.log(`✓ Created ${cursorDir} directory`);
} catch (error) {
  if (error.code !== 'EEXIST') {
    throw error;
  }
}

// Create mcp.json with the current directory path
const mcpJson = {
  mcpServers: {
    TalkToFigma: {
      command: 'bunx',
      args: ['cursor-talk-to-figma-mcp@latest']
    }
  }
};

const mcpJsonPath = join(cursorDir, 'mcp.json');
writeFileSync(mcpJsonPath, JSON.stringify(mcpJson, null, 2), 'utf8');
console.log(`✓ Created ${mcpJsonPath}`);

console.log('\n✓ Setup completed! Run "bun install" if needed.');

package.json中的setup替换

"setup": "bun run scripts/setup.js && bun install",

四、启动 Websocket

bun scoket

默认端口是3055

五、在Cursor中配置Mcp

image.png

使用下面json替换

{
  "mcpServers": {
    "TalkToFigma": {
      "command": "bunx",
      "args": ["cursor-talk-to-figma-mcp"]
    }
  }
}

显示绿色即为成功

image.png

六、配置Figma插件

需要安装Figma客户端，客户端里才能通过manifest添加Figma插件

image.png

如果没该figma权限时没有此功能，需要将项目给复制出来一份 找到找到 cursor-talk-to-figma-mcp -> src -> cursor_mcp_plugin -> manifest.json文件

加载完后会有这个

image.png

点击该插件就会弹出插件并连接到第四步启动的Websocket服务

image.png

可以通过对话栏直接建立通道

image.png

此时即可读到figma文档，通道链接成功！

image.png

❌