hybrid server

The server is able to function both locally and remotely, depending on the configuration or use case.

Integrations

Used as the runtime environment for the MCP server, enabling the execution of TypeScript code that powers the Figma integration.
Enables Cursor AI to interact with Figma for reading designs and modifying them programmatically, with tools for creating elements, styling, layout management, and component manipulation.

光标与 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

运行安装程序，这也会将 MCP 安装在 Cursor 的活动项目中

bun setup

启动 Websocket 服务器

bun socket

MCP 服务器

bunx cursor-talk-to-figma-mcp

安装Figma 插件

快速视频教程

设计自动化示例

批量文本内容替换

感谢@dusskapark贡献的批量文本替换功能。以下是演示视频。

手动设置和安装

MCP 服务器：与 Cursor 集成

将服务器添加到~/.cursor/mcp.json中的 Cursor MCP 配置中：

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

WebSocket 服务器

启动 WebSocket 服务器：

bun socket

Figma 插件

在 Figma 中，转到“插件”>“开发”>“新插件”
选择“链接现有插件”
选择src/cursor_mcp_plugin/manifest.json文件
该插件现在应该可以在你的 Figma 开发插件中使用

Windows + WSL 指南

通过 powershell 安装 bun

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

取消注释src/socket.ts中的主机名0.0.0.0

// uncomment this to allow connections in windows wsl
hostname: "0.0.0.0",

启动 websocket

bun socket

用法

启动 WebSocket 服务器
在 Cursor 中安装 MCP 服务器
打开 Figma 并运行 Cursor MCP 插件
使用join_channel加入频道，将插件连接到 WebSocket 服务器
使用 Cursor 通过 MCP 工具与 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 - 获取有关本地组件的信息
get_team_components - 获取有关团队组件的信息
create_component_instance - 创建组件的实例

导出和高级

export_node_as_image - 将节点导出为图像（PNG、JPG、SVG 或 PDF）
execute_figma_code - 在 Figma 中执行任意 JavaScript 代码（谨慎使用）

连接管理

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批量创建原生注释
验证所有注释是否正确链接到其目标
转换成功后删除旧注释节点

执照

麻省理工学院

You must be authenticated.

A

security – no known vulnerabilities

A

license - permissive license

A

quality - confirmed to work

Tools

View all tools

MCP 服务器集成使 Cursor AI 能够与 Figma 通信，从而允许用户读取设计并通过自然语言命令以编程方式修改它们。

Related Resources

Reddit Discussion about this server

Talk to Figma MCP