MCP Figma to React Converter

MCP Figma to React Converter

Figma のデザインを React コンポーネントに変換する Model Context Protocol（MCP）サーバーです。Figma のデザインを取得し、TypeScript と Tailwind CSS を使用して 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 API トークンを設定する必要があります。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 ファイルキーを取得します（URL 内の figma.com/file/ に続く文字列）
2. ファイルキーと出力ディレクトリを指定して、figmaToReactWorkflow ツールを使用します
3. ツールがコンポーネントを抽出し、React コードを生成して、ファイルを保存します

開発

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

npm run dev

ライセンス

ISC