MCP Figma To React

🚀 Figma から React への変換器 MCP サーバー

このサーバーは、モデルコンテキストプロトコル (MCP) を使用して、Figma のデザインを React コンポーネントに変換します。Figma のデザインを取得し、TypeScript と Tailwind CSS を含む React コンポーネントを生成するツールを提供します。

🚀 クイックスタート

この MCP サーバーを使用することで、Figma のデザインを簡単に React コンポーネントに変換できます。以下の手順に従って、サーバーをセットアップして使用しましょう。

✨ 主な機能

• Figma API を使用して Figma デザインを取得する
• Figma デザインからコンポーネントを抽出する
• TypeScript 付きの React コンポーネントを生成する
• Figma のスタイルに基づいて Tailwind CSS クラスを適用する
• コンポーネントのアクセシビリティ機能を強化する
• stdio と SSE のトランスポートをサポートする

📦 インストール

前提条件

• Node.js 18 以上
• Figma API トークン

手順

1. リポジトリをクローンします。
2. 依存関係をインストールします。

npm install

3. プロジェクトをビルドします。

npm run build

📚 ドキュメント

設定

FIGMA_API_TOKEN 環境変数を、Figma アカウント設定ページから取得した個人用アクセストークンに設定する必要があります。

使用方法

ローカル MCP サーバーとして実行

FIGMA_API_TOKEN=your_token_here npm start

または、トランスポート方式を指定して実行します。

FIGMA_API_TOKEN=your_token_here node dist/index.js --transport=stdio

HTTP サーバーとして実行

FIGMA_API_TOKEN=your_token_here node dist/index.js --transport=sse

利用可能なツール

Figma ツール

• getFigmaProject：Figma プロジェクト構造を取得する
• getFigmaComponentNodes：Figma ファイル内のコンポーネントノードを取得する
• extractFigmaComponents：Figma ファイルからコンポーネントを抽出する
• getFigmaComponentSets：Figma ファイル内のコンポーネントセットを取得する

React ツール

• generateReactComponent：Figma ノードから React コンポーネントを生成する
• generateComponentLibrary：Figma コンポーネントから複数の React コンポーネントを生成する
• writeComponentsToFiles：生成されたコンポーネントをファイルに書き込む
• figmaToReactWorkflow：Figma デザインを React コンポーネントに変換する完全なワークフロー

サンプルワークフロー

1. Figma ファイルキー（Figma URL の figma.com/file/ の後の部分）を取得します。
2. figmaToReactWorkflow ツールを、ファイルキーと出力ディレクトリとともに使用します。
3. ツールがコンポーネントを抽出し、React コードを生成し、ファイルを保存します。

開発

開発時には、ウォッチモードを使用できます。

npm run dev

📄 ライセンス

ISC