HTML to Figma：スクリーンショットではなく、編集可能なレイヤーとしてHTMLをFigmaに変換

HTMLからFigmaへの変換をうたうツールの多くは、ページの画像を貼り付けるだけです。ムードボードには役立ちますが、それ以上はできません。見出しを変えることも、色を差し替えることも、カードを動かすこともできません。HTML to Framesは代わりに構造そのものを再構築します。

正直に言うと、例外が1つあります。埋め込みの地図iframe、ポスター画像のない動画、WebGLシーンなど、レイヤーとして存在できないコンテンツは、そのボックス部分だけがスクリーンショット画像として取り込まれます。周囲のページは編集可能なままなので、背景動画のあるヒーローでも、見出し、ボタン、ナビゲーションは編集できます。

それでもピクセル単位の参照が欲しい場合、ProにはReference screenshot（参照スクリーンショット）オプションがあります。インポートの下に非表示・ロック済みのレイヤーを配置し、再構築結果をいつでも元のページと比較できます。違いを詳しく知りたい方はHTML to canvasと編集可能なレイヤーの比較をお読みください。

どの取り込み元を選んでも同じ種類の出力が得られるため、状況に合ったものを選べます。

LinkとMultiple

公開URLを貼り付けるか、最大10件のリンクを貼り付けると順番に処理されます。各ページはキャンバス上にそれぞれ1行として配置されます。MultipleインポートはFreeを含むすべてのプランで利用できます。

Local file

単一のHTMLファイル、サイトフォルダー全体（その後ページを選択）、.zipをドロップするか、HTMLとCSSを直接貼り付けます。アップロードは最大30 MBで、インポートが終わるとすぐに削除されます。

Browser

無料のChrome拡張機能は、ブラウザに表示されているものをキャプチャします。ログイン後のダッシュボード、localhost、プライベートネットワーク、そしてメニューが開いた状態や入力済みのフォームといったページの現在の状態です。Chrome拡張機能からFigmaへをご覧ください。

AIツール

プラグインのAIタブからClaude Code、Claude Desktop、Cursor、またはその他のMCPクライアントを接続すると、生成されたページが開いているプラグインに届きます。詳しくはAI to Figmaをご覧ください。

どの取り込み元でも、1回のインポートは1ページとそのすべての画面としてカウントされます。つまり同じページのDesktop、Tablet、Mobileのキャプチャは1回のインポートです。各フレームには取り込み元のURLが保存されるため、公開ページが変わったときは1クリックで再インポートできます。

多くのHTML to Figmaツールは、モダンなCSSで忠実度を失います。HTML to Framesはブラウザが算出した結果を読み取るため、幅広いプロパティに対応します。

• flexboxとgridのレイアウトを、成立する箇所ではAuto Layoutに変換（CSSのflexboxとgridをAuto Layoutへを参照）
• 一辺だけ色が異なるボーダーを含む枠線と角の丸み
• object-fit、background-size、タイリング、高解像度srcsetを使った画像
• clip-path、mask-image、::beforeと::after、CSSカウンター、Chromeと同じように描かれるリストマーカー
• CSSの回転と拡大縮小、不透明度、filter: grayscale/opacity
• フォームフィールド、上付き・下付き文字、Shadow DOM、z-indexの重なり順

まだ対応していないものもあります。傾斜（skew）と3D変形、path()のclip-path、複数レイヤーのマスク、Display-P3カラーです。インポート前に何が期待できるかわかるよう、これらを公開しています。全一覧は機能ページに、設定に関する質問はドキュメントにあります。

正確に再現できない部分があれば、結果画面がお知らせします。不足フォント、警告、Auto Layoutが適用されたフレームの割合、そして絶対配置のまま残った各フレームの理由が一覧表示されます。変換のどこを再確認すべきか、推測する必要はありません。