Figma MCP サーバー
AIアシスタントがFigmaファイルとやり取りできるようにするModelContextProtocolサーバー。このサーバーは、ModelContextProtocolを介してFigmaデザインを直接表示、コメント、分析するためのツールを提供します。
特徴
URLを指定して、ClaudeとのチャットにFigmaファイルを追加します。
Figma ファイルのコメントを読んだり投稿したりする
Related MCP server: mcp-figma
クロードとのセットアップ
claude.ai/downloadからClaudeデスクトップアプリをダウンロードしてインストールします。
Figma APIキーを取得します（figma.com -> 左上の自分の名前をクリック -> 設定 -> セキュリティ）。
File contentとCommentsスコープを付与します。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にコピーします。
Claude Desktop を再起動します。
サーバーが実行中であることを確認するには、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地域開発
リポジトリをクローンする
依存関係をインストールします:
npm installプロジェクトをビルドします。
npm run build自動再構築による開発の場合:
npm run watch利用可能なツール
サーバーは次のツールを提供します。
add_figma_file: URLを指定してFigmaファイルをコンテキストに追加しますview_node: Figmaファイル内の特定のノードのサムネイルを取得するread_comments: Figma ファイルのすべてのコメントを取得するpost_comment: Figmaファイル内のノードにコメントを投稿するreply_to_comment: Figma ファイル内の既存のコメントに返信する
各ツールは、ModelContextProtocol インターフェースを通じて Figma ファイルと対話するための特定の機能を提供するように設計されています。