Figma MCP Server

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

🛠️ 提供されるツール

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" } }

}

🧩 サンプルプロジェクト

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

🔄 処理パイプライン

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

📝 ライセンス

MITライセンス

🤝 貢献する

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

🙏 謝辞

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

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