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\"
}"
Related MCP server: Figma MCP Server
使用法
インストール後、カーソルで次のプロンプトを使用できます。
すべてのコンポーネントを抽出
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 で問題を開いてください。