F2c MCP

🚀 F2C MCP サーバー

English | 简体中文

F2C MCP サーバーは、モデルコンテキストプロトコル（Model Context Protocol）サーバーです。このサーバーを使用することで、AI コーディングアシスタントが Figma の設計データにアクセスし、それを HTML/CSS コードに変換することができます。主な機能は以下の通りです。

• Figma の設計ノードを高品質な HTML/CSS マークアップに変換し、業界をリードする位置付けです。
• Cursor などの AI コーディングツールに Figma の設計コンテキストを提供します。
• fileKey と nodeId パラメータを持つ Figma ファイルの URL をサポートします。
• Figma API を使用して設計メタデータを取得します。
• JSON-RPC 2.0 プロトコルを実装して通信を行います。

📦 MCP サービスの追加

一般環境

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

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

📚 よくある質問

エラー：spawn npx ENOENT

解決策：mcpServer で PATH 環境変数を追加します。

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