HTML to canvas：Figmaキャンバス上で編集できるレイヤーとして配置

スクリーンショット方式とHTML to Framesは、同じレンダリング済みのページから出発しますが、たどり着く場所は大きく異なります。

また、html2canvasはCSSのレンダリングをJavaScriptで再実装しているため、ブラウザがサポートする機能を取りこぼすことがあります。HTML to Framesは、実際のChromiumベースのブラウザがレンダリングを終えたあとに値を読み取り、Figmaのプロパティに対応付けます。円錐グラデーションや繰り返しグラデーションを含むグラデーション、影、ブレンドモード、ぼかしと背景のぼかし、clip-path、mask-imageなどです。

スクリーンショットにも役割はあります。手早く見た目を記録したいだけならビットマップで十分です。何かを変更するつもりなら、レイヤーがあればページを描き直す手間が省けます。

目安として、次のステップがコメントやチケットならスクリーンショットで十分です。次のステップがFigmaを開いて何かを変更することなら、レイヤーとしてインポートしましょう。

ページ上には、もともとピクセルであるコンテンツもあります。<canvas>要素はJavaScriptで描画し、WebGLシーンはGPUで3Dグラフィックスをレンダリングします。これらのボックスの内部には読み取れるDOMがないため、どのツールでも意味のあるベクターレイヤーに変換することはできません。

HTML to Framesは、黙って失敗するのではなく、これらを明示的に扱います。

• ボックスは正確な位置とサイズでスクリーンショット画像としてキャプチャされます。
• WebGLシーンは数フレーム後に固定されるため、空白や遷移途中のフレームではなく安定した画像が得られます。
• ボックスの周囲にあるもの、たとえば上に重ねて配置された見出し、ボタン、オーバーレイなどは、編集可能なレイヤーのままです。

レイヤーにできない他の埋め込みコンテンツにも同じルールが適用されます。地図などのiframe、ポスター画像のない動画、objectやembed要素です。それぞれが自身のボックスの画像になり、警告があれば結果画面に一覧表示されます。

つまり、3Dのヒーローを持つランディングページでも、実際に使えるデザインに変換されます。ヒーロー画像を新しいビジュアルに差し替え、その上のコピーを書き換え、余白を調整できる一方で、ページの残りはAuto Layoutを保ちます。このレイアウトがどのように推定されるかはAuto Layoutの仕組みをご覧ください。

モダンなページは動きます。カルーセルは回転し、要素はスクロールでフェードインし、Cookieバナーはスライドアップし、ヒーローセクションは読み込み時にアニメーションします。単純なキャプチャでは、その一瞬に起きていたことがそのまま固定されてしまいます。

HTML to Framesは通常の訪問者が見るとおりにページをキャプチャし、結果を予測しやすくするためのいくつかの設定を用意しています。

アニメーションの停止

アニメーションを停止し、各要素が遷移途中ではなく落ち着いた状態でキャプチャされるようにします。

Hide cookie banners & popups

このオプションをオンにすると、キャプチャ前に同意バナーやポップアップが非表示になり、キャンバス上のページを覆わなくなります。

Extra wait

コンテンツの読み込みが遅いページには、キャプチャ前に追加の待ち時間を設定できます。Extra wait（追加待機）はProのオプションです。

Full page

必要に応じて、スクロールするページ全体か最初の1画面だけをキャプチャします。

これらのオプションは、ページの取り込み元がURL、ローカルファイル、Chrome拡張機能のどれであっても適用されます。デフォルト表示ではなく、メニューが開いた状態など特定の状態が欲しい場合は、拡張機能を使うのが適しています。

それでもアニメーションの途中でキャプチャされたり何かが欠けていたりする場合は、結果画面に警告が表示されます。たいていは別のオプションで1クリック再インポートするのが最も早い解決策です。