MCP Figma

🚀 mcp-figma 日本語ドキュメント

このプロジェクトは、Figma API を統合するために設計されたモデルコンテキストプロトコル (MCP) サーバーです。Claude やその他の MCP 対応のAIアシスタントと連携して使用することができます。

🚀 クイックスタート

この MCP サーバーを使用することで、Claude などの AI アシスタントと連携して、Figma API の機能を利用することができます。以下のセクションでは、具体的な機能特性、インストール方法、使用例などを説明します。

✨ 主な機能

この MCP サーバーは、Figma API の以下の機能にアクセスできます。

• ファイル操作（ファイルの取得、ノードの取得、画像の取得）
• コメント管理
• チーム/プロジェクト管理
• コンポーネントとスタイルへのアクセス
• API キーの永続的な保存

📦 インストール

NPM を使用したインストール

# グローバルインストール
npm install -g mcp-figma

# または、プロジェクト内にローカルインストール
npm install mcp-figma

# 最新バージョンに更新
npm update -g mcp-figma

💻 使用例

Claude との連携

1. Claude の設定に mcp-figma を追加します。

"mcp-figma": {
  "command": "npx",
  "args": [
    "-y",
    "mcp-figma"
  ]
}

2. Claude を初めて使用する際に、Figma API キーを設定します。

mcp-figma を使用して、私の Figma API キーを設定してください：figd_xxxxxxxxxxxxxxxxxxxxxxx

設定したキーは ~/.mcp-figma/config.json に保存され、以降のセッションで自動的に読み込まれます。 3. API キーが設定されているか確認します。

mcp-figma を使用して、私の API キーの状態を確認してください

4. 提供されている Figma API の機能を使用します。

mcp-figma を使用して、キー abc123 のファイルを取得してください

利用可能なツール

このサーバーは以下のツールを提供しています。

• set_api_key：Figma API の個人用アクセストークンを設定し、設定ファイルに保存します。
• check_api_key：API キーが設定されているか確認します。
• get_file：キーを指定して Figma ファイルを取得します。
• get_file_nodes：Figma ファイルから特定のノードを取得します。
• get_image：Figma ファイル内のノードの画像を取得します。
• get_image_fills：Figma ファイル内で使用されている画像の URL を取得します。
• get_comments：ファイル上のコメントを取得します。
• post_comment：ファイル上にコメントを投稿します。
• delete_comment：ファイルからコメントを削除します。
• get_team_projects：チームのプロジェクトを取得します。
• get_project_files：プロジェクトのファイルを取得します。
• get_team_components：チームのコンポーネントを取得します。
• get_file_components：ファイルからコンポーネントを取得します。
• get_component：キーを指定してコンポーネントを取得します。
• get_team_component_sets：チームのコンポーネントセットを取得します。
• get_team_styles：チームのスタイルを取得します。
• get_file_styles：ファイルからスタイルを取得します。
• get_style：キーを指定してスタイルを取得します。

詳細な使用例については、USAGE.md を参照してください。

📄 ライセンス

MIT