Localhost to Figma：Chrome拡張機能でどんなページもFigmaへ

URLインポートは、ページが公開されていれば使えます。しかし、実際にFigmaで必要な画面の多くは公開されていません。localhost:3000 で動いている機能ブランチ、ログインが必要な管理ダッシュボード、社内ネットワーク上のステージングサーバー、商品がすでに入ったカートのチェックアウト画面などです。

こうしたページのために、HTML to Framesには無料の Chrome拡張機能 があります。あなたのブラウザから、見たままの状態でページをキャプチャしてFigmaプラグインに渡し、プラグインがAuto Layout（オートレイアウト）付きの 編集可能なフレーム、テキスト、ベクター、画像 に変換します。このガイドでは、localhostをFigmaに 取り込む方法、ログイン後のページや特定の状態をキャプチャする方法、うまくいかないときの対処法を解説します。

URLではなくChrome拡張機能を使うべきとき

プラグインのLink（リンク）ソースは、HTML to Framesのキャプチャサービス上の隔離されたブラウザでページをレンダリングします。そのブラウザに見えるのは、公開インターネット上で匿名の訪問者が見るものだけです。あなたのマシン、プライベートネットワーク、ログイン中のセッションにはアクセスできません。

次のようなページでは拡張機能を使いましょう。

• ローカルで動いている ページ（localhost、127.0.0.1、ネットワーク上の開発サーバーなど）。
• ログインが必要な ページ（SaaSのダッシュボード、管理画面、アカウント設定、クライアントポータルなど）。
• プライベートネットワーク上の ページ（VPN内のステージング環境やイントラネットのツールなど）。
• 特定の状態にある ページ（開いたドロップダウン、入力済みのフォーム、モーダル、商品が入ったカート、送信後のエラーメッセージなど）。

公開ページであれば、URL to Figma によるインポートが引き続き最もシンプルな方法で、ワンクリックでレスポンシブセットにも対応します。

拡張機能でできること（とできないこと）

拡張機能は あなたのブラウザ内で動作します。アカウントは不要 で、アナリティクスは含まれず、リモートコードも読み込みません。Send to Figma を選ばない限り、HTML to Framesに何も送信しません。Send to Figmaを使う場合でも、キャプチャはプラグインが受け取るまで、最大 30分 だけメモリ上に保持されます。

1回のキャプチャは、プランの インポート1回 としてカウントされます。拡張機能自体は無料です。詳しくは Chrome拡張機能のページ をご覧ください。

ステップ・バイ・ステップ：localhostをFigmaへ

1. HTML to Frames Chrome拡張機能をインストール し、ツールバーに固定します。
2. 開発サーバーを起動 し、Chromeでページを開きます（例：http://localhost:3000/settings）。
3. 欲しい画面に合わせて ウィンドウ幅を設定 します（詳しくは後述）。
4. ページを目的の状態にします。ログイン済み、データ読み込み済み、メニューを開いた状態などです。
5. 拡張機能のアイコンをクリック し、ページ全体 をキャプチャするか 要素を選択 するかを選びます。
6. クリップボードまたは .h2f ファイル、もしくは Send to Figma で、キャプチャをFigmaに届けます。
7. Figmaでは、プラグインがレイヤーを構築し、フレーム、レイヤー、Auto Layoutの割合、警告を示す結果画面を表示します。

ページ全体か、単一の要素か

拡張機能には2つのキャプチャモードがあります。

ページ全体をキャプチャする

ダッシュボード、設定ページ、開発中のランディングページなど、画面全体をレビューしたりリデザインしたりしたい場合の基本モードです。ページごとに1つのフレームが作られ、その中にDOMを反映したフレームが入れ子になります。

単一の要素を選択する

必要なのがコンポーネントだけ、ということもよくあります。料金カード、ナビゲーションバー、データテーブル、モーダルなどです。要素選択を選び、次のように操作します。

• ページ上で ホバー すると、カーソル下の要素がハイライトされます。
• ↑ で 親 要素へ、↓ で 子 要素へ移動します。
• Enter でハイライトされた要素をキャプチャします。
• Esc でキャンセルします。

要素キャプチャは、稼働中のプロダクトからコンポーネントのリファレンスを作ったり、ページの他の部分を含めずにウィジェット1つだけをデザイナーにレビューしてもらったりするための最速の方法です。

2つの受け渡し方法：クリップボード／.h2f または Send to Figma

クリップボードと.h2f

キャプチャはクリップボードにコピーされるか、.h2f ファイルとして保存されます。Figmaでプラグインを開き、Browser タブに移動して貼り付けます。.h2f ファイルは、別の人がページをキャプチャし（たとえばクライアントのダッシュボードにアクセスできるPM）、後でデザイナーがインポートする場合に便利です。

Send to Figma

頻繁にキャプチャする場合は、ワンタイムコード で拡張機能をプラグインに一度接続しましょう。以降は貼り付けの手間なく、キャプチャが開いているプラグインに直接届きます。作業中はFigmaでプラグインを開いたままにしてください。

1回のキャプチャ＝現在のウィンドウ幅での1画面

拡張機能はブラウザがレンダリングしたものをキャプチャするため、1回のキャプチャは現在のウィンドウ幅での1画面 になります。ウィンドウ幅が1440 pxなら、1440のデスクトップフレームが作られます。

他のブレークポイントをキャプチャするには、ウィンドウサイズを変えて再度キャプチャ します。

• タブレット： 幅を約768 pxにしてキャプチャします。
• モバイル： 幅を約390 pxにしてキャプチャします。

正確な幅を設定するには、Chrome DevToolsのデバイスツールバーが便利です。各キャプチャはインポート1回としてカウントされます。ページが公開されている場合は、プラグインのLinkソースを使えば、レスポンシブセット一式（Desktop＋Tablet＋Mobile）を1回のインポートで作成できます。

URLでは再現できない状態をキャプチャする

拡張機能はページの 現在の状態 をキャプチャするため、本来なら再現が面倒な画面も取り込めます。

• 開いたメニューとドロップダウン。 メニューを開いてから、ページをキャプチャするか、メニュー要素を選択します。
• 入力済みのフォームとバリデーションエラー。 フィールドに入力し、送信してエラーを表示させてからキャプチャします。
• カートとチェックアウト。 商品を追加し、実際の明細が入ったカートをキャプチャします。
• 空・読み込み中・データありの状態。 同じダッシュボードをデータあり／なしでキャプチャし、状態の一覧を作ります。
• モーダルとトースト。 表示させて、画面に出ている間にキャプチャします。

プロダクトチームにとって、リデザインやユーザビリティレビューの前にフローのあらゆる状態をFigmaに記録する最速の方法です。

取り込まれるもの

拡張機能は他のすべてのソースと同じ変換エンジンを使うため、機能一覧 で紹介しているすべての機能が使えます。レイアウト、複数スタイルが混在するテキスト、グラデーション、画像、編集可能なベクターとしてのSVG、ボーダー、シャドウ、ぼかし、::before/::after、フォームフィールド、Shadow DOM、z-indexの重なり順などです。

Auto Layoutはブラウザが計測したジオメトリから推定され、検証 されます。すべての子要素の位置が2 px以内で確認され、保たれない場合はよりシンプルな案が試されるか、フレームが適切なコンストレイント付きの絶対位置のまま残されます。私たちのテストでは、サイトによって異なりますが、およそ86〜97％のフレームでAuto Layoutが推定されました。フロントエンドをご自身で書く場合は、こちらの対応ガイド で、きれいに取り込めるCSSの書き方を紹介しています。

地図のiframe、ポスター画像のない動画、WebGLキャンバスなど、レイヤーにできない埋め込みコンテンツは、その領域のスクリーンショット画像として取り込まれます。

キャプチャ前のクイックチェックリスト

やり直しを避けるため、キャプチャ作業の前にこのリストを確認しましょう。

• 幅： ウィンドウは目的のブレークポイントになっていますか？ブラウザのズームは100％ですか？
• データ： チャート、画像、遅延読み込みのセクションを含め、ページは完全に読み込まれていますか？
• 状態： メニュー、モーダル、フォームのエラーは、Figmaに取り込みたいとおりに表示されていますか？
• 内容： 実際の顧客データが表示される箇所は、テストアカウントやシードデータに切り替えましたか？
• 範囲： ページ全体が必要ですか？それとも単一の要素のほうがレビューしやすいですか？
• 受け渡し： Send to Figmaを使う場合、Figmaでプラグインは開いていますか？

ここでの2分が、同じ画面を何度もキャプチャし直す手間を省きます。

ログイン後のページや社内ページのプライバシー

ダッシュボードをキャプチャするということは、そこに表示されているものをすべてキャプチャするということです。実践的なルールをいくつか紹介します。

• キャプチャはあなたのブラウザ内で行われます。 Figmaに貼り付けるかSend to Figmaを使わない限り、何もブラウザの外に出ません。
• Send to Figmaは一時的です。 キャプチャはプラグインが受け取るまで最大30分メモリ上で待機し、ディスクには書き込まれません。
• 機密データは先にマスクしましょう。 画面上のものはFigmaファイル内のテキストレイヤーになるため、可能な限りテストアカウントやシードデータを使ってください。
• Figmaファイルは読み取られません。 プラグインはレイヤーを書き込み、自身のフレームのメタデータを読み取るだけです。

ポリシーの全文は セキュリティのページ をご覧ください。

トラブルシューティング

遅れて読み込まれるコンテンツがキャプチャに含まれない

遅延読み込みのセクションやチャートを含め、ページが完全に読み込まれるまで待ってからキャプチャしてください。スクロールで読み込まれるコンテンツがある場合は、一度ページをスクロールしてください。

レイアウトが見ているものと違う

ウィンドウ幅を確認してください。キャプチャは現在の幅をそのまま反映します。また、ブラウザのズームがかかっていないことも確認してください。

Send to Figmaで何も起きない

Figmaでプラグインが開いているか確認してください。ペアリングしたのがだいぶ前の場合やマシンを変えた場合は、新しいワンタイムコードで再度ペアリングしてください。キャプチャは最大30分待機するので、その間にプラグインを開けば届きます。

Browserタブに貼り付けられない

別のコピー操作でクリップボードが上書きされた可能性があります。もう一度キャプチャするか、.h2f ファイルとして保存してそれを読み込んでください。

フォントがおかしい

ローカルフォントやライセンス付きのWebフォントが、お使いのマシンにインストールされていない可能性があります。プラグインの Missing fonts（不足フォント）画面が構築前に代替フォントを提案し、選択をサイトごとに記憶します。

Auto Layoutになっていないフレームがある

結果画面に、フレームが絶対位置のまま残った理由が表示されます。多くの場合、コンテンツの重なりや負のマージンが原因です。フレームはページと一致しており、コンストレイント付きの絶対位置を保っているだけです。

開発者ワークフローでのlocalhost to Figma

フロントエンド開発者にとって、拡張機能はデザインハンドオフを双方向のやり取りに変えます。

1. ローカルで機能を作ります。
2. 新しい画面をデスクトップ幅とモバイル幅でキャプチャします。
3. 元のデザインの隣に並べてFigmaに送ります。
4. デザイナーが実際の実装をレビューし、コメントして調整します。
5. あなたが修正し、再キャプチャして比較します。

AIツールで開発している場合は、直接送る方法もあります。Claude Code、Claude Desktop、CursorからMCP経由でプラグインにHTMLを送れます。MCPを使ったAI to Figma をご覧ください。

はじめに

Chrome拡張機能をインストールし、ローカルビルドを開いて、まずはカードやボタンなどの要素を1つキャプチャし、どう取り込まれるかを確認しましょう。次に、ページ全体をデスクトップ幅とモバイル幅でキャプチャします。ペアリングとBrowserタブの詳細は ドキュメント で、キャプチャがインポート回数にどうカウントされるかは 料金 で解説しています。