F2c MCP

🚀 F2C MCP 服务器

F2C MCP 服务器是一款模型上下文协议（Model Context Protocol）服务器，它为 AI 编码助手提供了访问 Figma 设计数据的能力，并能将这些数据转换为 HTML/CSS 代码。其主要作用在于打通设计与开发环节，让开发者能够更高效地将设计稿转化为实际代码，提升开发效率和质量。

✨ 主要特性

• 高保真转换：可将 Figma 设计节点转换为高保真的 HTML/CSS 标记，在行业内处于领先地位。
• 设计上下文提供：向 Cursor 等 AI 编码工具提供 Figma 设计上下文。
• URL 支持：支持带有 fileKey 和 nodeId 参数的 Figma 文件 URL。
• 元数据获取：使用 Figma API 获取设计元数据。
• 通信协议实现：实现 JSON - RPC 2.0 协议进行通信。

📦 安装指南

添加 MCP 服务

{
  "mcpServers": {
    "f2c-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@f2c/mcp"
      ],
      "env": {
        "personalToken": ""
      }
    }
  }
}

添加 MCP 服务（Windows）

{
  "mcpServers": {
    "f2c-mcp": {
      "command": "cmd",
      "args": ["/c", "npx", "-y", "@f2c/mcp"],
      "env": {
        "personalToken": ""
      }
    }
  }
}

🚀 快速开始

1. 在 .env 文件中设置你的 Figma API 密钥：

FIGMA_API_KEY=your_api_key_here

2. 安装依赖项：

npm install

3. 启动开发服务器：

npm run dev

💻 使用示例

基础用法

在配置文件中添加 MCP 服务，如上述的 JSON 代码示例，可让服务器正常运行并提供相应服务。

🔧 技术细节

本服务器使用 JSON - RPC 2.0 协议进行通信，通过 Figma API 获取设计元数据。在运行时，需要设置 Figma API 密钥，以便服务器能够访问 Figma 设计数据。同时，根据不同的操作系统（如 Windows），在配置 MCP 服务时需要调整相应的命令和参数。

📚 详细文档

常见问题

错误：spawn npx ENOENT 解决方案：在 mcpServer 中添加 PATH 环境变量

{
  "env": {
    "PATH": "/Users/xxx/.nvm/versions/node/v20.10.0/bin:/bin"
  }
}