株式会社BinaryTech | 日本品質 × ベトナム開発、最高のバランスを。

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

Posted at 2025-04-21

はじめに

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

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

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

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トークンにコメントの読み書き権限がある。

サーバーのテスト

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

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

コメント取得のテスト：
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))

期待されるレスポンス：

{
  "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
}

コメント追加のテスト：

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))

期待されるレスポンス：

{
  "jsonrpc": "2.0",
  "result": {
    "status": "success",
    "comment_id": "125"
  },
  "id": 2
}

Claude Desktopとの接続

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

設定ファイルの編集：
Claude Desktopの設定ファイル（例：claude_desktop_config.json）に以下を追加：

{
  "mcp_servers": [
    {
      "name": "FigmaCommentServer",
      "url": "http://localhost:8106",
      "auth": "none"
    }
  ]
}

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に興味がある方は、ぜひお楽しみに！

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

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up