-
securityF
license-
qualityConverts 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 -
42
5
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
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
- -securityFlicense-qualityExtracts components from Figma designs and transforms them into standardized JSON format for easy consumption by AI models and tools for interface reconstruction.Last updated -
- AsecurityFlicenseAqualityA 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 -57252
- -securityFlicense-qualityEnables 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 -