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 で問題を開いてください。

Figma to React Native MCP

Integrations