-
security-
license-
qualityExtracts components from Figma designs and transforms them into standardized JSON format for easy consumption by AI models and tools for interface reconstruction.
FigmaからReact Native MCPへ
CursorのMCPを使って、FigmaのデザインをReact Nativeコンポーネントに変換します。このツールは、Figmaのデザインからコンポーネントを抽出し、適切な型とスタイルで対応するReact Nativeコンポーネントを生成します。
インストール
開発のために
eas.jsonに追加:
{
"mcpServers": {
"figma-to-code": {
"command": "node",
"args": ["PATH_TO_REPO/build/index.js"],
"env": {
"FIGMA_TOKEN": "your_figma_token",
"FIGMA_FILE": "your_figma_file_id",
"PROJECT_DIR": "your_project_directory"
}
}
}
}
エンドユーザー向け
Cursor IDE に MCP サーバーをインストールします。
npx -y @smithery/cli@latest install @kailashg101/mcp-figma-to-code --client claude --config "{
\"figmaToken\": \"YOUR_FIGMA_TOKEN\",
\"figmaFile\": \"YOUR_FIGMA_FILE_ID\",
\"projectDir\": \"YOUR_PROJECT_DIRECTORY\"
}"
使用法
インストール後、カーソルで次のプロンプトを使用できます。
すべてのコンポーネントを抽出
using the extract_components mcp tool get all components from figma and generate their corresponding react native components in components folder
特定のコンポーネントの抽出
using the extract_components mcp tool get the [ComponentName] component from figma and generate its corresponding react native component in components folder
構成
config オブジェクトは次のパラメータを受け入れます。
{
"figmaToken": string, // Your Figma access token
"figmaFile": string, // Your Figma file ID (from the URL)
"projectDir": string // Where to generate the components
}
特徴
現在：
✅ Figmaからコンポーネントを抽出する
✅ React Nativeコンポーネントを生成する
✅ コンポーネント階層を維持する
✅ コンポーネントのプロパティと型を扱う
✅ ネストされたコンポーネントをサポート
近日公開：
🚧 GraphQL スキーマ生成
発達
貢献または変更するには:
リポジトリをクローンする
依存関係をインストールします:
npm install
建てる：
npm run build
ローカルで実行:
npm start
環境変数
ローカルで実行する場合は、 .envに以下が必要です。
FIGMA_TOKEN=your_figma_token
FIGMA_FILE=your_figma_file_id
PROJECT_DIR=your_project_directory
エラー処理
よくあるエラーと解決策:
「クライアントの作成に失敗しました」 : すべての環境変数が正しく設定されているかどうかを確認してください
「コンポーネントページが見つかりません」 : Figmaファイルに「コンポーネント」という名前のページがあることを確認してください
「Figmaファイルの取得に失敗しました」 : FigmaトークンとファイルIDを確認してください
ライセンス
マサチューセッツ工科大学
問題や機能のリクエストについては、GitHub で問題を開いてください。
This server cannot be installed
Related Resources
Related MCP Servers
- 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 -55102
- -securityAlicense-qualityConverts Figma designs into React components with TypeScript and Tailwind CSS by extracting components from Figma files and transforming them into ready-to-use code.Last updated -60MIT License
- -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 -1