光标与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服务器
bunx cursor-talk-to-figma-mcp- 安装 Figma插件
快速视频教程
设计自动化示例
批量文本内容替换
手动设置和安装
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数组获取有关多个节点的详细信息
注释
get_annotations-获取当前文档或特定节点中的所有注释set_annotation-使用markdown支持创建或更新注释set_multiple_annotations-高效批量创建/更新多个注释scan_nodes_by_types-扫描具有特定类型的节点（可用于查找注释目标）
创建元素
create_rectangle-创建一个具有位置、大小和可选名称的新矩形create_frame-使用位置、大小和可选名称创建新框架create_text-创建具有可自定义字体属性的新文本节点
修改文本内容
scan_text_nodes-使用智能分块扫描文本节点以进行大型设计set_text_content-设置单个文本节点的文本内容set_multiple_text_contents-高效批量更新多个文本节点
样式
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-创建组件的实例
导出和高级
export_node_as_image-将节点导出为图像（PNG、JPG、SVG或PDF）-对当前以文本形式返回base64的图像的支持有限
连接管理
join_channel-加入特定渠道与Figma沟通
发展
构建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 分批 - 验证所有注释是否正确链接到其目标 - 成功转换后删除旧注释节点
许可证
麻省理工学院