Cursor Talk to Figma MCP
2025.03.21
2
TypeScriptFigma 集成设计自动化开发效率
Cursor Talk to Figma MCP 是一个实现 Cursor AI 与 Figma 之间集成的 Model Context Protocol (MCP) 项目。它允许 Cursor 通过编程方式读取和修改 Figma 的设计。该项目提供了丰富的工具集，用于与 Figma 进行交互，包括文档和选择管理、元素创建、样式设置、布局和组织、组件和样式管理、导出和高级操作等功能。
View on GitHub
Overview
基本能力
产品定位
Cursor Talk to Figma MCP 是一个用于 Cursor AI 和 Figma 之间通信的集成工具，旨在通过编程方式读取和修改 Figma 设计。
核心功能
- 文档与选择管理：获取文档信息、当前选择信息、节点详细信息等。
- 元素创建：创建矩形、框架、文本节点等。
- 样式设置：设置填充颜色、描边颜色、角半径等。
- 布局与组织：移动节点、调整节点大小、删除节点等。
- 组件与样式管理：获取本地样式、本地组件、团队组件信息，创建组件实例等。
- 导出与高级操作：导出节点为图像，执行任意 Figma JavaScript 代码等。
- 连接管理：加入特定频道以与 Figma 通信。
适用场景
- 开发人员需要自动化修改 Figma 设计。
- 团队协作中需要程序化访问和操作 Figma 设计。
- 需要将 Figma 设计与其他工具（如 Cursor AI）集成。
MCP 工具列表
- 文档与选择：
get_document_info,get_selection,get_node_info - 创建元素：
create_rectangle,create_frame,create_text - 样式设置：
set_fill_color,set_stroke_color,set_corner_radius - 布局与组织：
move_node,resize_node,delete_node - 组件与样式：
get_styles,get_local_components,get_team_components,create_component_instance - 导出与高级：
export_node_as_image,execute_figma_code - 连接管理：
join_channel
常见问题解答
- 如何开始使用：按照“Get Started”部分的步骤安装和启动服务。
- 如何连接 Figma 插件：通过 WebSocket 服务器加入频道以进行通信。
- 最佳实践：始终在发送命令前加入频道，先获取文档概览，修改前检查当前选择。
使用教程
使用依赖
- 安装 Bun（如果尚未安装）：
curl -fsSL https://bun.sh/install | bash
安装教程
- 运行设置（这将在 Cursor 的当前项目中安装 MCP）：
bun setup
- 启动 WebSocket 服务器：
bun start
- 安装 Figma 插件：
- 在 Figma 中，转到 Plugins > Development > New Plugin
- 选择 "Link existing plugin"
- 选择
src/cursor_mcp_plugin/manifest.json文件
调试方式
- 启动 WebSocket 服务器：
bun run src/socket.ts
- 在 Cursor 中安装 MCP 服务器。
- 打开 Figma 并运行 Cursor MCP 插件。
- 通过
join_channel加入频道以连接插件和 WebSocket 服务器。 - 使用 Cursor 通过 MCP 工具与 Figma 通信。