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

license - permissive license

quality - not tested

How are these scores calculated?

hybrid server

The server is able to function both locally and remotely, depending on the configuration or use case.

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

Related MCP Servers

Figma to React Native MCP
kailashAppDev
-
security
F
license
-
quality
Converts Figma designs to React Native components, allowing users to extract components from Figma designs and generate corresponding React Native components with proper typing and styling.
Last updated -
673
5
TypeScript
FigmaMind MCP Server
joao-loker
-
security
F
license
-
quality
Extracts components from Figma designs and transforms them into standardized JSON format for easy consumption by AI models and tools for interface reconstruction.
Last updated -
TypeScript
Figma MCP Server
sanjeev23oct
A
security
F
license
A
quality
A bridge between Figma designs and React implementations that enables pixel-perfect conversion of Figma designs into React applications by processing Figma file data into React-friendly format.
Last updated -
5
1,092
2
TypeScript
MCP Design System Bridge
brunonepomuceno
-
security
F
license
-
quality
Enables bidirectional synchronization between IDEs and Figma for Design System management, allowing developers to generate React components and synchronize design tokens, icons, and components across platforms.
Last updated -
TypeScript

View all related MCP servers

MCP Figma to React Converter