Claude Code で Figma を読めるようにする手順

Figma のデザインを Claude Code に渡して、サイト制作に生かしたい方のための設定です。一度つなぐと、Figma の URL を貼るだけでレイアウト・文字・色を読み取れます。

所要時間 約 5 分 最終更新 2026-07-31

事前に確認すること

• Figma のアカウントを持っていること
• 読ませたい Figma ファイルを自分のアカウントで開けること（招待されていないファイルは読めません）
• Claude Code がインストール済みであること

手順

1. 1. ターミナルを開く

   • Mac … 「ターミナル」アプリ
   • Windows … 「PowerShell」または「コマンドプロンプト」

2. 2. 次のコマンドを 1 行そのまま貼り付けて、Enter

   Claude Code に Figma をつなぐための MCP（AI が外部のサービスとやり取りするための共通の口）を登録します。

   ターミナルに貼り付け

   claude mcp add --transport http --scope user figma https://mcp.figma.com/mcp

   Mac も Windows も同じコマンドです。これで登録は完了です。エラーが出なければ次へ進んでください。

3. 3. Claude Code を開いていたら、いったん閉じて、同じフォルダでもう一度起動します

   設定を反映させるために必要です。

4. 4. Figma へのログインを許可する

   ターミナルで claude と入力して Claude Code を起動し、次を入力して Enter:

   Claude Code に入力

   /mcp

   一覧から figma を選ぶと、ブラウザが開いて Figma のログイン画面が表示されます。内容を確認して「許可」を押してください。

   ブラウザが自動で開かない場合は、画面に表示された URL をコピーして、ブラウザのアドレス欄に貼り付けてください。

5. 5. できているか確認する

   ターミナルで:

   ターミナルに貼り付け

   claude mcp list

   次のように Connected と表示されれば完了です。

   figma: https://mcp.figma.com/mcp (HTTP) - ✔ Connected

設定できたら

Claude Code との会話に Figma の URL をそのまま貼って、「このデザインを読んで」と伝えれば読み取れます。ファイル全体の URL でも、特定のフレームを選択した状態でコピーした URL でも構いません。

うまくいかないとき

• Connected にならない … 手順 3（Claude Code を閉じてもう一度起動する）と手順 4（/mcp でのログイン許可）が済んでいるか確認してください。
• claude というコマンドが見つからない … Claude Code がインストールされていません。先にインストールしてください。
• デザインは読めるが中身が空に見える … そのファイルを自分の Figma アカウントで開けるか確認してください。招待されていないファイルは読めません。

どのフォルダでも使える設定です

ここで登録した内容は、お使いのパソコンの Claude Code の設定として保存されます。Figma 側や 42ws には渡りません。