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 MCP Server
GLips
-
security
A
license
-
quality
Enables Cursor to access Figma files through the Model Context Protocol, enhancing its ability to accurately interpret and utilize design data for code generation.
Last updated -
5
60,738
8,062
TypeScript
MIT License
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 -
111
1
TypeScript
Figma MCP Server
sanjeev23oct
-
security
F
license
-
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 -
997
1
TypeScript
Figma MCP Server
rlagudals95
-
security
A
license
-
quality
Gives AI-powered coding tools like Cursor, Windsurf, and Cline access to Figma design files, enabling more accurate code generation directly from Figma designs.
Last updated -
60,738
TypeScript
MIT License

View all related MCP servers

MCP Figma to React Converter