Figma MCP Server Az2

🚀 Figma モデルコンテキストプロトコル (MCP) サーバー

このサーバーは ModelContextProtocol を実装しており、AI アシスタントが Figma ファイルとやり取りできるようにします。このサーバーは、モデルコンテキストプロトコルを通じて Figma ファイル内のデザインを直接表示、コメント、分析するためのツールを提供します。

✨ 主な機能

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

📦 インストール

Claude を使用した設定

1. ターミナルで以下のコマンドを実行し、Claude デスクトップアプリケーションをダウンロードしてインストールします。

   curl -L "https://desktop.claude.ai/install.sh" | bash
   

2. Figma API キーを取得します（figma.com にアクセス -> 左上の自分の名前をクリック -> 設定 -> セキュリティ）。ファイル内容 と コメント の権限範囲を付与します。
3. Claude が Figma 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 デスクトップアプリを再起動します。
5. Claude のインターフェイスでハンマーアイコンを探し、サーバーが実行されていることを確認します。

💻 使用例

基本的な使用法

新しい Claude チャットウィンドウに以下の内容を貼り付けます。

この Figma ファイルには何が含まれていますか？
https://www.figma.com/design/MLkM98c1s4A9o9CMnHEyEC

高度な使用法

完全なデモを見るには、loom.com を訪問してください。

🔧 技術詳細

Inspector を使用したローカル実行

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

npx @modelcontextprotocol/inspector npx figma-mcp

ローカル開発

1. リポジトリをクローンします。

   git clone <repository-url>
   

2. 依存関係をインストールします。

   npm install
   

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

   npm run build
   

4. 開発モードで自動再構築を行います。

   npm run watch
   

📚 ドキュメント

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

各ツールは、モデルコンテキストプロトコルインターフェイスを通じて Figma ファイルとの特定のインタラクション機能を実現するように設計されています。