使用说明

项目简介

Figma MCP Server 是一个基于 Model Context Protocol (MCP) 构建的后端服务，旨在桥接 Figma 设计平台与大型语言模型（LLM）及人工智能工具。它允许用户通过标准的 MCP 协议，让 AI 客户端（如 Claude、Cursor 等）安全、便捷地访问 Figma 设计文件，并利用预设的工具和 Prompt 模板，实现设计数据提取、设计系统分析、UI 文案管理、开发交付文档生成等智能化设计工作流。

主要功能点

设计数据提取: 从 Figma 设计稿中提取组件、样式、文本等设计数据，为 LLM 提供上下文信息。
设计系统分析: 分析 Figma 设计系统的一致性和模式，辅助设计师优化设计系统。
UI 文案管理: 提取和组织设计稿中的所有 UI 文本内容，方便文案校对和管理。
开发交付文档生成: 基于 Figma 设计稿自动生成全面的开发交付文档，提升开发效率。
无缝 AI 集成: 通过 MCP 协议，与 Claude、Cursor 等 MCP 客户端无缝连接，方便用户在熟悉的 AI 环境中使用 Figma 相关功能。
支持多种连接方式: 支持 Stdio (标准输入输出) 和 SSE (服务器发送事件) 两种传输协议，满足不同场景的需求。

安装步骤

克隆仓库:

git clone https://github.com/mohammeduvaiz/figma-mcp-server.git
cd figma-mcp-server

安装依赖:
```
npm install
```

配置环境变量: 在项目根目录下创建 '.env' 文件，并填入以下配置信息：

FIGMA_API_TOKEN=你的_Figma_个人访问令牌  # 必须：从 Figma 账户设置中获取
API_KEY=你的_API_密钥  # 必须：用于 SSE 传输的安全密钥，可自定义
TRANSPORT_TYPE=stdio  # 可选：传输类型，默认为 stdio，可选 sse
PORT=3000  # 可选：SSE 传输端口，默认为 3000，仅当 TRANSPORT_TYPE=sse 时生效

注意: 请务必替换 '你的_Figma_个人访问令牌' 和 '你的_API_密钥' 为您实际的值。'API_KEY' 用于 SSE 模式下的客户端身份验证，请设置一个安全的密钥。

构建服务器:
```
npm run build
```
启动服务器:
```
npm start
```
根据 '.env' 文件中 'TRANSPORT_TYPE' 的配置，服务器将以 Stdio 或 SSE 模式启动。

服务器配置

以下是在 MCP 客户端 (如 Claude for Desktop, Cursor) 中配置 Figma MCP Server 的示例。

1. Claude for Desktop 配置 (Stdio 传输)

打开或创建 Claude for Desktop 的配置文件 ('claude_desktop_config.json')，根据操作系统路径选择：

macOS: '~/Library/Application Support/Claude/claude_desktop_config.json'
Windows: '%APPDATA%\Claude\claude_desktop_config.json'

在 'mcpServers' 字段下添加 'figma' 服务器配置：

{
  "mcpServers": {
    "figma": {
      "command": "node",
      "args": ["/绝对路径/figma-mcp-server/build/index.js"],
      "env": {
        "FIGMA_API_TOKEN": "你的_Figma_个人访问令牌", // 建议配置在服务器的 .env 文件中，此处可省略
        "TRANSPORT_TYPE": "stdio" // 必须：指定使用 stdio 传输
      }
    }
  }
}

参数说明:

'"figma"': 服务器名称，在 Claude 中用于标识和调用。
'"command": "node"': 启动服务器的命令，这里使用 Node.js 运行。
'"args": ["/绝对路径/figma-mcp-server/build/index.js"]': 启动命令的参数，指向服务器入口文件 'build/index.js' 的绝对路径。 请将 '/绝对路径/figma-mcp-server' 替换为您的实际项目路径。
'"env"': 环境变量配置。
- '"FIGMA_API_TOKEN"': Figma 个人访问令牌，建议配置在服务器的 '.env' 文件中，此处可以省略，如果省略请确保服务器 '.env' 文件配置正确。
- '"TRANSPORT_TYPE": "stdio"': 指定使用 Stdio 传输协议。

配置完成后，重启 Claude for Desktop 使配置生效。

2. Cursor 配置 (SSE 传输)

Cursor 支持全局和项目特定的 MCP 服务器配置。

全局配置 (SSE 传输):

打开或创建 Cursor 的全局 MCP 配置文件 ('mcp.json')，根据操作系统路径选择：

macOS: '~/Library/Application Support/Cursor/mcp.json'
Windows: '%APPDATA%\Cursor\mcp.json'

在 'mcpServers' 字段下添加 'figma-mcp' 服务器配置：

{
  "mcpServers": {
    "figma-mcp": {
      "url": "http://localhost:3000/sse",
      "env": {
        "API_KEY": "你的_API_密钥" // 必须：与服务器 .env 文件中 API_KEY 一致
      }
    }
  }
}

项目特定配置 (SSE 传输):

在项目根目录下创建 '.cursor' 目录: 'mkdir -p .cursor'
在 '.cursor' 目录下创建 'mcp.json' 文件，并添加以下配置内容 (与全局配置相同):

{
  "mcpServers": {
    "figma-mcp": {
      "url": "http://localhost:3000/sse",
      "env": {
        "API_KEY": "你的_API_密钥" // 必须：与服务器 .env 文件中 API_KEY 一致
      }
    }
  }
}

参数说明:

'"figma-mcp"': 服务器名称，在 Cursor 中用于标识和调用。
'"url": "http://localhost:3000/sse"': SSE 连接 URL，默认为 'http://localhost:3000/sse'，与服务器启动地址一致。
'"env"': 环境变量配置。
- '"API_KEY": "你的_API_密钥"': API 密钥，必须与服务器 '.env' 文件中配置的 'API_KEY' 保持一致，用于客户端身份验证。

配置完成后，Cursor 将自动加载配置并连接到 Figma MCP Server。

基本使用方法

成功配置并启动服务器后，在 MCP 客户端 (如 Claude 或 Cursor) 中，即可通过以下方式使用 Figma 相关功能：

在 Claude 中: 直接使用自然语言指令，例如：

Can you analyze the design system in my Figma file with key abc123? Look for consistency in color usage and typography.

Claude 会自动识别并调用 Figma MCP Server 提供的工具和 Prompt 来处理请求。

在 Cursor 中: 可以使用 '@tool' 或 '@prompt' 语法来显式调用工具和 Prompt，例如：

@tool get-file-info fileKey=abc123  // 调用 get-file-info 工具获取文件信息
@prompt analyze-design-system fileKey=abc123 // 调用 analyze-design-system Prompt 分析设计系统

或在对话中使用自然语言指令，Cursor 也会智能识别并调用相应的工具和 Prompt。

常用工具 (Tools):

'get-file-info': 获取 Figma 文件基本信息。
'get-nodes': 获取 Figma 文件中指定节点的信息。
'get-components': 获取 Figma 文件中的组件信息。
'get-styles': 获取 Figma 文件中的样式信息。
'get-comments': 获取 Figma 文件中的评论信息。
'search-file': 在 Figma 文件中搜索元素。
'extract-text': 提取 Figma 文件中的所有文本元素。

常用 Prompt 模板 (Prompts):

'analyze-design-system': 分析设计系统一致性。
'extract-ui-copy': 提取 UI 文案。
'generate-dev-handoff': 生成开发交付文档。

请参考仓库 README.md 文件和代码注释，了解更详细的工具和 Prompt 使用方法。

关键词