光标与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-WebSocket服务器，促进MCP服务器和Figma插件之间的通信
开始使用
- 如果您还没有安装Bun：
curl -fsSL https://bun.sh/install | bash- 运行安装程序，这也将在Cursor的活动项目中安装MCP
bun setup- 启动Websocket服务器
bun socket快速视频教程
设计自动化示例
批量文本内容替换
实例覆盖传播 另一项贡献来自 @杜斯卡帕克 使用单个命令将组件实例重写从源实例传播到多个目标实例。使用需要类似自定义的组件实例时，此功能大大减少了重复的设计工作。查看我们的 演示视频.
开发设置
要进行开发，请更新您的mcp配置以直接指向您的本地目录。
{
"mcpServers": {
"TalkToFigma": {
"command": "bun",
"args": ["/path-to-repo/src/talk_to_figma_mcp/server.ts"]
}
}
}手动设置和安装
MCP服务器：与Cursor集成
将服务器添加到中的Cursor MCP配置中 ~/.cursor/mcp.json:
{
"mcpServers": {
"TalkToFigma": {
"command": "bunx",
"args": ["cursor-talk-to-figma-mcp@latest"]
}
}
}WebSocket 服务器
启动WebSocket服务器：
bun socketFigma插件
- 在Figma中，转到插件>开发>新插件
- 选择“链接现有插件”
- 选择
src/cursor_mcp_plugin/manifest.json文件 - 该插件现在应该可以在您的Figma开发插件中使用
Windows+WSL指南
- 通过powershell安装面包
powershell -c "irm bun.sh/install.ps1|iex"- 取消对主机名的注释
0.0.0.0在src/socket.ts
// uncomment this to allow connections in windows wsl
hostname: "0.0.0.0",- 启动websocket
bun socket用法
- 启动WebSocket服务器
- 在Cursor中安装MCP服务器
- 打开Figma并运行光标MCP插件
- 通过使用以下命令加入通道，将插件连接到WebSocket服务器
join_channel - 使用MCP工具使用Cursor与Figma通信
MCP工具
MCP服务器提供以下工具用于与Figma交互：
文件和选择
get_document_info-获取有关当前Figma文档的信息get_selection-获取当前选择的相关信息read_my_design-获取当前选择的详细节点信息，不带参数get_node_info-获取特定节点的详细信息get_nodes_info-通过提供节点ID数组获取有关多个节点的详细信息set_focus-通过选择特定节点并滚动视口来将焦点设置在该节点上set_selections-将选择设置为多个节点并滚动视口以显示它们
注释
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-设置框架的布局模式和环绕行为（无、水平、垂直）set_padding-为自动布局框架设置填充值（顶部、右侧、底部、左侧）set_axis_align-为自动布局框架设置主轴和反轴对齐set_layout_sizing-为自动布局框架设置水平和垂直尺寸模式（固定、夹紧、填充）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_actions”的输出将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以获得清晰的视觉流图。
许可证
麻省理工学院