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

security - not tested

license - not found

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 デザインを React Native コンポーネントに変換し、ユーザーが Figma デザインからコンポーネントを抽出し、適切な入力とスタイルで対応する React Native コンポーネントを生成できるようにします。

Related MCP Servers

Talk to Figma MCP
yhc984
-
security
F
license
-
quality
Enables Cursor AI to interact with Figma designs, allowing users to read design information and programmatically modify elements through natural language commands.
Last updated -
TypeScript
FigmaMind MCP Server
joao-loker
-
security
F
license
-
quality
Extracts components from Figma designs and transforms them into standardized JSON format for easy consumption by AI models and tools for interface reconstruction.
Last updated -
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
MCP Figma to React Converter
StudentOfJS
-
security
A
license
-
quality
Converts 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 -
14
TypeScript
MIT License

View all related MCP servers

Figma to React Native MCP