关键词

Figma设计稿AI 编码设计转代码上下文服务

Figma Context MCP Server 使用说明

项目简介

Figma Context MCP Server 作为一个 Model Context Protocol (MCP) 服务器，桥接了 Figma 设计平台和 AI 编码工具。通过此服务器，AI 编码工具可以访问 Figma 文件中的设计数据，从而更准确地理解设计意图，并生成更符合设计稿的代码。例如，在 Cursor 等 AI 编码工具中，使用 Figma Context MCP Server 可以显著提高将 Figma 设计稿一键转换为代码的成功率。

主要功能点

  • 连接 Figma 与 AI 编码工具: 通过 MCP 协议，将 Figma 设计数据以标准化的方式提供给 AI 编码工具。
  • 获取 Figma 设计数据: 支持获取 Figma 文件和特定节点（如 Frame, Group）的设计信息，包括布局、样式、文本内容等。
  • 简化 Figma 数据: 服务器在将 Figma API 返回的原始数据提供给 AI 模型之前，会进行简化和翻译，仅保留最相关的布局和样式信息，减少模型需要处理的上下文量，提高 AI 的准确性和响应的相关性。
  • 提供工具 (Tools):
    • 'get_figma_data': 获取 Figma 文件或指定节点的设计数据，包括布局和样式信息。
    • 'download_figma_images': 下载 Figma 文件中使用的图片资源（SVG 和 PNG 格式）。
  • 支持多种运行方式: 可以通过 NPM 直接运行，也可以克隆仓库后本地运行，并支持 HTTP/SSE 和 Stdio (命令行) 两种传输协议。

安装步骤

方法一：使用 NPM 快速运行 (推荐)

无需安装和构建仓库，直接使用 NPM 即可快速启动服务器：

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>

请务必将 '<your-figma-api-key>' 替换为你自己的 Figma API 访问令牌。 你可以在 Figma 官方文档 中找到创建 Figma API 访问令牌的步骤。只需要只读权限即可。

方法二：从本地源代码运行

  1. 克隆仓库到本地： 
    git clone https://github.com/GLips/Figma-Context-MCP
cd Figma-Context-MCP
  2. 安装依赖： 
    pnpm install
  3. 复制 '.env.example' 文件并重命名为 '.env'，然后将你的 Figma API 访问令牌填入 '.env' 文件中的 'FIGMA_API_KEY' 变量。
  4. 启动服务器： 
    pnpm run dev
    你还可以根据需要添加命令行参数，例如 '--port <端口号>' 或 '--stdio'。

服务器配置 (MCP 客户端配置)

以下 JSON 配置信息用于配置 MCP 客户端 (例如 Cursor, Windsurf, Cline 等) 连接到 Figma Context MCP Server。 你需要将以下配置添加到 MCP 客户端的配置文件中。

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

配置参数说明：

  • 'serverName': 自定义服务器名称，例如 "figma-developer-mcp"，在 MCP 客户端中用于标识该服务器。
  • 'command': 启动 MCP 服务器的命令。 这里使用 'npx' 命令来运行 'figma-developer-mcp' 包。 请确保你的运行环境中已安装 Node.js 和 npm (或 pnpm, yarn, bun)。
  • 'args': 传递给启动命令的参数，以数组形式表示。
    • '"-y"': (可选) 对于 'npx' 命令，'-y' 参数表示自动确认安装 'figma-developer-mcp' 包，避免在首次运行时出现交互式提示。
    • '"figma-developer-mcp"': 要执行的 npm 包名，即 Figma Context MCP Server 的入口。
    • '"--stdio"': 指定服务器使用 标准输入输出 (stdio) 模式进行通信，这是一种常用的 MCP 服务器通信方式，简单且易于配置。
  • 'env': (可选) 环境变量配置，以 JSON 对象形式表示。
    • '"FIGMA_API_KEY"': Figma API 密钥。 请务必将 '<your-figma-api-key>' 替换为你自己的 Figma API 访问令牌。 为了安全起见，建议通过环境变量方式传递 API 密钥，避免将其硬编码在配置文件或命令行中。

注意：

  • MCP 客户端需要根据自身文档配置 MCP 服务器，以上 JSON 配置为通用示例，具体配置方式请参考你使用的 MCP 客户端的文档。
  • 如果使用 HTTP/SSE 模式运行服务器 (不使用 '--stdio' 参数)，则 MCP 客户端需要配置 HTTP/SSE 连接地址，具体请参考 MCP 客户端和服务器的文档。

基本使用方法

  1. 启动服务器: 根据 "安装步骤" 中的方法启动 Figma Context MCP Server。
  2. 配置 MCP 客户端: 将 "服务器配置" 中的 JSON 配置信息添加到你的 MCP 客户端 (例如 Cursor) 的配置文件中，并确保正确填写 Figma API 密钥。
  3. 连接服务器: 在 MCP 客户端中连接到 Figma Context MCP Server。 连接成功后，客户端通常会显示服务器提供的工具列表。
  4. 使用 Figma 设计稿: 在 MCP 客户端 (例如 Cursor 的编辑器中)，粘贴 Figma 文件、Frame 或 Group 的链接。
  5. 与 AI 交互: 向 AI 发出指令，例如 "实现这个 Figma 设计"，AI 即可利用 Figma Context MCP Server 提供的设计数据进行代码生成或其他操作。

获取 Figma 链接: 在 Figma 中，你可以复制整个文件、特定 Frame 或 Group 的链接。 对于更精确的上下文，建议复制特定 Frame 或 Group 的链接。 在 Figma 中选中元素后，可以使用 'CMD + L' (Mac) 或右键菜单 "Copy link" 来复制链接。

信息

分类

开发者工具

访问项目