LoginSignup
3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

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

Posted at

はじめに

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推奨。

インストールコマンド：

pip install mcp jsonrpcserver requests python-dotenv

Figmaのセットアップ

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

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

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

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. サーバー起動：

    python figma_server.py

    コンソールに「Figma MCPサーバーを起動中: http://localhost:8105」と表示。

  2. データ取得のテスト：
    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))

    期待されるレスポンス：

    {
  "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）に以下を追加：

    {
  "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分析、バージョン管理へと進化させます。

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

3
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?