10分钟上手Cursor Talk To Figma MCP：快速启动指南

【免费下载链接】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，模型上下文协议）正是为解决这些问题而生。这款开源工具架起了AI助手Cursor与设计工具Figma之间的桥梁，实现了设计资源的智能读取与程序化修改。

读完本文，你将能够：

  • 在10分钟内完成环境搭建并运行第一个设计自动化任务
  • 掌握核心MCP工具的使用方法，实现设计元素的增删改查
  • 运用批量操作提升设计效率，如文本替换、组件实例管理
  • 构建属于自己的设计自动化工作流，打通设计到开发的最后一公里

项目架构概览

Cursor Talk To Figma MCP采用三层架构设计，确保通信高效与功能灵活：

mermaid

核心组件包括：

  • MCP服务器：使用TypeScript开发，负责解析Cursor指令并转换为Figma可执行操作
  • WebSocket服务：实现MCP服务器与Figma插件间的实时双向通信
  • Figma插件：作为本地代理，执行设计操作并返回结果

环境准备（3分钟）

系统要求

环境 最低要求 推荐配置
操作系统 Windows 10/11, macOS 12+, Linux Windows 11, macOS 13+, Ubuntu 22.04
Node.js v16.x v20.x
Bun v1.0+ v1.2.5+
Figma 桌面版 最新版
Cursor 最新版 最新版

安装Bun

Bun是一个快速的JavaScript运行时和包管理器，项目依赖它进行构建和运行：

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

# Windows (PowerShell)
powershell -c "irm bun.sh/install.ps1|iex"

安装完成后需重启终端或运行source ~/.bashrc使环境变量生效

获取项目代码

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

快速启动（5分钟）

一键安装与配置

项目提供了自动化安装脚本，可完成依赖安装与Cursor配置：

# 执行安装脚本
bun setup

该脚本会自动完成以下操作：

  • 安装项目依赖
  • 配置Cursor MCP服务器
  • 构建项目文件

启动服务组件

需要同时启动两个服务：WebSocket服务器和MCP服务器。建议打开两个终端窗口分别运行：

终端1：启动WebSocket服务

bun socket

成功启动后将显示：WebSocket server running on port 3055

终端2：启动MCP服务器

bunx cursor-talk-to-figma-mcp

成功启动后将显示MCP服务器就绪信息。

Figma插件安装

  1. 打开Figma桌面应用
  2. 导航至：插件 > 开发 > 新建插件
  3. 选择"链接现有插件"
  4. 浏览并选择项目中的src/cursor_mcp_plugin/manifest.json文件
  5. 插件将出现在开发插件列表中

首次使用：设计自动化实战（2分钟）

连接工作流

  1. 在Figma中打开任一设计文件
  2. 运行已安装的Cursor MCP Plugin
  3. 在插件界面中输入频道名称（如"design-automation"）并点击"加入频道"
  4. 打开Cursor，在聊天窗口中输入指令开始交互

基础操作示例：创建按钮组件

在Cursor中输入以下指令，体验AI驱动的设计生成：

使用Figma MCP创建一个按钮:
- 位置: x=100, y=200
- 尺寸: 宽度200, 高度48
- 背景色: 蓝色(#2563eb)
- 文字: "提交表单"，白色，16px
- 圆角: 8px

Cursor将自动转换为MCP工具调用，在Figma中生成按钮组件。

核心功能详解

MCP工具分类

Cursor Talk To Figma MCP提供了五大类工具，覆盖设计全生命周期需求：

1. 文档与选择工具
工具名称 功能描述 参数示例
get_document_info 获取当前文档信息 无
get_selection 获取当前选择的元素 无
read_my_design 获取所选元素详细信息 无
get_node_info 获取特定节点信息 nodeId: "1:2"
get_nodes_info 批量获取节点信息 nodeIds: ["1:2", "1:3"]

使用示例：获取当前选择的设计元素信息

// Cursor指令
获取我当前选择的Figma元素信息

底层调用：

get_selection()
// 响应示例
{
  "nodes": [
    {
      "id": "1:2",
      "name": "提交按钮",
      "type": "RECTANGLE",
      "absoluteBoundingBox": {
        "x": 100,
        "y": 200,
        "width": 200,
        "height": 48
      },
      "fills": [{"type": "SOLID", "color": {"r": 0.145, "g": 0.388, "b": 0.929, "a": 1}}]
    }
  ]
}
2. 元素操作工具

创建元素示例：创建带自动布局的框架

// Cursor指令
创建一个登录表单框架:
- 位置x=50, y=50
- 尺寸400x300
- 布局模式: 垂直
- 内边距: 24px
- 子元素间距: 16px
- 背景色: 白色(#ffffff)
- 边框: 1px #e2e8f0

底层调用：

create_frame({
  x: 50,
  y: 50,
  width: 400,
  height: 300,
  name: "登录表单",
  fillColor: { r: 1, g: 1, b: 1, a: 1 },
  strokeColor: { r: 0.886, g: 0.906, b: 0.941, a: 1 },
  strokeWeight: 1,
  layoutMode: "VERTICAL",
  paddingTop: 24,
  paddingRight: 24,
  paddingBottom: 24,
  paddingLeft: 24,
  itemSpacing: 16
})
3. 文本操作工具

批量文本替换功能可大幅提升多语言适配或文案更新效率：

// Cursor指令
将当前页面中所有"提交"文本替换为"保存"

底层实现：

// 1. 扫描文本节点
const textNodes = await scan_text_nodes({ pageId: "1:1" })

// 2. 筛选包含目标文本的节点
const targetNodes = textNodes.filter(node => 
  node.characters.includes("提交")
)

// 3. 批量更新文本
set_multiple_text_contents({
  updates: targetNodes.map(node => ({
    nodeId: node.id,
    text: node.characters.replace("提交", "保存")
  }))
})
4. 组件与样式工具

组件实例覆盖是设计系统维护的关键功能：

// Cursor指令
提取选中组件实例的覆盖属性，应用到页面中所有同类型实例

底层调用流程：

// 1. 获取源实例覆盖属性
const sourceOverrides = await get_instance_overrides({
  nodeId: "1:10" // 选中的源实例ID
})

// 2. 获取所有目标实例
const targetInstances = await scan_nodes_by_types({
  types: ["INSTANCE"],
  componentId: sourceOverrides.mainComponentId
})

// 3. 应用覆盖属性到所有目标实例
set_instance_overrides({
  sourceInstanceId: "1:10",
  targetInstanceIds: targetInstances.map(node => node.id)
})
5. 高级自动化工具

原型流程转连接线：将Figma原型交互转换为可视化连接线，便于设计评审：

// Cursor指令
将当前页面的所有原型交互转换为FigJam连接线

实现流程： mermaid

常见问题与解决方案

连接问题

问题 解决方案
WebSocket连接失败 1. 确认服务已启动
2. 检查防火墙设置
3. Windows用户需修改socket.ts绑定0.0.0.0
Figma插件无响应 1. 重启Figma
2. 重新链接插件
3. 检查MCP服务器状态
Cursor无MCP选项 1. 确认~/.cursor/mcp.json配置正确
2. 重启Cursor
3. 重新运行bun setup

Windows系统特殊配置

Windows用户使用WSL时需修改WebSocket绑定地址：

  1. 编辑src/socket.ts文件
  2. 取消注释以下行： 
    hostname: "0.0.0.0",
  3. 重启WebSocket服务：bun socket

性能优化建议

对于大型设计文件（1000+节点），建议采用以下策略提升性能：

  1. 分块处理：使用scan_text_nodes时指定chunkSize参数

    scan_text_nodes({ chunkSize: 50, pageId: "1:1" })

  2. 筛选处理：操作前使用类型或名称筛选目标节点

    scan_nodes_by_types({ types: ["TEXT"], pageId: "1:1" })

  3. 批量操作：优先使用批量工具（如set_multiple_text_contents而非多次调用set_text_content）

高级应用场景

1. 设计系统自动检查

// 伪代码：设计系统合规性检查
const components = await get_local_components()

for (const component of components) {
  const instances = await scan_nodes_by_types({
    types: ["INSTANCE"],
    componentId: component.id
  })
  
  // 检查所有实例是否使用最新组件版本
  const outdatedInstances = instances.filter(instance => 
    instance.mainComponentId !== component.id
  )
  
  if (outdatedInstances.length > 0) {
    // 创建注释标记过时实例
    await set_multiple_annotations({
      annotations: outdatedInstances.map(instance => ({
        nodeId: instance.id,
        labelMarkdown: `⚠️ 使用了过时组件版本\n\n建议更新至最新版本`
      }))
    })
  }
}

2. 用户研究数据可视化

结合用户研究数据自动生成可视化图表：

// 伪代码：用户满意度数据可视化
const surveyData = [85, 92, 78, 65, 90] // 假设从API获取的用户满意度数据

// 创建图表框架
const chartFrame = await create_frame({
  x: 100, y: 100, width: 600, height: 400,
  layoutMode: "HORIZONTAL",
  itemSpacing: 20,
  padding: 24
})

// 为每个数据点创建柱状图
for (let i = 0; i < surveyData.length; i++) {
  const height = surveyData[i] * 3; // 数据到高度的映射
  await create_rectangle({
    x: i * 80, y: 400 - height,
    width: 60, height,
    fillColor: { r: 0.145, g: 0.388, b: 0.929, a: 1 },
    parentId: chartFrame.id
  })
  
  // 添加数据标签
  await create_text({
    x: i * 80, y: 400 - height - 20,
    text: `${surveyData[i]}%`,
    parentId: chartFrame.id
  })
}

总结与后续学习

恭喜！你已成功搭建Cursor Talk To Figma MCP工作流并掌握核心功能。通过这款工具，你可以：

  • 减少80%的重复性设计操作
  • 确保设计系统的一致性与合规性
  • 实现设计决策的可追溯与自动化文档
  • 打通设计到开发的协作壁垒

进阶学习路线

  1. MCP工具开发：学习如何扩展自定义工具

    • 参考server.ts中的工具定义模式
    • 了解Zod参数验证
    • 掌握Figma Plugin API

  2. 自动化工作流构建：结合多个工具创建复杂自动化

    • 探索design_strategy等策略提示
    • 尝试构建设计评审自动化流程
    • 开发设计资产导出流水线

  3. 性能优化：针对大型文件优化操作效率

    • 学习增量更新策略
    • 掌握节点缓存与引用管理
    • 实现操作撤销/重做机制

社区与资源

  • 问题反馈：项目GitHub Issues
  • 更新日志：关注package.json中的版本历史
  • 最佳实践：查看项目examples目录（如有）

收藏本文，随时查阅最新MCP工具使用技巧与自动化方案。关注项目更新，获取更多AI驱动的设计效率提升功能。

附录：常用工具速查表

分类 工具名称 核心参数 用途
文档信息 get_document_info - 获取文档元数据
选择操作 get_selection - 获取当前选择
节点操作 create_frame x,y,width,height,layoutMode 创建框架
节点操作 create_rectangle x,y,width,height,cornerRadius 创建矩形
节点操作 create_text x,y,text,fontSize 创建文本
样式操作 set_fill_color nodeId,r,g,b,a 设置填充色
样式操作 set_stroke_color nodeId,r,g,b,a,weight 设置边框
文本操作 set_text_content nodeId,text 设置文本内容
文本操作 set_multiple_text_contents updates[{nodeId,text}] 批量设置文本
组件操作 get_instance_overrides nodeId 获取组件覆盖
组件操作 set_instance_overrides sourceInstanceId,targetInstanceIds 应用组件覆盖
高级操作 create_connections reactions 创建连接线
高级操作 export_node_as_image nodeId,format,scale 导出节点图片

【免费下载链接】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

Logo
DeepSeek技术社区

欢迎加入DeepSeek 技术社区。在这里，你可以找到志同道合的朋友，共同探索AI技术的奥秘。

更多推荐

cover

DeepSeek-V4 复杂指令执行失败排查：为什么你的 RAG 管道吞掉了嵌套 JSON？

avatar DeepSeek技术社区
cover

DeepSeek Golang SDK 接入实战：多租户 API 网关的配额与熔断设计

avatar DeepSeek技术社区
cover

DeepSeek 成本看板搭建实战：如何从 per-token 粒度优化推理账单

avatar DeepSeek技术社区