Figma Design Processor

🚀 Figma MCP サーバー

このサーバーは、モデルコンテキストプロトコル（MCP）を用いて、Figma のデザインと React の実装をつなぐ役割を果たします。Figma ファイルのデータを処理し、React に適した形式で提供することで、ピクセルパーフェクトなデザインを React アプリケーションに変換します。

🚀 クイックスタート

このサーバーは、Figma のデザインを React アプリケーションに変換するためのモデルコンテキストプロトコル（MCP）サーバーです。Figma API を通じてデザインファイルにアクセスし、そのデータを React 互換の形式に変換します。

✨ 主な機能

• Figma API 統合：Figma の API に直接接続して、デザインファイルにアクセスします。
• React 対応出力：Figma のデータを処理し、React と互換性のある形式に変換します。
• スタイル処理：Figma のスタイルを CSS/styled-components に変換します。
• アセット処理：画像アセットと SVG コンポーネントを管理します。
• レイアウト処理：Figma の自動レイアウトを Flexbox に変換します。
• 型安全：TypeScript を使用して、信頼性の高い型チェックを実現します。

🛠️ 提供されるツール

get_file_content

• Figma ファイルの内容を取得して処理します。
• レイアウト、スタイル、コンポーネントを変換します。
• React 対応のコンポーネント構造を返します。

{
  fileKey: string;    // Figma ファイルキー
  nodeId?: string;    // オプションの特定コンポーネント ID
}

get_node_images

• Figma から画像アセットを取得します。
• 複数の形式（PNG、JPG、SVG）をサポートします。
• スケールオプションを設定できます。

{
  fileKey: string;    // Figma ファイルキー
  nodeIds: string[];  // コンポーネント ID のリスト
  format?: 'png' | 'jpg' | 'svg';
  scale?: number;     // 1-4
}

📦 インストール

1. リポジトリをクローンします：

git clone https://github.com/yourusername/figma-mcp.git
cd figma-mcp

2. 依存関係をインストールします：

npm install

3. Figma アクセストークンを設定します：

cp .env.example .env
# .env にあなたの Figma アクセストークンを追加します

🎯 Cursor IDE の設定

1. プロジェクトのルートディレクトリに .cursor/mcp.json ファイルを作成します：

mkdir -p .cursor
touch .cursor/mcp.json

2. Stdio ベースのサーバー構成の場合：

{
  "mcpServers": {
    "figma": {
      "command": "node",
      "args": ["d:/<folder>>/figma-mcp/build/index.js"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "あなたの figma トークン"
      },
      "disabled": false,
      "alwaysAllow": [],
      "protocol": "stdio"
    }
  }
}

💻 使用例

基本的な使用法

1. サーバーをビルドします：

npm run build

2. IDE に応じて MCP 設定を構成します：

• Visual Studio Code の場合： vscode-mcp をインストールして、Figma ファイルをサポートするように設定します。
• その他のエディタの場合：ドキュメントの高度な構成を参照してください。

3. プロジェクトで MCP ツールを使用します：

npx mcp serve figma

サンプルプロジェクト

examples ディレクトリのサンプルを参照して、Figma デザインを React コンポーネントに変換する方法を学びましょう。

処理フロー

1. Figma でコンポーネントをデザインし、JSON 形式でエクスポートします。
2. get_file_content ツールを使用して JSON ファイルを処理します。
3. React コンポーネントコードを生成し、必要に応じて調整します。
4. get_node_images を使用して必要な画像アセットを取得します。
5. 生成されたコンポーネントを React アプリケーションに統合します。

📄 ライセンス

このプロジェクトは MIT ライセンスの下で提供されています。詳細は LICENSE ファイルを参照してください。

コントリビューションガイド

コントリビューションを歓迎します！このプロジェクトへの参加方法については、CONTRIBUTING.md を参照してください。