Figma MCP

🚀 Figma MCP サーバー

このサーバーは、AI アシスタントが Figma ファイルと対話できるようにする ModelContextProtocol サーバーです。ModelContextProtocol を通じて、チャット内で直接 Figma デザインを閲覧、注釈付け、分析するためのツールを提供します。

✨ 主な機能

• URL を提供することで、Claude チャットに Figma ファイルを追加できます。
• Figma ファイル上のコメントを読み取り、投稿することができます。

📦 インストール

Claude での設定

1. claude.ai/download から Claude デスクトップアプリをダウンロードしてインストールします。
2. Figma API キーを取得します（figma.com にアクセスした後、左上の自分の名前をクリック -> 設定 -> セキュリティ）。ファイル内容 と コメント の権限範囲を付与します。
3. Claude が Figma MCP サーバーを使用するように設定します。初めて MCP サーバーを設定する場合は、以下のコマンドをターミナルで実行します。

echo '{
  "mcpServers": {
    "figma-mcp": {
      "command": "npx",
      "args": ["figma-mcp"],
      "env": {
        "FIGMA_API_KEY": "<YOUR_API_KEY>"
      }
    }
  }
}' > ~/Library/Application\ Support/Claude/claude_desktop_config.json

初めてでない場合は、figma-mcp モジュールを claude_desktop_config.json ファイルにコピーします。 4. Claude Desktop アプリを再起動します。 5. Claude の画面でハンマーアイコン（利用可能なツールの数が表示されます）を探して、サーバーが動作していることを確認します。

💻 使用例

基本的な使用法

新しい Claude チャットを開始し、以下の内容を貼り付けます。

この Figma ファイルには何が含まれていますか？

https://www.figma.com/design/MLkM98c1s4A9o9CMnHEyEC

📚 ドキュメント

実用的なデモ

より実際的な使用例を見るには、こちらのビデオ をご覧ください。

開発環境のセットアップ

Inspector を使用したデバッグ

開発およびデバッグの目的で、MCP インスペクターツールを使用できます。インスペクターは、MCP サーバーの対話をテストおよび監視するための視覚的なインターフェイスを提供します。 Inspector のドキュメント を参照して、詳細なインストールと使用方法を確認してください。 以下のコマンドをターミナルで実行して、ローカルでテストします。

npx @modelcontextprotocol/inspector npx figma-mcp

ローカル開発

1. リポジトリをクローンします。
2. 依存関係をインストールします。

npm install

3. プロジェクトをビルドします。

npm run build

4. 開発中に自動的に再構築します。

npm run watch

利用可能なツール

サーバーが提供するツールは以下の通りです。

• add_figma_file：URL を提供することで、コンテキストに Figma ファイルを追加します。
• view_node：Figma ファイル内の特定のノードのサムネイルを取得します。
• read_comments：Figma ファイル上のすべてのコメントを取得します。
• post_comment：Figma ファイル上のノードにコメントを投稿します。
• reply_to_comment：既存のコメントに返信します。