F2c MCP

🚀 F2C MCP Server

The F2C MCP Server is a Model Context Protocol (MCP) server that enables AI coding assistants to access Figma design data and convert it into HTML/CSS code. Here are its main features:

• Convert Figma design nodes into high-fidelity HTML/CSS markup, leading in the industry.
• Provide Figma design context to AI coding tools such as Cursor.
• Support Figma file URLs with fileKey and nodeId parameters.
• Use the Figma API to obtain design metadata.
• Implement the JSON-RPC 2.0 protocol for communication.

🚀 Quick Start

Step 1: Set Your Figma API Key

Set your Figma API key in the .env file:

FIGMA_API_KEY=your_api_key_here

Step 2: Install Dependencies

Install the necessary dependencies:

npm install

Step 3: Start the Development Server

Start the development server:

npm run dev

📦 Installation

Add MCP Service

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

Add MCP Service (Windows)

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

❓ Frequently Asked Questions

Error: spawn npx ENOENT

Solution: Add the PATH environment variable to mcpServer

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

English | Simplified Chinese