local-only server

The server can only run on the client’s local machine because it depends on local resources.

Integrations

Allows Cursor AI to communicate with Figma for reading designs and modifying them programmatically, including creating elements (rectangles, frames, text), styling (colors, strokes, corner radius), manipulating layout, working with components, and exporting nodes as images.

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

安装Figma 插件

手动设置和安装

MCP 服务器：与 Cursor 集成

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

{
  "mcpServers": {
    "TalkToFigma": {
      "command": "bun",
      "args": [
        "/path/to/cursor-talk-to-figma-mcp/src/talk_to_figma_mcp/server.ts"
      ]
    }
  }
}

WebSocket 服务器

启动 WebSocket 服务器：

bun run src/socket.ts

Figma 插件

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

用法

启动 WebSocket 服务器
在 Cursor 中安装 MCP 服务器
打开 Figma 并运行 Cursor MCP 插件
使用join_channel加入频道，将插件连接到 WebSocket 服务器
使用 Cursor 通过 MCP 工具与 Figma 进行通信

MCP 工具

MCP 服务器提供了以下与 Figma 交互的工具：

文档与选择

get_document_info - 获取有关当前 Figma 文档的信息
get_selection - 获取有关当前选择的信息
get_node_info - 获取特定节点的详细信息

创建元素

create_rectangle - 创建具有位置、大小和可选名称的新矩形
create_frame - 创建具有位置、大小和可选名称的新框架
create_text - 创建具有可自定义字体属性的新文本节点

造型

set_fill_color - 设置节点的填充颜色（RGBA）
set_stroke_color - 设置节点的描边颜色和粗细
set_corner_radius - 使用可选的每个角控制设置节点的角半径

布局和组织

move_node将节点移动到新位置
resize_node - 使用新尺寸调整节点大小
delete_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验证更改
尽可能使用组件实例以保持一致性
适当处理错误，因为所有命令都可能引发异常

执照

麻省理工学院

This server cannot be installed

-

security - not tested

F

license - not found

-

quality - not tested

使 Cursor AI 能够与 Figma 设计进行交互，允许用户读取设计信息并通过自然语言命令以编程方式修改元素。

Talk to Figma MCP