与 Figma MCP 对话

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

license - not found

quality - not tested

remote-capable server

The server can be hosted and run remotely because it primarily relies on remote services or has no dependency on the local environment.

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

Related MCP Servers

Figma MCP Server
GLips
-
security
A
license
-
quality
Enables Cursor to access Figma files through the Model Context Protocol, enhancing its ability to accurately interpret and utilize design data for code generation.
Last updated -
5
41,115
7,637
TypeScript
MIT License
Talk to Figma MCP
sonnylazuardi
A
security
A
license
A
quality
An MCP server integration that enables Cursor AI to communicate with Figma, allowing users to read designs and modify them programmatically through natural language commands.
Last updated -
19
2,514
3,528
JavaScript
MIT License
Cursor Talk To Figma MCP
toiletmadarchut
A
security
F
license
A
quality
Enables users to control the cursor in Figma through verbal commands using an agentic AI agent, streamlining the design process with a new interaction method.
Last updated -
19
2,514
1
JavaScript
Figma MCP Server
rlagudals95
-
security
A
license
-
quality
Gives AI-powered coding tools like Cursor, Windsurf, and Cline access to Figma design files, enabling more accurate code generation directly from Figma designs.
Last updated -
41,115
TypeScript
MIT License

View all related MCP servers

Talk to Figma MCP