关键词

Figma设计稿代码生成AI工具上下文服务

项目简介

Figma Context MCP Server 是一个基于 Model Context Protocol (MCP) 构建的服务器，旨在为 AI 编码工具提供访问 Figma 设计文件数据的能力。通过 इस服务器，AI 工具可以更有效地理解 Figma 设计稿的结构和样式，从而在代码生成、设计实现等任务中表现更佳。

主要功能点

  • 获取 Figma 设计数据: 提供 'get_figma_data' 工具，允许 AI 工具根据 Figma 文件链接或节点 ID 获取设计稿的布局、样式和文本等信息。
  • 下载 Figma 图片资源: 提供 'download_figma_images' 工具，支持 AI 工具下载 Figma 设计稿中使用的图片资源，方便在代码中使用。
  • 简化 Figma API 响应: 服务器在将 Figma API 返回的数据提供给 AI 工具之前，会进行简化和翻译，只保留最相关的布局和样式信息，减少 AI 工具需要处理的上下文量，提高准确性和响应速度。
  • 支持多种运行方式: 可以通过 npm 快速运行，也可以从本地源码启动，并支持 HTTP/SSE 和 Stdio 等多种传输协议。
  • 易于配置: 支持通过环境变量或命令行参数配置 Figma API 密钥和端口等信息。

安装步骤

  1. 环境准备: 确保已安装 Node.js 和 npm (或 pnpm, yarn, bun 等包管理器)。

  2. 快速运行 (推荐): 使用 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>

  3. 本地源码运行: 如果需要修改代码或从源码运行，请按照以下步骤操作：

    git clone https://github.com/GLips/Figma-Context-MCP
cd Figma-Context-MCP
pnpm install  # 或 npm install, yarn install, bun install
cp .env.example .env
# 编辑 .env 文件，填入你的 Figma API 访问令牌到 FIGMA_API_KEY 字段
pnpm run dev   # 启动开发服务器，或使用 npm run dev, yarn dev, bun dev

    获取 Figma API 访问令牌的步骤请参考 Figma 官方文档。只需要只读权限的令牌即可。

服务器配置

对于需要配置文件来启动 MCP 服务器的客户端，例如 Cursor, Windsurf, Cline, Claude Desktop 等，需要提供 MCP 服务器的配置信息。以下是一个 JSON 格式的配置示例，你需要将其添加到你的 MCP 客户端的配置文件中。

{
  "mcpServers": {
    "figma-developer-mcp": {  // 服务器名称，可以自定义
      "command": "npx",      // 启动服务器的命令，这里使用 npx
      "args": ["-y", "figma-developer-mcp", "--stdio"], // 启动命令的参数，--stdio 表示使用 Stdio 传输协议
      "env": {
        "FIGMA_API_KEY": "<your-figma-api-key>" // 你的 Figma API 访问令牌，**请替换为你的真实令牌**
      }
    }
  }
}

配置参数说明:

  • 'server name': 服务器名称，例如 '"figma-developer-mcp"'，用于在 MCP 客户端中标识该服务器。
  • 'command': 启动 MCP 服务器的命令。通常为包管理器命令（如 'npx', 'npm', 'yarn', 'bun'）或 Node.js 可执行文件路径。
  • 'args': 传递给启动命令的参数数组。
    • '"-y"' (可选): 某些包管理器参数，例如 'npx -y' 表示自动确认安装。
    • '"figma-developer-mcp"': 要执行的 npm 包名，对应 Figma Context MCP Server。
    • '"--stdio"': 指定使用 Stdio 传输协议。如果客户端和服务器运行在同一台机器上，推荐使用 Stdio 协议以获得更好的性能。如果使用 HTTP/SSE 协议，则不需要此参数。
  • 'env': 环境变量配置。
    • '"FIGMA_API_KEY"': 必须配置，你的 Figma API 访问令牌，用于服务器访问 Figma API。请务必替换为你的真实令牌。

注意:

  • 如果你选择使用 HTTP/SSE 协议运行服务器 (默认模式，不加 '--stdio' 参数)，则 MCP 客户端需要配置服务器的 HTTP 地址 (例如 'http://localhost:3333/sse') 而不是启动命令。具体配置方式请参考 MCP 客户端的文档。
  • 'command' 和 'args' 的配置可能需要根据你的包管理器和实际运行环境进行调整。请确保配置的命令能够正确启动 Figma Context MCP Server。

基本使用方法

  1. 启动服务器: 按照上述安装步骤启动 Figma Context MCP Server，确保服务器成功运行，并根据你选择的运行方式 (HTTP/SSE 或 Stdio) 记录服务器地址或启动命令。

  2. 配置 MCP 客户端: 在你的 AI 编码工具 (如 Cursor) 中，打开 MCP 服务器配置页面，根据工具的指引，添加并配置 Figma Context MCP Server。你需要提供服务器的启动命令 (command) 及其参数 (args)，或者服务器的 HTTP 地址 (取决于你服务器的运行模式和客户端的要求)。

  3. 连接服务器: 在 MCP 客户端中连接到已配置的 Figma Context MCP Server。连接成功后，客户端通常会显示服务器提供的工具列表 (例如 'get_figma_data', 'download_figma_images')，表示服务器已成功接入。

  4. 使用 Figma 上下文: 在 AI 编码工具的编辑器中，粘贴 Figma 文件、框架或分组的链接。当 AI 工具需要 Figma 设计稿的上下文信息时，会自动调用 Figma Context MCP Server 提供的工具，获取相关数据，并用于代码生成或其他 AI 辅助功能。

    例如，在 Cursor 中，你可以在 Agent 模式下，将 Figma 链接粘贴到编辑器中，并提问类似 "Implement this design" 的问题，Cursor 就会利用 Figma Context MCP Server 获取 Figma 数据，并尝试根据设计稿生成代码。

Inspect Responses (可选)

如果需要更方便地查看 MCP 服务器的响应，可以使用 '@modelcontextprotocol/inspector' 工具。运行 'pnpm inspect' 命令可以启动 Inspector Web UI，用于触发工具调用和查看响应。

pnpm inspect

然后访问 'http://localhost:5173' 即可在浏览器中打开 Inspector UI。

信息

分类

开发者工具

访问项目