Figma MCP サーバー

FigmaのデザインとReactの実装を繋ぐModel Context Protocol（MCP）サーバーです。このサーバーは、Figmaのファイルデータを処理してReactに適した形式で提供することで、FigmaのデザインをピクセルパーフェクトにReactアプリケーションに変換します。

🚀 機能

• Figma API 統合: デザインファイルにアクセスするための Figma の API への直接接続

• React対応出力:FigmaデータをReact互換フォーマットに変換します

• スタイル処理: Figma スタイルを CSS/styled-components に変換します

• アセット管理: 画像アセットとSVGコンポーネントを処理します

• レイアウト処理：Figmaの自動レイアウトをFlexboxに変換します

• 型安全性:信頼性の高い型チェックのためにTypeScriptで構築されています

Related MCP server: MCP Figma to React Converter

🛠️ 提供されるツール

1. get_file_content :

   • Figmaファイルのコンテンツを取得して処理します

   • レイアウト、スタイル、コンポーネントを変換します

   • React対応のコンポーネント構造GXP1を返します

2. get_node_images :

   • Figmaから画像アセットを取得します

   • 複数の形式をサポート（PNG、JPG、SVG）

   • 設定可能なスケーリングオプション GXP2

📦 インストール

1. リポジトリをクローンします。

   git clone https://github.com/yourusername/figma-mcp.git
   cd figma-mcp

2. 依存関係をインストールします:

   npm install

3. Figma アクセス トークンを設定します。

   cp .env.example .env
   # Add your Figma access token to .env

🎯 カーソル IDE のセットアップ

1. プロジェクト ルートに.cursor/mcp.jsonファイルを作成します。

   mkdir -p .cursor
   touch .cursor/mcp.json

2. Stdio ベースのサーバー構成の場合:

   {
    "mcpServers": {
      "figma": {
        "command": "node",
        "args": ["d:/<folder>>/figma-mcp/build/index.js"],
        "env": {
          "FIGMA_ACCESS_TOKEN": "your figma token"
        },
        "disabled": false,
        "alwaysAllow": [],
        "protocol": "stdio"
      }
    }

}

## 💻 Usage

1. Build the server:
 ```bash
 npm run build
 ```

2. Configure MCP settings based on your IDE:

- For VS Code (global settings):
  ```json
  // In settings.json
  {
    "mcpServers": {
      "figma": {
        "command": "node",
        "args": ["path/to/figma-mcp/build/index.js"],
        "env": {
          "FIGMA_ACCESS_TOKEN": "your-token-here"
        }
      }
    }
  }
  ```

- For Cursor IDE:
  Use the `.cursor/mcp.json` configuration as described in the "Cursor IDE Setup" section above.
  This configuration will take precedence over VS Code settings when using Cursor IDE.

3. Use the MCP tools in your application:
```typescript
// Example: Fetch processed Figma content
const result = await useMcpTool("figma", "get_file_content", {
  fileKey: "your-figma-file-key"
});

🧩 サンプルプロジェクト

この MCP サーバーを使用して、Figma デザインのピクセルパーフェクトな React 実装を作成する完全な例についてはraccoon-gameディレクトリを参照してください。

🔄 処理パイプライン

1. 入力: 公式API経由のFigmaファイルデータ

2. 処理：

   • スタイル変換（色、タイポグラフィ、効果）

   • レイアウト変換（Flexboxへの絶対変換）

   • コンポーネント階層マッピング

   • 資産最適化

3. 出力: React対応コンポーネントデータ

📝 ライセンス

MITライセンス

🤝 貢献する

貢献を歓迎します！貢献ガイドラインをお読みください。

🙏 謝辞

• 包括的なAPIを提供するFigma APIチーム

• MCP仕様のモデルコンテキストプロトコル

[あなたの名前] が ❤️ を込めて作りました