FigmaとClaude CodeをMCPで接続する
Claude CodeとFigmaをMCPサーバーを経由して接続する方法について解説します。
公式ドキュメントに記載してある内容となります。
まず、前提として、MCPサーバは、プロフェッショナルプラン以上のDevシートを契約しないといけないのでご了承ください。
FigmaでMCPサーバを有効化する
Figmaのプロフェッショナルプラン以上のDevシートを購入した前提で進めます。
Figmaデスクトップアプリじゃないと設定ができないので、アプリをダウンロードします。
以下からデスクトップアプリをダウンロードしておきます。
次にDevシートの対象となったチームのシートを開きます。
シートの右上の設定から[Preferences] > [Enable Dev Mode server]をチェックして有効化します。
これでMPCサーバー側の設定ができました。
Claude CodeでMCPサーバを登録する
MCPサーバ側が接続できるようになったので、MCPクライアント側であるClaude Code側にMCPサーバを登録します。
以下のコマンドを叩いて、Claude Codeに登録します。
# 基本構文
claude mcp add --transport sse <name> <url>
claude mcp add --transport sse figma-mcp http://127.0.0.1:3845/sse
[https://docs.anthropic.com/ja/docs/claude-code/mcp/:embed:cite]
登録したら、以下を実行すると登録されているMCPサーバ一覧が表示されます。
以下のように表示されたら、登録されています。
❯ claude mcp list
figma-mcp: http://127.0.0.1:3845/sse (SSE)
mcpコマンドで以下のように登録されていても登録されていることを確認できます。
# Claude Code起動
claude
# mcp一覧表示
/mcp
│ Manage MCP servers │
│ │
│ ❯ 1. figma-mcp ✔ connected · Enter to view details # 登録したFigmaのMCPサーバ
実際にClaude Code側で接続できるかも確認します。
Figmaのシート上で、読み取らせたい対象を右クリックして、[Copy/Paste as] > [Copy link to section]でリンクをコピーします。
Claude Code上で、Figmaのシートを読み取るように質問します。
なんでもいいですが、例えばのようにどんなデザインか聞きます。
質問したら以下のように返ってきたので、ちゃんと接続できているようです。
以下のデザインを読み取って。
https://www.figma.com/design/xxxxxxx
⏺ デザインを読み取りました。日報管理ツールのダッシュボード画面で、以下の構成になっています：
ヘッダー部分:
- 左側：日報管理ツールのタイトル、2024年の日付表示、月別リンク（5月、4月、3月）
- 右側：新規作成ボタン（黒背景）
メインコンテンツ:
- 3つのカードで統計情報を表示
- 総日報数: 23（過去5日間の推移表示）
- 今月の日報: 5（5月の日報のグラフ）
- 未完了: 3（現在のタスク書きかけ）
年別サマリー:
- 2023年、2024年、2025年の3つのカード
- 各年の日報数と詳細を見るリンク
使い方セクション:
- 3つの使い方説明
フッター:
- プロフィールと設定へのリンク
FigmaとClaude CodeをMCPサーバを使って接続するところまでの解説でした。
実際にデザインを読み込んでコードを書かせることで、Figmaのデザイン通りに実装できるかと思います。
Discussion