使用说明

项目简介

Figma MCP Server 是一个基于 Model Context Protocol (MCP) 构建的服务器，旨在为 Cursor、Windsurf 和 Cline 等 AI 编码工具提供访问 Figma 设计文件的能力。通过此服务器，AI 工具可以获取 Figma 设计的元数据，从而更准确地理解设计意图并生成代码。

主要功能点

Figma 数据获取: 提供 'get_figma_data' 工具，允许 AI 获取 Figma 文件或特定节点的设计布局和样式信息，包括图层结构、样式属性等。
图片资源下载: 提供 'download_figma_images' 工具，允许 AI 下载 Figma 设计中使用的图片资源，如 PNG 和 SVG 图片。
标准 MCP 协议: 遵循 Model Context Protocol 标准，通过 JSON-RPC 协议与 MCP 客户端通信，支持 Stdio 和 HTTP/SSE 等多种传输协议。
易于配置和使用: 提供简单的配置方式，支持环境变量和命令行参数，方便用户快速启动和连接服务器。

安装步骤

安装 Node.js 和 npm (或 pnpm, yarn, bun)。 确保你的系统已安装 Node.js 和包管理器 npm。

使用 npm 直接运行 (无需安装仓库): 打开终端，运行以下命令，替换 '<your-figma-api-key>' 为你的 Figma API 访问令牌：

npx figma-developer-mcp --figma-api-key=<your-figma-api-key>

或者使用 pnpm, yarn, bun:

pnpx figma-developer-mcp --figma-api-key=<your-figma-api-key>
yarn dlx figma-developer-mcp --figma-api-key=<your-figma-api-key>
bunx figma-developer-mcp --figma-api-key=<your-figma-api-key>

从本地源码运行 (可选): a. 克隆仓库: 'git clone https://github.com/rlagudals95/mcp_figma' b. 进入仓库目录: 'cd mcp_figma' c. 安装依赖: 'npm install' (或 'pnpm install', 'yarn install', 'bun install') d. 复制 '.env.example' 为 '.env' 并填写 Figma API 令牌 'FIGMA_API_KEY=<your-figma-api-key>' e. 运行服务器: 'npm run dev' (或 'pnpm run dev', 'yarn run dev', 'bun run dev')

服务器配置

对于支持配置文件 (如 JSON) 的 MCP 客户端 (例如 Windsurf, Cline, Claude Desktop)，可以使用以下配置来启动 Figma MCP Server：

{
  "mcpServers": {
    "figma-developer-mcp": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--stdio"],
      "env": {
        "FIGMA_API_KEY": "<your-figma-api-key>"
      }
    }
  }
}

'server name': 'figma-developer-mcp' (服务器名称，客户端用于标识)
'command': 'npx' (启动服务器的命令，这里使用 npx 运行 npm 包)
'args': '["-y", "figma-developer-mcp", "--stdio"]' (传递给命令的参数，'-y' 自动确认安装包，'figma-developer-mcp' 是要运行的包名, '--stdio' 指定使用 Stdio 传输协议)
'env': '{ "FIGMA_API_KEY": "<your-figma-api-key>" }' (环境变量，'FIGMA_API_KEY' 用于配置 Figma API 令牌，请替换 '<your-figma-api-key>' 为你自己的令牌，也可以直接在命令行参数中配置 '--figma-api-key=<your-figma-api-key>')

基本使用方法

启动 Figma MCP Server。
在 Cursor 等支持 MCP 的 AI 编码工具中配置并连接到 Figma MCP Server。
在 AI 工具的编辑器中，粘贴 Figma 文件、画框或组件的链接。
提示 AI 工具基于 Figma 设计执行操作，例如 "实现这个设计" 或 "根据 Figma 设计生成代码"。
AI 工具将自动调用 Figma MCP Server 的工具获取设计信息，并据此生成代码。

关键词