FigmaでAIを強化する | 第1章：デザインデータの第一歩

## はじめに

**Figma**は、UI/UXデザインやチームコラボレーションのためのクラウドベースのデザインプラットフォームです。直感的なインターフェースと強力なAPIにより、デザインデータを簡単に管理・共有できます。一方、**Model Context Protocol（MCP）**は、AI（例：Claude）を外部データやツールと標準化された方法で接続するプロトコルです。このシリーズでは、FigmaとMCPを統合し、デザインデータを活用するエージェントAIを構築する方法を学びます。たとえば、AIがデザインコメントを要約したり、UIの構造を分析したりできます。

第1章では、FigmaとMCPの基本を理解し、Figmaからデザインデータを取得するシンプルなMCPサーバーを構築します。Claude Desktopと接続して、デザインデータ管理の第一歩を踏み出しましょう。FigmaとAIの可能性にワクワクしている方は、ぜひ一緒に始めましょう！

## FigmaとMCPの概要

### Figmaとは？
Figmaは、以下のような特徴を持つデザインツールです：
- **クラウドベース**：リアルタイムでの共同作業が可能。
- **強力なAPI**：REST APIでファイル、コメント、レイヤーデータにアクセス。
- **柔軟性**：プロトタイピング、デザインシステム、チーム管理に対応。
- **コミュニティ**：プラグインやテンプレートが豊富。

### MCPの役割
MCPは、AIにFigmaのデータを提供する橋渡し役です。MCPサーバーを通じて、AIは以下を行えます：
- **データ取得**：Figmaファイルのメタデータやレイヤー情報を取得。
- **アクション実行**：コメントを追加、デザインを更新。
- **分析**：UIの構造やデザインの整合性を評価。

### なぜFigmaとMCPを組み合わせる？
この組み合わせは、以下のようなシナリオで強力です：
- デザイン管理：AIがコメントを要約し、フィードバックを効率化。
- UI分析：AIがデザインのアクセシビリティや一貫性をチェック。
- バージョン管理：AIがデザインの変更履歴を追跡し、提案を生成。

## 開発環境の準備

MCPサーバーとFigmaを統合するには、以下の環境を準備します：
- **Python 3.8以降**：サーバー開発用。
- **mcpライブラリ**：JSON-RPC通信を処理（仮定のライブラリ、公式ドキュメントを参照）。
- **requestsライブラリ**：Figma APIとの通信用。
- **Claude Desktop**：MCP対応のAIクライアント。
- **テキストエディタ**：VS Code推奨。

インストールコマンド：
```bash
pip install mcp jsonrpcserver requests python-dotenv
```

### Figmaのセットアップ
1. **ファイル準備**：
   - [Figma](https://www.figma.com)にアクセスし、新しいデザインファイルを作成（例：`MCP-Design`）。
   - テスト用に簡単なUIデザイン（例：ボタンやテキスト）を追加。
   - ファイルのURLからファイルIDを記録（例：`https://www.figma.com/file/FILE_ID/NAME`の`FILE_ID`）。
2. **APIトークンの取得**：
   - Figmaアカウント設定でPersonal Access Tokenを作成。
   - トークンを安全に保存。
3. **環境変数の設定**：
   `.env`ファイルに以下を追加：
   ```bash
   FIGMA_TOKEN=your_figma_token
   FIGMA_FILE_ID=your_file_id
   ```

## コード例：Figma用MCPサーバー

Figmaファイルからメタデータ（例：ファイル名、ノード情報）を取得するMCPサーバーを構築します。

```python
from mcp import MCPServer
import os
from dotenv import load_dotenv
import requests

class FigmaServer(MCPServer):
    def __init__(self, host, port, figma_token, file_id):
        super().__init__(host, port)
        self.figma_token = figma_token
        self.file_id = file_id
        self.headers = {"X-Figma-Token": figma_token}
        self.register_resource("get_file_data", self.get_file_data)

    def get_file_data(self, params):
        try:
            url = f"https://api.figma.com/v1/files/{self.file_id}"
            response = requests.get(url, headers=self.headers)
            response.raise_for_status()
            data = response.json()
            file_info = {
                "name": data.get("name", ""),
                "last_modified": data.get("lastModified", ""),
                "nodes": [
                    {
                        "id": node["id"],
                        "name": node["name"],
                        "type": node["type"]
                    }
                    for node in data.get("document", {}).get("children", [])
                ]
            }
            return {"status": "success", "file_info": file_info}
        except Exception as e:
            return {"status": "error", "message": str(e)}

if __name__ == "__main__":
    load_dotenv()
    server = FigmaServer(
        host="localhost",
        port=8105,
        figma_token=os.getenv("FIGMA_TOKEN"),
        file_id=os.getenv("FIGMA_FILE_ID")
    )
    print("Figma MCPサーバーを起動中: http://localhost:8105")
    server.start()
```

### コードの説明
- **requests**：Figma APIにGETリクエストを送信し、ファイルデータを取得。
- **get_file_data**：ファイルのメタデータ（名前、最終更新日、ノード情報）を抽出。
- **register_resource**：リソースを登録し、AIがアクセス可能に。
- **start()**：サーバーを起動。

### 前提条件
- Figmaファイルが存在し、ファイルIDが正しい。
- `.env`ファイルに正しい`FIGMA_TOKEN`と`FIGMA_FILE_ID`が設定済み。

## サーバーのテスト

サーバーが正しく動作するか確認します：

1. **サーバー起動**：
   ```bash
   python figma_server.py
   ```
   コンソールに「Figma MCPサーバーを起動中: http://localhost:8105」と表示。

2. **データ取得のテスト**：
   Pythonでリクエストを送信：
   ```python
   import requests
   import json

   url = "http://localhost:8105"
   payload = {
       "jsonrpc": "2.0",
       "method": "get_file_data",
       "params": {},
       "id": 1
   }
   response = requests.post(url, json=payload)
   print(json.dumps(response.json(), indent=2, ensure_ascii=False))
   ```
   期待されるレスポンス：
   ```json
   {
     "jsonrpc": "2.0",
     "result": {
       "status": "success",
       "file_info": {
         "name": "MCP-Design",
         "last_modified": "2025-04-17T12:00:00Z",
         "nodes": [
           {
             "id": "1:2",
             "name": "Button",
             "type": "RECTANGLE"
           },
           {
             "id": "1:3",
             "name": "Text",
             "type": "TEXT"
           }
         ]
       }
     },
     "id": 1
   }
   ```

## Claude Desktopとの接続

サーバーをClaude Desktopに接続します：

1. **設定ファイルの編集**：
   Claude Desktopの設定ファイル（例：`claude_desktop_config.json`）に以下を追加：
   ```json
   {
     "mcp_servers": [
       {
         "name": "FigmaServer",
         "url": "http://localhost:8105",
         "auth": "none"
       }
     ]
   }
   ```

2. **Claudeでテスト**：
   Claude Desktopを起動し、プロンプトを入力：
   ```
   デザインファイルの情報を教えてください。
   ```
   レスポンス例：
   ```
   Figmaファイルの情報：
   - 名前：MCP-Design
   - 最終更新：2025-04-17
   - ノード：
     - Button（RECTANGLE）
     - Text（TEXT）
   ```

## 次のステップ

このMCPサーバーは、FigmaとAIの連携の基礎です。次の第2章では、Figmaファイルにコメントを追加する機能を実装し、フィードバックを自動化するエージェントを構築します。たとえば、AIがデザインの問題点を指摘したり、チームのコメントを要約したりできます。デザイン自動化に興味がある方は、ぜひお楽しみに！

## まとめ

この第1章では、FigmaとMCPの基本を学び、シンプルなMCPサーバーを構築してデザインデータを取得しました。Figmaの強力なAPIとMCPの柔軟性を組み合わせることで、AIをデザイン管理の強力なアシスタントに変えられます。次章以降では、コメント自動化、UI分析、バージョン管理へと進化させます。

---

役に立ったと思ったら、「いいね」や「ストック」をしていただけると嬉しいです！次の章でまたお会いしましょう！