Cursor与Figma集成AI助手完整使用指南

Cursor与Figma的MCP集成项目通过Model Context Protocol实现了AI与设计工具的无缝连接，让开发者能够通过编程方式读取和修改Figma设计文件，大幅提升设计开发效率。

环境准备与快速部署

在开始使用前，请确保系统环境满足以下要求：

必备环境清单：

• 已安装Bun运行时环境
• 拥有Figma账号和设计文件访问权限
• 已安装Cursor编辑器

安装Bun环境： 如果尚未安装Bun，可以通过以下命令快速安装：

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

三步完成项目集成

第一步：获取项目源码

git clone https://gitcode.com/gh_mirrors/cu/cursor-talk-to-figma-mcp
cd cursor-talk-to-figma-mcp

第二步：运行自动化配置

项目提供了一键式设置脚本，自动完成所有依赖安装和配置工作：

bun setup

第三步：启动通信服务

启动WebSocket服务器，建立AI与Figma之间的通信桥梁：

bun socket

核心配置详解

MCP服务器配置

在Cursor中配置MCP服务器是连接AI与Figma的关键步骤。编辑Cursor的MCP配置文件：

打开 ~/.cursor/mcp.json 文件，添加以下配置：

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

Figma插件安装

在Figma中启用集成插件：

1. 进入"插件"菜单，选择"开发"选项
2. 点击"新建插件"并选择"链接现有插件"
3. 定位项目中的 src/cursor_mcp_plugin/manifest.json 文件

安装完成后，插件会出现在Figma的开发插件列表中，随时可以启用。

实际操作流程

连接建立流程

1. 启动WebSocket服务器 - 确保通信通道畅通
2. 配置Cursor MCP - 建立AI与设计的智能连接
3. 激活Figma插件 - 在设计环境中开启AI协作功能
4. 加入通信频道 - 使用 join_channel 命令建立实时对话

常用操作命令

• 获取文档信息：使用 get_document_info 了解当前设计文档结构
• 检查选中元素：通过 get_selection 确认当前操作对象
• 创建设计元素：选择合适的创建工具如 create_frame、create_rectangle、create_text
• 验证修改结果：使用 get_node_info 确认设计更改效果

功能模块详解

文档与选择管理

• get_document_info - 获取当前Figma文档的完整信息
• get_selection - 获取当前选中元素的信息
• read_my_design - 获取当前选中节点的详细信息
• get_node_info - 获取特定节点的详细信息
• set_focus - 将焦点设置到特定节点并滚动视口

注释功能

• get_annotations - 获取当前文档或特定节点的所有注释
• set_annotation - 创建或更新支持markdown的注释
• set_multiple_annotations - 批量高效创建/更新多个注释

原型与连接

• 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 - 设置自动布局框架中子元素之间的距离

最佳实践指南

工作流程优化

1. 连接优先原则 - 在执行任何操作前，务必先加入通信频道
2. 信息获取先行 - 在修改设计前，先获取完整的文档信息
3. 组件化思维 - 尽量使用组件实例保持设计一致性
4. 错误处理机制 - 所有命令都可能抛出异常，需要合理处理错误情况

大型设计处理

• 在 scan_text_nodes 中使用分块参数
• 通过WebSocket更新监控进度
• 实施适当的错误处理机制

文本操作建议

• 尽可能使用批量操作
• 考虑结构关系
• 通过目标导出验证更改

故障排除与解决方案

连接问题处理

• 验证WebSocket服务器是否正常运行
• 确认Figma插件是否正确安装并启用
• 检查MCP配置文件格式是否正确

命令无响应解决

• 确认已加入正确的通信频道
• 检查网络连接状态
• 查看服务器日志获取详细错误信息

进阶应用场景

批量设计自动化

利用AI助手快速生成重复设计模式，实现设计元素的大规模创建，显著提升设计效率。

设计规范智能检查

通过AI分析设计文件，自动识别规范偏差并提供优化建议，确保设计质量一致性。

设计到代码无缝转换

直接从Figma设计获取样式信息，智能生成对应的前端代码，加速开发流程。

开发与构建

Figma插件构建

1. 进入Figma插件目录：

cd src/cursor_mcp_plugin

2. 编辑 code.js 和 ui.html 文件进行定制开发

Windows + WSL环境配置

1. 通过PowerShell安装Bun：

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

2. 在 src/socket.ts 中取消注释hostname配置：

hostname: "0.0.0.0",

3. 启动WebSocket服务器：

bun socket

通过本指南的详细说明，你已经掌握了从环境准备到实际应用的完整流程。现在可以开始体验AI赋能的智能设计开发新范式，将创意转化为现实的高效工作流程。