Claude Code to Figmaの使い方メモ（2026年4月）
今回は、Mac（macOS 26.3.1）でClaude CodeとFigmaを連携させるFigma MCPサーバーの使い方をまとめます。
あくまで筆者の環境での設定に基づく内容なので、お使いのプランや環境によって異なる場合があります。また、2026年4月時点の情報である点にご留意ください。
Claude Codeで作ったUIをFigmaに持っていきたい、あるいはFigmaのデザインを読み込んでコードに反映させたいという場面は意外とよくあります。Figmaが公式に提供しているMCPサーバーを使うと、Claude CodeからFigmaへの読み書きができるようになります。
この記事のターゲット
Claude CodeとFigmaを連携させたい方
コードで作ったUIをFigmaに取り込みたい方
FigmaのデザインをClaude Codeに読み込んでコード生成したい方
Figma MCPサーバーとは
MCPはModel Context Protocolの略で、AIツールが外部サービスとやり取りするための仕組みです。Figmaが公式にMCPサーバーを提供していて、これをClaude Codeに接続すると、Figmaのデザイン情報の読み取りや、Figmaへの書き出しができるようになります。
MCPサーバーにはリモート版とデスクトップ版の2種類があります。
リモート版
ブラウザ認証だけで使え、すべてのFigmaプランで利用できます。Code to Canvas、Write to Canvas、デザインシステム検索などの機能はリモート版限定です。
デスクトップ版
はFigmaデスクトップアプリ経由でローカルに接続する方式です。有料プラン（DevまたはFullシート）が必要で、WSL環境には非対応です。レイヤー選択ベースのコンテキスト共有が使えますが、書き込み系の機能は使えません。
特別な理由がなければリモート版を使うと良いでしょう。
セットアップ
接続方法は2つあります。
プラグインで一括セットアップ（推奨）
Figma公式のClaude Codeプラグインを使う方法が推奨されています。
claude plugin install figma@claude-plugins-officialMCPサーバーの接続設定に加えて、/figma-useという基盤スキル（SKILL.md）と、よく使うワークフロー向けのAgent Skillsもまとめてインストールされます。/figma-useスキルにはuse_figma実行時の注意事項やパターンが含まれていて、これがないと一般的な失敗が起きやすくなります。
手動セットアップ
手動で接続する場合は以下のコマンドを実行します。--scope user をつけると、すべてのプロジェクトで使えるようになります。つけない場合はそのプロジェクトだけで有効です。
claude mcp add --scope user --transport http figma <https://mcp.figma.com/mcp>手動セットアップの場合、MCPの接続設定だけが入ります。/figma-useスキルは含まれないため、use_figmaでFigmaに書き込む際にエラーが起きやすくなります。Figmaへの書き込みを使う予定があるなら、プラグインでのセットアップを推奨します。
認証
どちらの方法でも、セットアップ後にClaude Codeを再起動する必要があります。MCPの接続はClaude Codeの起動時にしか行われないため、起動中に追加しても反映されません。
再起動したら /mcp と入力してfigmaを選択し、「Authenticate」を選びます。ブラウザが開くので「Allow Access」をクリックすれば認証完了です。/mcp で緑のチェックマークが表示されれば接続できています。
認証はOAuthのみで、パーソナルアクセストークン（PAT）には対応していません。認証完了後も「Needs authentication」と表示される場合はClaude Codeを再起動してください。
使える機能
接続後に使える主な機能は3つの方向に分かれます。基本的には、Claudeが文脈に従ってコマンドを使い分けるため、ユーザーが意識するタイミングは意図的に指示する場合に限られると思います。
Figmaのファイルデータを読みこむ
get_design_context
Figma上のフレームやレイヤーのレイアウト、スタイル、コンポーネント構造を取得します
FigmaのフレームURLをコピーして渡すと、コード（デフォルトでReact + Tailwind形式）、スクリーンショット、メタデータを返します
Code Connectが設定されていれば、対応するコードコンポーネントのスニペットも含まれます
返ってくるコードはリファレンスであって最終コードではないため、自分のプロジェクトのスタックや規約に合わせて調整してください
get_screenshot
Figmaのフレームのスクリーンショッ トを取得します
get_variable_defs
Figmaで定義されているデザイントークン（色、スペーシング、タイポグラフィなど）の変数を取得します
get_metadata
ノードの構造をXML形式で返します
ノードID、レイヤータイプ、名前、位置、サイズが確認できます
大きなデザインの全体像を把握するのに使います
コードからFigmaへ送る（Code to Canvas）
generate_figma_design
ブラウザに表示されているUIをキャプチャしてFigmaに送ります（リモート版のみ）
新しいFigmaファイルの作成、既存ファイルへの追加、クリップボードへのコピーが選べます
Figmaに直接書き込む（Write to Canvas）
use_figma
FigmaのPlugin APIを使ってJavaScriptコードをFigma上で実行します（リモート版のみ）
フレーム、コンポーネント、バリアント、変数、スタイル、テキストなど、あらゆるFigmaオブジェクトの作成・編集・削除ができます
後述しますが、注意点が多いです
Code to Canvas: コードからFigmaへ送る
Claude Codeで作ったUIをFigmaに持っていく手順です。
Claude CodeにUIを作らせ、ローカルサーバーを起動する
「Send this to Figma」や「このデザインをFigmaに送って」と指示する
Claude Codeが
generate_figma_designを呼び出し、ブラウザ画面の上部にキャプチャツールバーが表示される画面全体をキャプチャするか、特定のDOM要素を選んでキャプチャするか選ぶ
キャプチャが実行されると 、Figmaに編集可能なフレームとして転送される
スクリーンショットを生成しているように見えますが、実際のコードと出力結果をチェックするためのプロセスとしてキャプチャが必要なようで、実際に出力されるのは編集可能なフレームです。
HTMLのDOM構造とCSSを解析して、Figmaのネイティブ機能にマッピングし、FlexboxやCSSグリッドはAuto Layoutに、テキストは編集可能なテキストレイヤーに変換されるようです。
複数の画面状態を同じセッションで連続キャプチャすることもできます。ただしキャプチャIDは1ページにつき1つで使い切りです。複数ページをキャプチャする場合はページごとに別のキャプチャIDが生成されます。
Code to Canvasの制約
DOM/CSSを解析する仕組みのため、以下は変換に対応していません。
canvasタグの描画やWebGL
複雑なCSSアニメーション（ローディングのアニメーションなど）
一部の特殊なレンダリング
静止画として処理されるか、変換時に無視されます。
もうひとつ知っておくべき点があります。Code to Canvasで送られたフレームは「フラットなFigmaレイヤー」です。テキストの編集やAuto Layoutの調整はできますが、Figmaのデザインライブラリ（コンポーネントや変数）との接続はありません。
デザインシステムのコンポーネントとして扱いたい場合は、後述のWrite to Canvas（use_figma）を使います。
localhostと外部サイト
ローカルサーバー（localhost）ならClaude Codeが直接ブラウザを開いてキャプチャできます。外部サイトの場合はPlaywrightなどのブラウザ制御ツールが別途必要です。
Write to Canvas: Figmaに直接書き込む
use_figmaはFigmaのPlugin APIにアクセスしてJavaScriptを実行する機能です。
Code to Canvasがブラウザ画面をキャプチャする「スクリーンショットの高機能版」だとすると、use_figmaはFigma上で直接オブジェクトを作る「Figmaプラグインの自動実行」です。
既存のコンポーネントや変数を使った実デザインシステムアセットの作成、コンポーネントのバリアント追加、デザイントークンの設定などができます。
use_figmaの注意点
use_figmaはまだ出たばかりなのもあり、いくつか注意点があります。（以下はほんの一部）
色の値域
RGBは0〜1の範囲です。0〜255ではありません
{r: 1, g: 0, b: 0}が赤です透明度はペイントオブジェクトの
opacityプロパティで設定しますcolorオブジェクトに
aフィールドはありません
配列プロパティ
fills、strokesなどの配列プロパティは読み取り専用です
直接変更できないため、クローンしてから変更し、新しい配列として再代入します
画像・アセット
画像のサポートは現時点で未実装のようです
画像はグレーのプレースホルダーとして表示されます
出力サイズ
1回のuse_figma呼び出しで返せる出力は20KBまでのようです
エラー回復
失敗したスクリプトの変更は保持されません。部分的に適用された状態にはなりません
特に、大きな操作は1回のuse_figma呼び出しで済ま せようとせず、複数回に分割してください。ファイル検査 → トークン作成 → コンポーネント構築 → レイアウト構成 → 検証、のように段階的に進めると、途中でエラーが起きても手戻りが小さく済みます。
Figmaからコードを生成
逆方向の流れも使えます。FigmaのフレームURLをコピーして、Claude Codeに以下のように指示します。
このFigmaデザインをReactコンポーネントとして実装して: [FigmaのURL]
Claude Codeがget_design_contextを使ってレイアウト・スタイル・コンポーネント構造を読み取り、コードを生成します。使いたいフレームワークがある場合はプロンプトで指定してください。
get_design_contextが返すコードはデフォルトでReact + Tailwind形式ですが、あくまでリファレンスです。自分のプロジェクトの技術スタックに合わせて調整してください。
Code Connect: デザインとコードの紐付け
Figmaには「Code Connect」という機能があり、Figma上のコンポーネントとコードリポジトリ内の実際のコンポーネントを紐付けられます。
MCPサーバーのget_code_connect_mapツールを使うと、この紐付け情報をClaude Codeが参照できます。AIがFigma上のボタンを見たとき、それが単なる矩形ではなくコード上の <PrimaryButton size="large" /> であると認識した上でコード生成を行えるので、既存のコンポーネントとの整合性が高まります。
レート制限
読み取り操作（get_design_context、get_screenshotなど）にはプランに応じたレート制限があります。
Enterprise（Full/Devシート）: 1日600コール、1分あたり20コール
Organization （Full/Devシート）: 1日200コール、1分あたり20コール
Professional（Full/Devシート）: 1日200コール、1分あたり15コール
Starter/View/Collabシート: 月6コール
書き込み操作（use_figma）はベータ期間中はレート制限から免除されています。generate_figma_design、search_design_system、whoamiも免除対象のようです。
Professionalプランの有料Devシートを持っていても、作業中のFigmaファイルがそのチーム内にない場合はレート制限に引っかかることがあります。ファイルを有料プランのチームに移動すると解消します。
ちなみに、Fullシートでないとドラフト外のファイルへの書き込みができません。Devシートは読み取り専用になります。
レート制限に関しては状況に応じて変化すると思われるため、上記の情報はすぐに変わる可能性が高いです。
おまけのプラクティス
CLAUDE.mdにFigma関連のルールを書いておく
Auto Layoutの設定ルール、使用するデザイントークンの方針などをCLAUDE.mdに書いておくと、毎回指示する手間が省けます。create_design_system_rulesツールでプロジェクト固有のルールを自動生成することもできます。
決まった手順で実行する操作であれば、SKILLに定義しておくのも効果的です。
-scope user で全プロジェクトに適用する
手動セットアップの場合、-scope userをつけておくとプロジェクトごとに再設定しなくて済みます。
接続が切れたらClaude Codeを再起動する
MCPの接続は起動時にしか行われません。接続がうまくいかないときは、まず再起動を試してください。何らかのVPNが干渉し ている場合もあります。
use_figmaとgenerate_figma_designの使い分け
ウェブアプリのページをFigmaに初めて送る場合はgenerate_figma_design。すでにFigmaにあるデザインの更新・編集や、デザインシステムのコンポーネント・変数を使った作成にはuse_figmaを使います。
