機能
HTML to Figmaのすべてがそろうツールキット
1つのURLから、複数ページ・レスポンシブ・デザインシステム対応のFigmaファイルまで。HTML to Framesができることと、その仕組みをすべてご紹介します。
どこからでもインポート
公開サイト、PC上のファイル、あなたのブラウザでしか見られないページ、AIが書いたコードまで、5つの取り込み方法でカバーします。
Link
公開URLを貼り付けるだけ。ページは隔離されたブラウザでレンダリングされ、遅延読み込みのコンテンツはスクロールして表示させ、必要に応じてCookieバナーやポップアップを非表示にします。
Multipleインポート
1回のインポートで最大10件のリンクを順番に処理します。各ページはそれぞれ1行の画面として並びます。全プランに含まれ、Proは不要です。
ローカルファイル & コードの貼り付け
HTMLファイル、サイトフォルダ全体、.zipをドロップしてインポートするページを選択できます。HTML/CSSを直接貼り付けることもできます。ファイルはメモリから配信され、インポート完了時に削除されます。
Chrome拡張機能
ログイン後のダッシュボード、localhost、プライベートネットワーク、ページの現在の状態をキャプチャします。単一の要素かページ全体を選び、貼り付けるかSend to Figmaで送ります。
MCP経由のAIツール
Claude Code、Claude Desktop、Cursor、その他あらゆるMCPクライアントを接続できます。AIがimport_htmlまたはimport_urlを呼び出すと、ページが開いているプラグインに届きます。
リンク先ページのインポート & Re-import
インポート後、同じサイトの他のページを一覧から選んで追加できます。どのフレームも後からワンクリックのRe-import（再インポート）で更新できます。
実際のサイトに合った画面
レスポンシブデザインとは、3枚のスクリーンショットのことではありません。HTML to Framesは幅ごとに個別にレンダリングするので、本物のタブレット・モバイルレイアウトが得られます。
実測のSite width
Desktopはサイトが想定しているデザイン幅で開きます。全幅レイアウトならボックスを中央に置いた1920、ボックス型サイトならそのボックス幅、フルードなサイトなら1440です。
Responsive set
Desktop + Tablet 768 + Mobile 390をワンクリックで。ProではLaptop 1280とカスタム幅も使えます。画面は並列でキャプチャされます。
整理されたキャンバス配置
1ページにつき1行、画面は横に並び、フレーム名は yoursite.com/pricing — Desktop (1920) のように付きます。
信頼できるAuto Layout
HTML to Framesの中核です。Auto Layoutは実際のブラウザのジオメトリから推定・適用・検証され、決して憶測では決めません。
スタック、行、グリッド
縦横のスタック、折り返し行、間隔、パディング、配置を、すべての子要素の実測位置から推定します。
レスポンシブな意味づけ
中央寄せのコンテンツは中央のまま、均等なカードはFill、最大幅のコンテナは中央に、スペーサー要素は伸縮します。フレームはサイトと同じようにリサイズされます。
2 px以内で検証
Auto Layoutを適用した後、各子要素の位置をブラウザと比較します。ずれていればよりシンプルなプランを試し、だめならフレームは正確な位置を保ちます。
スマートな制約
絶対配置のまま残るフレームにはStretch、Scale、Center、Min/Maxの制約が設定されるため、リサイズしても正しく動作します。
診断
結果画面には、各フレームが絶対配置のまま残った理由（不均一な間隔、重なり、文字サイズの違いなど）が表示されるので、謎は残りません。
デザインシステムを抽出
サイトの色、文字、繰り返されるUIを、Figmaデザインシステムの構成要素に。あるいは、あなたのデザインシステムに割り当てます。
カラー変数
「Colors · ドメイン」コレクションに最大96個のカラー変数を作成し、サイトのCSSカスタムプロパティから命名します（例：--brand-primary → brand/primary）。
テキスト & シャドウスタイル
役割とサイズで命名された最大48個のテキストスタイルと、smからxlまでのシャドウスタイル。塗り、線、文字色は変数にバインドされます。
重複させずに再利用
ファイルに同じ値の変数やスタイルがあれば、それを使います。同じサイトを2回インポートしても、新しいものは何も作られません。
Snap to my file's styles
完全一致しない近い値は、知覚的な色差を使って、あなたのデザインシステムで最も近いカラーとテキストスタイルに合わせます。
コンポーネント & ホバーバリアント
繰り返されるカード、ボタン、メニュー項目はコンポーネントとインスタンスになります。ホバー時の見た目は、ホバー時インタラクション付きのDefault/Hoverバリアントになります。
ライト + ダーク
ページをライトとダークの両方のカラースキームで読み取り、2つのモードを持つ1つのコレクションに書き込みます。各画面のダーク版コピーも作成します。
細部まで忠実に
実際のCSSは複雑です。HTML to Framesは、ページをそのページらしく見せる細部まで処理します。
テキスト
1つの段落内の混在スタイル、リンク、文字間隔、行の高さ、text-transform、上付き・下付き文字、CSSカウンター、Chromeと同じリストマーカー。
塗り
pxでの色の停止位置やタイル状パターンを含む線形・放射・円錐グラデーション、ブレンドモード、不透明度、ぼかしと背景ぼかし、グレースケールフィルター。
シェイプ & エフェクト
編集可能なベクターとしてのSVG、角の半径、内側・外側のシャドウ、テキストシャドウ、片側だけのボーダー、::before/::after、clip-path、mask-image、回転と拡大縮小。
埋め込みコンテンツ
地図、iframe、WebGL、ポスター画像のない動画は、そのボックスの画像としてキャプチャされるので、空白のまま残ることはありません。
画像
高解像度のsrcsetソース、object-fit、background-size、タイル状の背景。
フォント
構築前にMissing fonts（不足フォント）画面が代替フォントを提案し、選択をそのサイト用に記憶します。
プロトタイプとワークフロー
インポートしたページはすぐにクリックして確認でき、最新の状態に保つのも簡単です。
クリック可能なリンク
リンクはプレゼンテーションモードでそのURLを開きます。インポートしたページ間のリンクはNavigateインタラクションになります。
固定、スティッキー & スクロール
固定ヘッダーやスティッキーヘッダーはその位置に留まり、カルーセルなどの横スクロール領域はプロトタイプ内でスクロールします。
アコーディオンのテキストを注釈に
オプション：閉じたアコーディオン内の非表示テキストをFigmaの注釈として追加するので、コンテンツが失われません。
参照用スクリーンショット
ピクセル単位で比較するための、非表示でロックされたスクリーンショットレイヤーを各画面の下に配置します（Pro）。
よくある質問
Freeには、すべてのインポート方法、最大10件のリンクのMultipleインポート、実測のサイト幅、検証付きAuto Layout、フォントの置き換え、プロトタイプリンク、埋め込みコンテンツのスクリーンショットが含まれます。インポートは毎月10回、1回のインポートにつき1画面です。スタイルと変数、コンポーネント、ライト + ダーク、カスタム幅、参照用スクリーンショットはProの機能です。
はい。プラグインはレイアウトを組み立てるためにCSSルールを直接読むのではなく、ブラウザで実測したジオメトリを使います。flexboxやgridのレイアウトは、結果がブラウザと2 px以内で一致する箇所では、Auto Layoutのスタックや折り返し行に変換されます。
はい、Proで可能です。デスクトップ幅の画面では、キャプチャサービスがリンクやボタンのホバー状態を強制的に再現し、通常状態と比較して、ホバー時のプロトタイプインタラクション付きのDefault/Hoverバリアントを作成します。マウスが乗ったときにJavaScriptで開くメニューはキャプチャされません。
スキューや3D変形、path()を使ったclip-path、複数レイヤーのマスク、Display-P3カラーはまだ変換されません。埋め込みのcanvas、地図、iframeは、レイヤーではなくそのボックスの画像になります。
Webをなぞって描き直すのは、もう終わりにしましょう。
リンクを貼るだけで、編集可能でレスポンシブな本物のFigmaレイヤーが数秒で手に入ります。無料で始められ、毎月10回インポートできます。
クレジットカード不要。ProはFigma内で購入できます。
Figma Communityで近日公開