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.

security – no known vulnerabilities

license - not found

quality - confirmed to work

remote-capable server

The server can be hosted and run remotely because it primarily relies on remote services or has no dependency on the local environment.

Tools

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

Related Resources

Reddit Discussion about this server

Related MCP Servers

figma-mcp
JayZeeDesign
A
security
A
license
A
quality
Allow your AI coding agents to access Figma files & prototypes directly. You can DM me for any issues / improvements: https://x.com/jasonzhou1993 1. Access all figma pages 2. Access all figma components 3. Access figma prototype flows
Last updated -
3
49
Python
MIT License
mcp-figma
smithery-ai
A
security
F
license
A
quality
A Model Context Protocol server that provides access to Figma API functionality, allowing AI assistants like Claude to interact with Figma files, comments, components, and team resources.
Last updated -
18
34
1
Figma MCP Server
1yhy
-
security
A
license
-
quality
A Model Context Protocol server that integrates Figma design files with AI coding tools like Cursor, Windsurf, and Cline, allowing AI tools to access and understand Figma design data for generating more accurate code.
Last updated -
124
6
TypeScript
MIT License
Figma MCP Server
xxflux
A
security
F
license
A
quality
A TypeScript server that implements the Model Context Protocol, enabling AI-powered design creation in Figma using natural language prompts through Cursor Agent.
Last updated -
5
997
2
JavaScript

View all related MCP servers

Figma MCP Server