【免费下载】 Cursor Talk To Figma MCP 使用教程

1. 项目介绍

Cursor Talk To Figma MCP 是一个开源项目，它实现了 Cursor AI 与 Figma 的 Model Context Protocol (MCP) 集成。通过这种集成，Cursor 能够与 Figma 进行通信，读取设计并编程方式修改它们。

2. 项目快速启动

安装

首先，确保已经安装了 Bun。如果没有安装，可以通过以下命令安装：

curl -fsSL https://bun.sh/install | bash

然后，运行以下命令来设置项目，这也会在 Cursor 的活动项目中安装 MCP：

bun setup

启动 WebSocket 服务器

启动 WebSocket 服务器，以便于 MCP 服务器和 Figma 插件之间的通信：

bun socket

安装 MCP 服务器

将服务器添加到 Cursor 的 MCP 配置文件 ~/.cursor/mcp.json 中：

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

安装 Figma 插件

在 Figma 中，转到“插件”>“开发”>“新建插件”，选择“链接现有插件”，然后选择 src/cursor_mcp_plugin/manifest.json 文件。这样插件就可以在 Figma 的开发插件中使用了。

3. 应用案例和最佳实践

使用流程

1. 启动 WebSocket 服务器。
2. 在 Cursor 中安装 MCP 服务器。
3. 打开 Figma 并运行 Cursor MCP 插件。
4. 通过加入一个频道来连接插件和 WebSocket 服务器，使用 join_channel 命�络操作。
5. 使用 Cursor 通过 MCP 工具与 Figma 进行通信。

最佳实践

• 在发送任何命令之前，始终加入一个频道。
• 使用 get_document_info 获取当前文档概览。
• 在修改前，使用 get_selection 检查当前选择。
• 根据需要选择合适的创建工具，例如 create_frame 用于容器，create_rectangle 用于基本形状，create_text 用于文本元素。
• 使用 get_node_info 验证更改。
• 可能的话，使用组件实例以保持一致性。
• 合理处理错误，因为所有命令都可以抛出异常。

4. 典型生态项目

Cursor Talk To Figma MCP 可以与多个生态项目配合使用，例如自动化工作流程、设计版本控制、团队协作工具等，以增强设计到开发的工作流程。这些项目通常包括但不限于设计自动化工具、持续集成/持续部署(CI/CD)流程以及项目管理平台。