【亲测免费】 Figma-Context-MCP 使用教程

1. 项目介绍

Figma-Context-MCP 是一个开源项目，旨在为 AI 编码助手提供 Figma 设计数据的 Model Context Protocol（MCP）服务器。通过该服务器，AI 编码助手可以获取 Figma 文件的布局信息，从而更准确地实现设计到代码的转换。

2. 项目快速启动

在开始之前，请确保您已经安装了 Node.js。

步骤 1：克隆仓库

git clone https://github.com/GLips/Figma-Context-MCP.git
cd Figma-Context-MCP

步骤 2：安装依赖

npm install

步骤 3：配置 Figma API 访问令牌

在项目根目录下创建一个 .env 文件，并添加您的 Figma API 访问令牌。

FIGMA_API_KEY=您的FigmaAPI访问令牌

步骤 4：启动服务器

npm start

服务器启动后，您可以在配置文件中添加 MCP 服务器的相关信息。

对于 MacOS/Linux 用户：

{
  "mcpServers": {
    "Framelink Figma MCP": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp",
        "--figma-api-key=您的FigmaAPI访问令牌",
        "--stdio"
      ]
    }
  }
}

对于 Windows 用户：

{
  "mcpServers": {
    "Framelink Figma MCP": {
      "command": "cmd",
      "args": [
        "/c",
        "npx",
        "-y",
        "figma-developer-mcp",
        "--figma-api-key=您的FigmaAPI访问令牌",
        "--stdio"
      ]
    }
  }
}

3. 应用案例和最佳实践

使用 Figma-Context-MCP 服务器时，您可以：

• 在 IDE 的聊天窗口中打开 Figma 文件链接。
• 请求 AI 编码助手根据 Figma 文件生成代码。

这样，AI 助手将能够从 Figma 获取必要的布局和样式信息，从而更准确地生成代码。

4. 典型生态项目

Figma-Context-MCP 可以与多种 AI 编码助手和代码编辑器集成，例如 Cursor、Windsurf 和 Cline 等。这些工具可以利用 Figma 设计数据来提升代码生成的质量和效率。通过持续发展和社区贡献，Figma-Context-MCP 将不断完善，支持更多的生态项目和用例。