Figma MCP Server 使用说明

项目简介

Figma MCP Server 是一个基于 Model Context Protocol (MCP) 构建的服务器，旨在让 AI 编码代理能够直接访问 Figma 设计文件和原型。通过此服务器，AI 代理可以获取 Figma 文件中的组件、节点信息以及原型工作流，从而更好地理解设计内容，辅助设计相关的任务。

主要功能点

获取 Figma 组件列表: 允许 AI 代理查询 Figma 文件中可用的组件信息，包括组件ID、名称和描述。
获取 Figma 节点详细信息: 允许 AI 代理根据节点 ID 获取 Figma 文件中特定节点的详细数据，包括节点属性、样式信息等，并已转换为简化的 JSON 结构方便 AI 理解和处理。
获取 Figma 原型工作流: 允许 AI 代理提取 Figma 原型中定义的页面连接和交互信息，例如页面之间的跳转关系和动画效果。

安装步骤

安装 'figma-mcp': 使用 'pipx' 可以方便快捷地安装 'figma-mcp'。如果您的环境没有 'pipx'，请先安装 'pipx'。
```
pipx install figma-mcp
```

服务器配置

MCP 客户端需要配置 MCP 服务器的启动命令和参数才能连接。以下是针对不同 MCP 客户端的配置示例。

针对 Cursor 编辑器:

在 Cursor 编辑器的设置中，添加 MCP 服务器，并使用以下命令和参数。请将 'your_figma_key' 替换为您的 Figma API 密钥。

{
  "mcpServers": {
    "figma-python": {
      "command": "figma-mcp",
      "args": [
        "--figma-api-key=your_figma_key"
      ]
    }
  }
}

参数说明:

'command': MCP 服务器的启动命令，这里是 'figma-mcp'，即安装后可执行的命令。
'args': 启动命令的参数列表。
- '--figma-api-key': 必填参数，用于访问 Figma API 的密钥。您需要前往 Figma 开发者设置获取您的 API 密钥，并替换 'your_figma_key'。您也可以将 Figma API 密钥设置为环境变量 'FIGMA_API_TOKEN'，这样可以省略此参数。

针对其他 MCP 客户端 (如 Windsurf):

您可以创建一个名为 'mcp_config.json' 的配置文件，并将以下内容添加到文件中。同样，请将 'your_figma_key' 替换为您的 Figma API 密钥。

{
  "mcpServers": {
    "figma-python": {
      "command": "figma-mcp",
      "args": [
        "--figma-api-key=your_figma_key"
      ]
    }
  }
}

然后，在 Windsurf 等客户端中配置读取此 'mcp_config.json' 文件。

基本使用方法

启动 Figma MCP Server: 在终端中运行 'figma-mcp --figma-api-key=YOUR_FIGMA_API_KEY' (或者设置环境变量 'FIGMA_API_TOKEN' 后直接运行 'figma-mcp') 启动服务器。服务器默认会在标准输入/输出流中等待 MCP 客户端的请求。
在 MCP 客户端中使用工具: 在您的 MCP 客户端（例如 Cursor 编辑器或 Windsurf）中，您可以使用以下工具来与 Figma MCP Server 交互：
- 'get_components(file_key: str)': 获取 Figma 文件中的组件列表。您需要提供 Figma 文件的 'file_key'。'file_key' 通常可以在 Figma 文件 URL 中找到，例如在 'https://www.figma.com/file/YOUR_FILE_KEY/...' 中，'YOUR_FILE_KEY' 就是 'file_key'。
- 'get_node(file_key: str, node_id: str)': 获取 Figma 文件中特定节点的详细信息。除了 'file_key'，您还需要提供要查询的 'node_id'。'node_id' 可以在 Figma 编辑器中选中节点后，在 URL 或开发者工具中找到，格式通常为 'x:y' (例如 '0:3')。如果 URL 中是 '0-3' 格式，工具会自动转换为 '0:3' 格式。
- 'get_workflow(file_key: str)': 获取 Figma 文件的原型工作流信息。只需要提供 'file_key'。
示例 (在支持 MCP 协议的 AI 客户端中):
```
请帮我分析 Figma 文件 [file_key: 你的Figma文件key] 中的设计组件，特别是关于按钮组件的设计规范。
```
AI 客户端会调用 'get_components' 工具获取组件列表，然后可能进一步调用 'get_node' 获取特定组件的详细信息，并根据返回的数据进行分析和回答。

注意: 请确保您的 Figma API 密钥安全，避免泄露。

关键词