Figma MCP サーバー

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

特徴

• URLを指定して、ClaudeとのチャットにFigmaファイルを追加します。

• Figma ファイルのコメントを読んだり投稿したりする

Related MCP server: Figma MCP Server

クロードとのセットアップ

1. claude.ai/downloadからClaudeデスクトップアプリをダウンロードしてインストールします。

2. Figma APIキーを取得します（figma.com -> 左上の自分の名前をクリック -> 設定 -> セキュリティ）。 File contentとCommentsスコープを付与します。

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にコピーします。

3. Claude Desktop を再起動します。

4. サーバーが実行中であることを確認するには、Claude のインターフェースで、使用可能なツールの数を示すハンマー アイコンを探します。

使用例

claudeデスクトップと新しいチャットを開始し、次の内容を貼り付けます

What's in this figma file?

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

より現実的な使用方法のデモ

https://www.loom.com/share/0e759622e05e4ab1819325bcf6128945?sid=bcf6125b-b5de-4098-bf81-baff157e3dc3

開発セットアップ

Inspectorで実行する

開発とデバッグには、MCP Inspectorツールを使用できます。Inspectorは、MCPサーバーのインタラクションをテストおよび監視するための視覚的なインターフェースを提供します。

詳細なセットアップ手順と使用ガイドラインについては、 Inspector のドキュメントをご覧ください。

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 : Figma ファイル内の既存のコメントに返信する

各ツールは、ModelContextProtocol インターフェースを通じて Figma ファイルと対話するための特定の機能を提供するように設計されています。