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: FigmaMind MCP Server

🛠️ 提供されるツール

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仕様のモデルコンテキストプロトコル

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