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で構築されています

🛠️ 提供されるツール

get_file_content :
- Figmaファイルのコンテンツを取得して処理します
- レイアウト、スタイル、コンポーネントを変換します
- React対応のコンポーネント構造GXP1を返します
get_node_images :
- Figmaから画像アセットを取得します
- 複数の形式をサポート（PNG、JPG、SVG）
- 設定可能なスケーリングオプション GXP2

📦 インストール

リポジトリをクローンします。
git clone https://github.com/yourusername/figma-mcp.git cd figma-mcp
依存関係をインストールします:
npm install
Figma アクセストークンを設定します。
cp .env.example .env # Add your Figma access token to .env

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

プロジェクトルートに.cursor/mcp.jsonファイルを作成します。
mkdir -p .cursor touch .cursor/mcp.json
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ディレクトリを参照してください。

🔄 処理パイプライン

入力: 公式API経由のFigmaファイルデータ
処理：
- スタイル変換（色、タイポグラフィ、効果）
- レイアウト変換（Flexboxへの絶対変換）
- コンポーネント階層マッピング
- 資産最適化
出力: React対応コンポーネントデータ

📝 ライセンス

MITライセンス

🤝 貢献する

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

🙏 謝辞

包括的なAPIを提供するFigma APIチーム
MCP仕様のモデルコンテキストプロトコル

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

Figma MCP Server

Integrations