Integrations

Fetches designs and components from Figma projects using the Figma API and extracts component information for conversion to React.
Generates React components from Figma designs, including support for component extraction and creation of functional React components.
Applies Tailwind CSS classes to generated React components based on the styles defined in the Figma designs.

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トランスポートの両方をサポート

前提条件

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

インストール

リポジトリをクローンする
依存関係をインストールします:

npm install

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

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コンポーネントに変換する完全なワークフロー

ワークフローの例

Figmaファイルキー（URLのfigma.com/file/の後の文字列）を取得します。
ファイルキーと出力ディレクトリを指定してfigmaToReactWorkflowツールを使用する
このツールはコンポーネントを抽出し、Reactコードを生成し、ファイルを保存します。

発達

開発の場合は、ウォッチモードを使用できます。

npm run dev

ライセンス

ISC

This server cannot be installed

-

security - not tested

F

license - not found

-

quality - not tested

Figma ファイルからコンポーネントを抽出し、すぐに使用できるコードに変換することで、Figma デザインを TypeScript と Tailwind CSS を含む React コンポーネントに変換します。

MCP Figma to React Converter