Cursor Talk To Figma MCP 安装与配置指南

Cursor Talk To Figma MCP 安装与配置指南

1.项目基础介绍

Cursor Talk To Figma MCP 是一个开源项目，它实现了 Cursor AI 与 Figma 之间的 Model Context Protocol（MCP）集成。通过这个集成，Cursor 能够与 Figma 进行通信，读取设计并程序化地修改它们。该项目主要使用 JavaScript、HTML 和 TypeScript 编程语言。

2.项目使用的关键技术和框架

• Model Context Protocol (MCP): 一种允许 Cursor AI 与 Figma 通信的协议。
• WebSocket: 用于在 MCP 服务器和 Figma 插件之间建立通信的协议。
• TypeScript: 提供类型系统的 JavaScript 超集，增强了项目的可维护性和可读性。
• Node.js: 服务器端 JavaScript 运行环境，用于运行 MCP 服务器。

3.项目安装和配置准备工作

在开始安装之前，请确保您的系统中已安装以下软件：

Node.js: 您可以从 Node.js 官网 下载并安装。
Git: 用于克隆和操作开源项目代码。

4.项目安装步骤

步骤 1: 克隆项目

首先，您需要在本地克隆项目代码：

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

步骤 2: 安装依赖

进入项目目录后，安装项目依赖：

cd cursor-talk-to-figma-mcp
npm install

步骤 3: 配置 MCP 服务器

在 ~/.cursor/mcp.json 文件中添加 MCP 服务器的配置。如果该文件不存在，则需要创建它：

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

步骤 4: 启动 WebSocket 服务器

在项目目录中，运行以下命令启动 WebSocket 服务器：

npm run socket

步骤 5: 使用Figma 插件

• 登录Figma

https://www.figma.com/

• 打开Figma插件

https://www.figma.com/community/plugin/1485687494525374295/cursor-talk-to-figma-mcp-plugin

步骤 6: 使用插件

在 Figma 中运行 Cursor MCP 插件。
通过加入一个特定频道，将插件连接到 WebSocket 服务器。
使用 Cursor 通过 MCP 工具与 Figma 进行通信。