MCP FigmaからReactへのコンバーター

これは、FigmaのデザインをReactコンポーネントに変換するModel Context Protocol（MCP）サーバーです。Figmaのデザインを取得し、TypeScriptとTailwind CSSを使用してReactコンポーネントを生成するためのツールを提供します。

特徴

• Figma API を使用して Figma デザインを取得する

• Figmaのデザインからコンポーネントを抽出する

• TypeScriptでReactコンポーネントを生成する

• Figmaスタイルに基づいてTailwind CSSクラスを適用する

• アクセシビリティ機能でコンポーネントを強化する

• stdioとSSEトランスポートの両方をサポート

Related MCP server: Figma MCP Server

前提条件

• 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