🚀 Figma MCP 服务器指南

本指南旨在帮助您了解并使用 Figma MCP 服务器，它提供了获取 Figma 数据和生成设计令牌等功能，能有效提升您处理 Figma 设计的效率。

🚀 快速开始

📦 安装指南

安装依赖

pnpm install

启动开发服务器

pnpm run dev

✨ 主要特性

获取 Figma 数据工具 (get_figma_data)

此工具可获取指定 Figma 文件的信息。

参数:

• fileKey (字符串): 需要获取信息的 Figma 文件密钥。
• nodeId (字符串, 可选): 特定节点的 ID。
• depth (数字, 可选): 遍历节点树的深度级别。
• extractCssProperties (布尔值, 可选): 是否提取每个节点的详细 CSS 属性（默认: true）。

设计令牌生成器 (generate_design_tokens)

该工具能从 Figma 文件中生成设计令牌，并以指定格式导出。

参数:

• fileKey (字符串): 需要处理的 Figma 文件密钥。
• nodeId (字符串, 可选): 特定节点的 ID。
• depth (数字, 可选): 遍历节点树的深度级别。
• format (字符串, 可选): 设计令牌的输出格式（选项: "css", "scss", "ts", "json"，默认: "css"）。
• outputPath (字符串, 可选): 保存设计令牌的文件路径。
• prefix (字符串, 可选): 变量名称的可选前缀（例如: "my-app-"）。

🔧 配置

环境变量

• FIGMA_API_KEY: 您的 Figma API 访问令牌（必需）
• PORT: 服务器运行的端口（默认: 3333）

命令行参数

• --version: 显示版本号
• --figma-api-key: 您的 Figma API 访问令牌
• --port: 服务器运行的端口
• --stdio: 以命令模式运行服务器，而不是默认的 HTTP/SSE 模式
• --help: 显示帮助菜单

💻 使用示例

连接到 Cursor

启动服务器

> npx figma-developer-mcp --figma-api-key=<您的 Figma API 令牌>
# 初始化 Figma MCP 服务器在 HTTP 模式下，端口 3333...
# HTTP 服务器监听于端口 3333
# SSE 终点可用地址: http://localhost:3333/sse
# 消息终点可用地址: http://localhost:3333/messages

将 Cursor 连接到 MCP 服务器

一旦服务器启动，将 Cursor 连接到 MCP 服务器 在 Cursor 的设置中，位于功能选项卡下。

连接成功后，在开始之前确认 Cursor 显示有效的连接状态。如果显示绿色点且工具可见，则表示正常工作！

开始使用 Composer 处理您的 Figma 设计

一旦 MCP 服务器连接成功，只要 Composer 处于代理模式，您就可以开始在 Cursor 的 Composer 中使用工具。

将链接到 Figma 文件的链接拖动到 Composer 中，并让 Cursor 对其执行操作，会自动触发 get_figma_data 工具。

大多数 Figma 文件都非常庞大，因此您可能需要链接到文件中的特定帧或组。通过选择单个元素后按 CMD + L 可以复制该元素的链接。您也可以在右键菜单中找到此选项：

一旦拥有一个指定元素的链接，您可以将其拖动到 Composer 中，并让 Cursor 对其执行操作。

检查响应

为了更轻松地检查来自 MCP 服务器的响应，您可以运行 inspect 命令，启动 @modelcontextprotocol/inspector 网页 UI 来触发工具调用和查看响应：

pnpm inspect
# > figma-mcp@0.1.7 inspect
# > pnpx @modelcontextprotocol/inspector
#
# 开始 MCP 检查器...
# 代理服务器在端口 3333 上监听...
#
# 🔍 MCP 检查器已启动并运行于 http://localhost:5174

访问 http://localhost:5174 查看工具调用和响应。

基础用法

示例 1: 获取 Figma 文件信息

curl --header "Content-Type: application/json" \
     --request POST \
     --data '{"fileKey":"your_figma_file_key","nodeId":"your_node_id"}' \
     http://localhost:3333/api/get_figma_data

示例 2: 生成设计令牌

curl --header "Content-Type: application/json" \
     --request POST \
     --data '{"fileKey":"your_figma_file_key","nodeId":"your_node_id","depth":2,"format":"scss","outputPath":"./tokens.scss","prefix":"my-app-"}' \
     http://localhost:3333/api/generate_design_tokens

⚠️ 注意事项

⚠️ 重要提示

• 确保服务器运行在正确的端口，并且网络配置允许外部访问。
• 使用有效的 Figma API 令牌以获取完整的功能支持。
• 处理大文件时，可能会出现性能问题，建议优化数据提取和处理逻辑。

📚 详细文档

如需更详细的信息，请参考 Figma MCP 服务器文档。