Figma MCP Toolkit

🚀 Figma から React Native コンポーネント変換器 (MCP)

Cursor の MCP ツールを使用すると、Figma のデザインを React Native コンポーネントに変換できます。このツールは、Figma デザインからコンポーネントを抽出し、正しい型とスタイルを含む対応する React Native コンポーネントを生成します。

🚀 クイックスタート

このツールを使うことで、Figma のデザインを簡単に React Native コンポーネントに変換できます。以下に、インストール方法と使用方法を説明します。

✨ 主な機能

• ✅ Figma コンポーネントの抽出
• ✅ React Native コンポーネントの生成
• ✅ コンポーネント階層構造の維持
• ✅ コンポーネント属性と型の処理
• ✅ ネストされたコンポーネントのサポート
• 🚧 GraphQL スキーマ生成（近日公開予定）

📦 インストール

開発環境

以下の内容を eas.json ファイルに追加してください。

{
  "mcpServers": {
    "figma-to-code": {
      "command": "node",
      "args": ["PATH_TO_REPO/build/index.js"],
      "env": {
        "FIGMA_TOKEN": "your_figma_token",          // あなたの Figma アクセストークン
        "FIGMA_FILE": "your_figma_file_id",        // あなたの Figma ファイル ID（URL から取得）
        "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\"
}"

💻 使用例

基本的な使用法

インストールが完了したら、Cursor で以下のプロンプトを使用できます。

すべてのコンポーネントを抽出

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

📚 ドキュメント

設定

設定オブジェクトは以下のパラメータを受け付けます。

{
  "figmaToken": string,    // あなたの Figma アクセストークン
  "figmaFile": string,     // あなたの Figma ファイル ID（URL から取得）
  "projectDir": string     // コンポーネントを生成する場所
}

開発

貢献または修正を行うには、以下の手順を実行します。

1. リポジトリをクローンします。
2. 依存関係をインストールします。

npm install

3. ビルドします。

npm run build

4. ローカルで実行します。

npm start

環境変数

ローカルで実行する場合、.env ファイルに以下の内容を設定する必要があります。

FIGMA_TOKEN=your_figma_token
FIGMA_FILE=your_figma_file_id
PROJECT_DIR=your_project_directory

エラー処理

一般的なエラーとその解決策は以下の通りです。

• “Failed to create client”（クライアントの作成に失敗しました）：すべての環境変数が正しく設定されていることを確認してください。
• “Components page not found”（コンポーネントページが見つかりません）：Figma ファイルに “Components” という名前のページがあることを確認してください。
• “Failed to fetch Figma file”（Figma ファイルの取得に失敗しました）：Figma トークンとファイル ID を検証してください。

📄 ライセンス

MIT

問題を報告または機能要求を行う場合は、GitHub で問題を開いてください。