HTML to Framesドキュメント

1. Figma（デスクトップアプリまたはブラウザ）を開き、HTML to FramesのCommunityページに移動します。
2. Open in… または Try it out をクリックしてファイルを選びます。プラグインがアカウントに保存されます。
3. 次回からはメニューの Plugins → HTML to Frames から起動できます。⌘/（WindowsではCtrl /）を押して HTML to Frames と入力しても起動できます。

プラグインはFigma Designファイルで動作します。アカウントは不要です。Freeプランが自動的に開始され、ProはFigma内で購入できます。

1. ImportタブでソースをLinkのままにして、URL（たとえばご自身のホームページ）を貼り付けます。
2. ScreensではDesktopが選択されており、Site width（サイト幅）と表示されています。プラグインはインポート時にページの実際のデザイン幅を測定します。ProではResponsive setをクリックしてTabletとMobileを追加できます。
3. Auto Layoutはオンのままにして、Importをクリックします。
4. 進行状況を確認します。ページのレンダリング、画像の準備、レイヤーの構築、Auto Layoutの適用と検証が順に行われます。
5. 結果画面には、フレームとレイヤーの数、Auto Layoutが適用されたフレームの割合、不足フォント、警告が表示されます。

ページは yoursite.com — Desktop (1920) のような名前のフレームの行としてキャンバスに表示されます。テキスト、画像、ベクターはすべて編集可能です。

Link

あらゆる公開ページに対応します。ログインが必要なページ、localhost 上のページ、プライベートネットワーク内のページにはキャプチャサービスがアクセスできないため、それらにはChrome拡張機能を使ってください。

Multiple

最大10件のリンクを1行に1つずつ貼り付けます。リンクは順番にインポートされ、それぞれが独自の行になります。同じサイトのページは1つの実測幅を共有するため、きれいに揃います。

Local file

HTMLファイル、サイトフォルダ、.zip（最大30 MB）を選びます。フォルダの場合は、インポートするページを選択します。Paste code（コードを貼り付け）を選び、インラインまたは埋め込みCSSを含むHTMLを貼り付けることもできます。ファイルは隔離されたブラウザでメモリから開かれ、インポート直後に削除されます。

Browser

HTML to Frames Chrome拡張機能で作成したキャプチャを貼り付ける（⌘V）か、.h2f ファイルをドロップするか、一度拡張機能を接続してSend to Figmaを使います。Chrome拡張機能をご覧ください。

AIツール

AIタブでMCPクライアントを接続し、AIツールからページを送れるようにします。AIツール（MCP）をご覧ください。

Site widthはインポート時に測定されます。端から端まで広がるセクションを持つレイアウトは、コンテンツボックスを中央に置いた1920のフレームに配置されます。本当にボックス型のサイトはそのボックス幅（例：1200や1280）を、フルードなレイアウトは1440を使います。Freeは1ページにつき1画面、ProとTeamは最大4画面をインポートできます。1ページのすべての画面は1回のインポートとして数えられます。

構築前に、プラグインはページ上のどのフォントがお使いのコンピューターのFigmaで利用できないかを確認します。Missing fonts画面では、それぞれに代替フォントを提案します。まず同じ単語で始まるファミリー、次にCSSフォントスタックのうち最初にインストールされているフォント、最後にInterの順です。必要であれば別のファミリーを検索して選び、その選択をこのサイト用またはすべてのサイト用に記憶するかを決めます。Skipを選ぶと、保存せずに提案を一度だけ使います。保存した選択は、オプションの下にある forget saved で消去できます。

Styles & variablesをオンにすると（Pro）：

• 2回以上使われている色と、サイトのCSSカスタムプロパティに一致する色は、Colors · yoursite.com というコレクションの変数になります。名前は可能な限りサイトのトークンから付けられ（--brand-primary → brand/primary）、それ以外は色相と明度から付けられます（blue/500）。
• 2回以上使われている、または20 px以上のタイポグラフィは、yoursite.com/Heading/32/40 Bold のような名前のテキストスタイルになります。
• 繰り返されるシャドウは、シャドウスタイル sm、md、lg、xl になります。
• ファイルにすでに同じ値の変数やスタイルがあれば、それが再利用されます。

Snap to my file's stylesはさらに一歩進んで、近い値をあなた自身のデザインシステムに割り当てます。

Components & hover statesをオンにすると、繰り返し構造はページの隣にある Components · yoursite.com フレームに配置されるコンポーネントになり、各出現箇所は独自のテキストと画像を持つインスタンスになります。ホバー時の見た目を持つ要素は、State=DefaultとState=Hoverのバリアントを持つコンポーネントセットになります。

Color scheme → Light + Darkを選びます（Pro）。ページは再読み込みなしで、prefers-color-scheme: light と dark で2回読み取られます。変化するすべての色はLightとDarkの値を持つ変数になり、各画面のダーク版コピーが、コレクションをDarkに設定した状態で隣に配置されます。StarterプランのFigmaファイルでは1コレクションにつき1モードしか使えないため、その場合はダークモードをスキップしたことがプラグインから通知されます。システム設定ではなくJavaScriptの切り替えでのみテーマを変えるサイトは、デフォルトのテーマでインポートされます。

• リンクはPresent（プレゼンテーション）モードでも機能します。外部リンクはそのURLを開き、同じくインポートしたページへのリンクはNavigateインタラクションになります。
• 固定ヘッダーやスティッキーヘッダーはスクロール中もその位置に留まり、横方向のカルーセルやスクロール領域はスクロールします。
• インポート後、Import linked pagesには、そのページ上で見つかった同じサイトの他のページが一覧表示されます。必要なものにチェックを入れると、同じ設定のMultipleインポートとしてインポートされます。
• インポートしたフレームを選択してRe-importをクリックすると、保存されているソースURLから最新版を取得します。

キャプチャサービスがアクセスできないページには、無料のHTML to Frames Chrome拡張機能を使います。ログインが必要なページ、localhost、イントラネット、ページのそのままの状態（開いたドロップダウン、入力済みのフォーム）などです。

1. 拡張機能をインストールし、ツールバーに固定します。
2. ページを開いて拡張機能をクリックし、Capture this pageを選びます。一部分だけをキャプチャするにはSelect an elementを選びます（マウスを動かし、↑で親要素、↓で戻る、Enterで決定、Escでキャンセル）。
3. キャプチャがクリップボードにコピーされます（または .h2f ファイルとしてダウンロードされます）。
4. Figmaでプラグインを開き、Browserタブで**⌘V**を押すか、ファイルをドロップします。

Send to Figma： プラグインのBrowserタブでConnectをクリックしてワンタイムコードを取得し、拡張機能のConnect to Figmaに入力します。以降はメインボタンがSend to Figmaになり、キャプチャは開いているプラグインに直接届きます。

拡張機能は現在のウィンドウ幅で1画面をキャプチャします。タブレットやモバイルのレイアウトにはウィンドウのサイズを変更してください。キャプチャは1回ごとに1回のインポートとして数えられます。

1. プラグインを開き、AIタブ → Connect an AI toolを選びます。個人用トークンが作成され、一度だけ表示されます。
2. お使いのクライアント用の設定をコピーします：Claude Code（claude mcp add コマンド）、Claude Desktop（mcp-remote を使う設定）、Cursor & others（URLとヘッダーを含むJSON）。
3. Figmaでプラグインを開いたまま、AIツールにページのインポートを依頼します。例：「3つのプランがある料金ページを作って、HTML to FramesでFigmaに送って。」

利用できるツール：import_html（最大2 MBのHTML、名前と画面は任意）、import_url（任意の公開URL）、import_status。インポートはあなたのプランであなたのプラグイン内で実行され、ツールにはフレーム、レイヤー、Auto Layoutの割合、不足フォントの概要が返されます。Create a new tokenを使うと古いトークンは無効になり、Disconnectで削除されます。claude.aiのWebコネクタにはまだ対応していません。

1回のインポート＝すべての画面を含む1ページです。カウンターは毎月（UTC）リセットされます。非常に長いページがプランの制限で切り取られた場合、フレームに紫色のCapture limitの帯が付くので、いつでも把握できます。ProはPlanタブからFigmaの決済で購入します。Teamのメンバーは同じタブでライセンスキーを入力し、アカウントから削除して席を空けることもできます。

ページがブラウザでの表示と違って見える。 Hide cookie banners & popups をオンにする、遅いアニメーションには Extra wait を試す、または見たままを正確にキャプチャするためにChrome拡張機能を使ってください。

「This address can't be reached」と表示される。 キャプチャサービスは公開アドレスしか開けません。localhost、VPNの内側にあるステージング環境、ログインが必要なページにはChrome拡張機能を使ってください。

テキストの折り返しが異なる。 通常はフォントの違いが原因です。Missing fonts画面で、不足しているフォントを正しいファミリーに割り当ててください。

Auto Layoutがないフレームがある。 Auto Layoutを適用すると要素がずれてしまう場合は、意図的にそうしています。結果画面の診断リストを開くと理由（不均一な間隔、重なり、文字サイズ）を確認できます。

何かが空白になっている。 地図、iframe、WebGLのシーンは画像としてキャプチャされます。それでも空白の場合、そのコンテンツはユーザー操作やログインが必要だった可能性があります。

「Limit reached」と表示される。 今月のFreeのインポート回数を使い切りました。毎月1日（UTC）にリセットされます。無制限のインポートが必要ならProにアップグレードしてください。

それでも解決しない場合は、URLとスクリーンショットを添えて [email protected] までご連絡ください。