Cursor与Figma的MCP通信协议项目

本项目实现了Cursor AI与Figma之间的模型上下文协议(MCP)集成，使Cursor能够通过编程方式读取Figma设计并进行修改。

https://github.com/user-attachments/assets/129a14d2-ed73-470f-9a4c-2240b2a4885c

项目结构

src/talk_to_figma_mcp/ - 用于Figma集成的TypeScript MCP服务器
src/cursor_mcp_plugin/ - 用于与Cursor通信的Figma插件
src/socket.ts - 促进MCP服务器与Figma插件之间通信的WebSocket服务器

快速开始

如果尚未安装，请先安装Bun：

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

运行设置脚本，这也会在Cursor的当前项目中安装MCP

bun setup

启动WebSocket服务器

bun socket

启动MCP服务器

bunx cursor-talk-to-figma-mcp

新增从Figma社区页面安装Figma插件或本地安装

快速视频教程

视频链接

设计自动化示例

批量文本内容替换

感谢@dusskapark贡献的批量文本替换功能。这里是演示视频。

实例覆盖属性传播
另一个来自@dusskapark的贡献
通过单个命令将组件实例的覆盖属性从一个源实例传播到多个目标实例。此功能在使用需要类似自定义的组件实例时，可以大幅减少重复的设计工作。查看我们的演示视频。

手动设置与安装

MCP服务器：与Cursor集成

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

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

WebSocket服务器

启动WebSocket服务器：

bun socket

Figma插件

在Figma中，转到插件 > 开发 > 新建插件
选择"链接现有插件"
选择src/cursor_mcp_plugin/manifest.json文件
插件现在应该可以在Figma的开发插件中使用了

Windows + WSL指南

通过PowerShell安装bun

powershell -c "irm bun.sh/install.ps1|iex"

取消src/socket.ts中主机名0.0.0.0的注释

// 取消注释以允许Windows WSL中的连接
hostname: "0.0.0.0",

启动WebSocket

bun socket

使用方法

启动WebSocket服务器
在Cursor中安装MCP服务器
打开Figma并运行Cursor MCP插件
通过使用join_channel加入频道将插件连接到WebSocket服务器
使用Cursor通过MCP工具与Figma通信

MCP工具

MCP服务器提供以下与Figma交互的工具：

文档与选择

get_document_info - 获取当前Figma文档的信息
get_selection - 获取当前选择的信息
read_my_design - 无参数获取当前选择的详细节点信息
get_node_info - 获取特定节点的详细信息
get_nodes_info - 通过提供节点ID数组获取多个节点的详细信息

注释

get_annotations - 获取当前文档或特定节点中的所有注释
set_annotation - 创建或更新带有Markdown支持的注释
set_multiple_annotations - 批量高效创建/更新多个注释
scan_nodes_by_types - 扫描具有特定类型的节点（用于查找注释目标很有用）

原型与连接

get_reactions - 获取节点的所有原型反应，并带有视觉高亮动画
set_default_connector - 将复制的FigJam连接器设置为创建连接的默认连接器样式（必须在创建连接之前设置）
create_connections - 基于原型流程或自定义映射在节点之间创建FigJam连接器线条

创建元素

create_rectangle - 创建具有位置、大小和可选名称的新矩形
create_frame - 创建具有位置、大小和可选名称的新框架
create_text - 创建具有可定制字体属性的新文本节点

修改文本内容

scan_text_nodes - 使用智能分块扫描文本节点，适用于大型设计
set_text_content - 设置单个文本节点的文本内容
set_multiple_text_contents - 批量高效更新多个文本节点

自动布局与间距

set_layout_mode - 设置框架的布局模式和换行行为（NONE、HORIZONTAL、VERTICAL）
set_padding - 为自动布局框架设置内边距值（上、右、下、左）
set_axis_align - 设置自动布局框架的主轴和对齐轴对齐方式
set_layout_sizing - 设置自动布局框架的水平和垂直尺寸模式（FIXED、HUG、FILL）
set_item_spacing - 设置自动布局框架中子项之间的距离

样式

set_fill_color - 设置节点的填充颜色（RGBA）
set_stroke_color - 设置节点的描边颜色和粗细
set_corner_radius - 设置节点的圆角半径，可选择每个角的单独控制

布局与组织

move_node - 将节点移动到新位置
resize_node - 使用新尺寸调整节点大小
delete_node - 删除节点
delete_multiple_nodes - 高效地一次性删除多个节点
clone_node - 创建现有节点的副本，可选择位置偏移

组件与样式

get_styles - 获取本地样式的信息
get_local_components - 获取本地组件的信息
create_component_instance - 创建组件实例
get_instance_overrides - 从选定的组件实例中提取覆盖属性
set_instance_overrides - 将提取的覆盖应用到目标实例

导出与高级功能

export_node_as_image - 将节点导出为图像（PNG、JPG、SVG或PDF）- 目前图像仅支持以base64文本形式返回

连接管理

join_channel - 加入特定频道以与Figma通信

MCP提示

MCP服务器包含几个帮助提示，指导您完成复杂的设计任务：

design_strategy - 使用Figma设计的最佳实践
read_design_strategy - 阅读Figma设计的最佳实践
text_replacement_strategy - 在Figma设计中替换文本的系统方法
annotation_conversion_strategy - 将手动注释转换为Figma原生注释的策略
swap_overrides_instances - 在Figma中组件实例之间转移覆盖的策略
reaction_to_connector_strategy - 使用'get_reactions'的输出将Figma原型反应转换为连接器线条的策略，并指导按顺序使用'create_connections'

开发

构建Figma插件

导航到Figma插件目录：
```
cd src/cursor_mcp_plugin
```
编辑code.js和ui.html

最佳实践

使用Figma MCP时：

发送命令前始终加入频道
首先使用get_document_info获取文档概览
修改前使用get_selection检查当前选择
根据需要使用适当的创建工具：
- create_frame用于容器
- create_rectangle用于基本形状
- create_text用于文本元素
使用get_node_info验证更改
尽可能使用组件实例以保持一致性
适当处理错误，因为所有命令都可能抛出异常
对于大型设计：
- 在scan_text_nodes中使用分块参数
- 通过WebSocket更新监控进度
- 实现适当的错误处理
对于文本操作：
- 尽可能使用批量操作
- 考虑结构关系
- 使用有针对性的导出验证更改
对于转换旧版注释：
- 扫描文本节点以识别编号标记和描述
- 使用scan_nodes_by_types查找注释所指的UI元素
- 使用路径、名称或接近度将标记与目标元素匹配
- 使用get_annotations适当分类注释
- 使用set_multiple_annotations批量创建原生注释
- 验证所有注释是否正确链接到其目标
- 成功转换后删除旧版注释节点
将原型连线可视化为FigJam连接器：

使用get_reactions提取原型流程，
使用set_default_connector设置默认连接器，
使用create_connections生成连接器线条以进行清晰的视觉流程映射。

许可证

MIT