FigmaでAIを強化する | 第2章：コメントを自動化：AIによるフィードバック

 ## はじめに

第1章では、**Figma**と**Model Context Protocol（MCP）**の基本を学び、Figmaからデザインデータを取得するMCPサーバーを構築しました。これにより、AIがファイルのメタデータやノード情報を取得できるようになりました。今回は、この基盤を進化させ、Figmaファイルのコメントを読み取り、自動でコメントを追加する機能を実装します。これにより、**フィードバックを自動化**するエージェントを構築します。

この第2章では、MCPサーバーを通じてAIがFigmaのコメントを取得し、デザインに関するフィードバックを生成・投稿できるようにします。たとえば、ユーザーが「ボタンのコメントをチェックして」と依頼すると、AIが関連コメントを要約し、必要に応じて新しいコメントを追加します。コード例とステップごとのガイドで、フィードバック自動化の可能性を体感しましょう。さあ、始めましょう！

## フィードバック自動化エージェントとは？

フィードバック自動化エージェントは、Figmaファイルのコメントを処理し、デザインプロセスを効率化するAIです。MCPサーバーを介して、以下のような機能を実現できます：
- **コメント取得**：ファイルや特定ノードのコメントを読み取り、要約。
- **コメント追加**：AIがデザインに関する提案や指摘をFigmaに投稿。
- **フィードバック生成**：コメントを分析し、改善案を提案（例：色のコントラスト不足を指摘）。

### ユースケース
- デザイン管理：チームのコメントを要約し、優先度の高いフィードバックを抽出。
- 品質チェック：AIがアクセシビリティやUI一貫性の問題をコメントとして投稿。
- コラボレーション：リモートチームのフィードバックを自動整理。

## 開発環境の準備

第1章の環境を基に、以下の準備を行います：
- **Python 3.8以降**、**mcpライブラリ**、**requestsライブラリ**、**Claude Desktop**：第1章と同じ。
- **Figmaファイル**：コメント機能をテストするためのファイル。
- **python-dotenv**：環境変数の管理（既にインストール済み）。

### Figmaのセットアップ
1. **テストコメントの追加**：
   - 第1章で作成したFigmaファイル（例：`MCP-Design`）を開く。
   - デザインのノード（例：ボタンやテキスト）にコメントを追加：
     - ボタン：`コントラストを改善してください`
     - テキスト：`フォントサイズを大きく`
   - ファイルIDは第1章と同じ（`.env`の`FIGMA_FILE_ID`）。
2. **APIトークンの確認**：
   - 第1章のPersonal Access Tokenを再利用（コメントの読み書きに必要）。
   - トークンに`comments:write`スコープが含まれていることを確認。
3. **環境変数**：
   第1章の`.env`ファイル（`FIGMA_TOKEN`、`FIGMA_FILE_ID`）を再利用。

## コード例：コメント自動化用MCPサーバー

以下のMCPサーバーは、Figmaファイルのコメントを取得し、新しいコメントを追加する機能を提供します。

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

class FigmaCommentServer(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_comments", self.get_comments)
        self.register_tool("add_comment", self.add_comment)

    def get_comments(self, params):
        try:
            url = f"https://api.figma.com/v1/files/{self.file_id}/comments"
            response = requests.get(url, headers=self.headers)
            response.raise_for_status()
            data = response.json()
            comments = [
                {
                    "id": comment["id"],
                    "message": comment["message"],
                    "created_at": comment["created_at"],
                    "node_id": comment.get("client_meta", {}).get("node_id", "")
                }
                for comment in data.get("comments", [])
            ]
            return {"status": "success", "comments": comments}
        except Exception as e:
            return {"status": "error", "message": str(e)}

    def add_comment(self, params):
        try:
            message = params.get("message", "")
            node_id = params.get("node_id", "")
            if not message:
                return {"status": "error", "message": "コメントが必要です"}
            
            url = f"https://api.figma.com/v1/files/{self.file_id}/comments"
            payload = {
                "message": message,
                "client_meta": {"node_id": node_id} if node_id else None
            }
            response = requests.post(url, headers=self.headers, json=payload)
            response.raise_for_status()
            comment = response.json()
            return {"status": "success", "comment_id": comment["id"]}
        except Exception as e:
            return {"status": "error", "message": str(e)}

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

### コードの説明
- **get_comments**：Figmaファイルのコメントを取得し、ID、メッセージ、作成日、ノードIDを返す。
- **add_comment**：指定したメッセージをファイルまたはノードに追加。`node_id`が指定されると、特定のノードにコメントをピン留め。
- **register_resource/tool**：コメント取得をリソース、コメント追加をツールとして登録。
- **Figma API**：`GET /files/{file_id}/comments`でコメントを取得、`POST /files/{file_id}/comments`でコメントを追加。

### 前提条件
- Figmaファイルにコメントが存在。
- `.env`ファイルに正しい`FIGMA_TOKEN`と`FIGMA_FILE_ID`が設定済み。
- APIトークンにコメントの読み書き権限がある。

## サーバーのテスト

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

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

2. **コメント取得のテスト**：
   Pythonでリクエストを送信：
   ```python
   import requests
   import json

   url = "http://localhost:8106"
   payload = {
       "jsonrpc": "2.0",
       "method": "get_comments",
       "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",
       "comments": [
         {
           "id": "123",
           "message": "コントラストを改善してください",
           "created_at": "2025-04-18T10:00:00Z",
           "node_id": "1:2"
         },
         {
           "id": "124",
           "message": "フォントサイズを大きく",
           "created_at": "2025-04-18T10:05:00Z",
           "node_id": "1:3"
         }
       ]
     },
     "id": 1
   }
   ```

3. **コメント追加のテスト**：
   ```python
   payload = {
       "jsonrpc": "2.0",
       "method": "add_comment",
       "params": {
           "message": "ボタンの角を丸くしてください",
           "node_id": "1:2"
       },
       "id": 2
   }
   response = requests.post(url, json=payload)
   print(json.dumps(response.json(), indent=2, ensure_ascii=False))
   ```
   期待されるレスポンス：
   ```json
   {
     "jsonrpc": "2.0",
     "result": {
       "status": "success",
       "comment_id": "125"
     },
     "id": 2
   }
   ```

## Claude Desktopとの接続

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

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

2. **Claudeでテスト**：
   Claude Desktopを起動し、プロンプトを入力：
   ```
   デザインのコメントを教えてください。
   ```
   レスポンス例：
   ```
   Figmaファイルのコメント：
   - ボタン：コントラストを改善してください（2025-04-18）
   - テキスト：フォントサイズを大きく（2025-04-18）
   ```

   別のプロンプト：
   ```
   ボタンに「角を丸くしてください」というコメントを追加してください。
   ```
   レスポンス例：
   ```
   ボタンにコメント「角を丸くしてください」を追加しました。
   ```

## 実装のコツと注意点

- **エラーハンドリング**：無効なノードIDや空のコメントを適切に処理。
- **レートリミティング**：Figma APIの制限（通常30リクエスト/分）に注意。
- **セキュリティ**：本番環境では、`auth: none`を避け、トークン認証を導入。
- **テスト**：テスト用ファイルを作成し、本番データに影響を与えない。
- **拡張性**：大量のコメントを処理する場合、キャッシュ（例：Redis）を検討。

## 試してみよう：挑戦課題
以下の機能を追加して、エージェントを強化してみてください：
- 特定ノードIDのコメントだけを取得するパラメータをサポート。
- コメントを削除するツール（`delete_comment`）を追加。
- AIがコメントの内容を分析し、アクセシビリティ提案を生成。

## まとめと次のステップ

この第2章では、Figmaのコメントを読み書きするMCPサーバーを構築し、フィードバック自動化エージェントを実現しました。AIがデザインコメントを処理・生成できるようになり、デザインプロセスの効率が向上しました。

次の第3章では、Figmaのデザインデータを活用して**UI分析エージェント**を構築します。たとえば、AIが色のコントラストやレイアウトの整合性を分析し、改善提案をコメントとして投稿します。UI分析AIに興味がある方は、ぜひお楽しみに！

---

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