local-only server

The server can only run on the client’s local machine because it depends on local resources.

Integrations

Enables AI assistants to interact with Figma files, providing tools for viewing file content, reading and posting comments, replying to comments, and viewing specific nodes in Figma designs.
Mentioned in a demo link, suggesting integration for sharing visual demonstrations of the MCP server's functionality with Figma files.

Figma MCP サーバー

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

特徴

URLを指定して、ClaudeとのチャットにFigmaファイルを追加します。
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 ファイルと対話するための特定の機能を提供するように設計されています。

You must be authenticated.

A

security – no known vulnerabilities

F

license - not found

A

quality - confirmed to work

Tools

AI アシスタントが ModelContextProtocol を介して Figma ファイルと対話できるようになり、チャットインターフェースで直接 Figma デザインを表示、コメント、分析できるようになります。

Related Resources

Reddit Discussion about this server

Figma MCP Server