Cursor Talk To Figma MCP 完整配置指南

Cursor Talk To Figma MCP 是一个创新的开源项目，它通过 Model Context Protocol (MCP) 实现了 Cursor AI 与 Figma 设计工具之间的深度集成。借助这一工具，AI助手能够直接读取Figma设计文件并对其进行程序化修改，极大地提升了设计开发效率。## 技术架构解析该项目采用现代化的技术栈构建，核心组件包括：- **MCP服务器

咎晓嘉Fenton

895人浏览 · 2025-11-20 07:43:39

咎晓嘉Fenton · 2025-11-20 07:43:39 发布

Cursor Talk To Figma MCP 完整配置指南

【免费下载链接】cursor-talk-to-figma-mcp Cursor Talk To Figma MCP 项目地址: https://gitcode.com/gh_mirrors/cu/cursor-talk-to-figma-mcp

项目概述

Cursor Talk To Figma MCP 是一个创新的开源项目，它通过 Model Context Protocol (MCP) 实现了 Cursor AI 与 Figma 设计工具之间的深度集成。借助这一工具，AI助手能够直接读取Figma设计文件并对其进行程序化修改，极大地提升了设计开发效率。

技术架构解析

该项目采用现代化的技术栈构建，核心组件包括：

MCP服务器 - 负责与Cursor AI建立通信
WebSocket服务器 - 提供实时数据传输通道
Figma插件 - 在Figma环境中提供接口支持

环境准备

在开始配置之前，请确保您的系统已安装以下必要软件：

Node.js - 版本16或更高
Git - 用于代码版本管理

详细配置步骤

第一步：获取项目源代码

打开终端，执行以下命令克隆项目：

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

第二步：安装项目依赖

进入项目目录后，安装项目运行所需的依赖包：

npm install

第三步：配置MCP服务器

创建或编辑 Cursor 的 MCP 配置文件 ~/.cursor/mcp.json，添加以下配置内容：

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

第四步：启动通信服务

运行WebSocket服务器，建立AI与设计工具之间的通信桥梁：

npm run socket

第五步：安装Figma插件

打开Figma设计工具，进入"插件"菜单
选择"开发"选项，然后点击"新插件"
选择"链接现有插件"功能
定位并选择项目中的 src/cursor_mcp_plugin/manifest.json 文件

完成上述步骤后，插件将出现在您的Figma开发插件列表中。

第六步：开始使用AI设计助手

在Figma中启动Cursor MCP插件
通过 join_channel 命令连接到指定的WebSocket频道
使用Cursor直接与Figma设计文件进行交互操作

核心功能详解

文档与选择操作

get_document_info - 获取当前Figma文档的完整信息
get_selection - 获取当前选中元素的信息
read_my_design - 获取当前选中节点的详细设计信息

文本内容管理

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

自动布局与间距控制

set_layout_mode - 设置框架的布局模式和换行行为
set_padding - 为自动布局框架设置内边距值
set_item_spacing - 设置自动布局框架中子元素之间的距离

样式与颜色管理

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

组件与实例管理

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

使用最佳实践

为确保项目稳定运行，建议遵循以下操作规范：

发送命令前务必确保已成功加入通信频道
首先使用 get_document_info 获取文档概览
进行修改前先通过 get_selection 检查当前选中状态
根据需求选择合适的创建工具：
- create_frame 用于容器创建
- create_rectangle 用于基础形状
- create_text 用于文本元素
使用 get_node_info 验证修改结果
尽可能使用组件实例以确保设计一致性