この記事は過去に試したHTML取り込みの記録です。現在のプラグイン名・画面・利用条件は提供元で確認してください。取り込みはその時点の見た目を編集用レイヤーに変換するもので、フォーム送信・ログイン・JavaScriptの動作までFigmaへ移植するものではありません。
HTMLからFigmaへ取り込む選択肢にはhtml.to.designもあります。無料枠と有料プランがあり、回数・機能の条件は公式プラン案内と利用時の画面で確認してください。
以下は2023年10月に試したBuilder.ioの取り込み例です。旧プロジェクトの公式リポジトリは、現在のBuilder.io Chrome拡張機能への移行を案内しています。無料で同じ手順を再現できることを保証するものではありません。
HTML to Figmaの旧手順（2023年の検証）
当時はFigmaプラグインへURLを入力して取り込みました。以下のプラグイン名・Import UI・Framesは旧画面の表記です。現在の機能・対応形式とは区別してください。
Figmaのプラグインを導入
Figmaの画面を開いて、プラグイン（Builder.io – AI-Powered Figma to Code (React, Vue, Tailwind, & more)）をインストールします。
プラグイン配布ページ：Builder.ioのプラグイン（Figma Community）
インストール後、Builder.ioを起動。
URLを入力してインポート
Builder.ioを起動して、Import UIタブに移動。
あとはURLを入力して、画面幅を入力
そしてFramesのチェックを入れましょう（階層を再現してくれます）
Import to Figmaのボタンを押すとサイトが生成されるので待ちましょう。
当時このページを比較した範囲では、CSSの再現度はhtml.to.designの方が高いと感じました。現在のツール同士を再比較した結果ではありません。
Chrome拡張機能：現在の公式案内と旧手順
現在のBuilder.io公式ガイドでは、Chrome拡張機能のCopy Layoutで対象部分を選び、FigmaプラグインのImportタブ内のPaste from Chromeへ貼り付けます。builder.jsonがダウンロードされた場合は、同じ場所のアップロード操作を使います。以下のpage.figma.jsonを使う旧例とはファイル名・操作が異なります。
Chrome拡張機能「HTML to Figma – by Builder.io」の導入
下記は当時使った旧拡張機能の配布リンクです。新規導入は上の公式ガイドから案内される現行拡張機能を確認してください。以下の画像は旧操作の記録として残しています。
コピーしたいサイトを開きます。
今回は当サイトのTOPページをFigmaに変換してみます。
拡張機能のアイコンをクリック、下記のメニューが表示されるので、CAPTURE PAGEのボタンを押してみましょう。
ボタンを押した後に、page.figma.jsonというデータがダウンロードされます。
Figmaにインポートする
Figmaの画面を開いて、プラグイン（Builder.io – AI-Powered Figma to Code (React, Vue, Tailwind, & more)）をインストールします。
プラグイン配布ページ：Builder.ioのプラグイン（Figma Community）
インストール後、Builder.ioを起動。
Import UIのタブを押して、Upload the figma.json file here から先ほどのjsonをアップロードしましょう。
しばらく待つとサイトが構築されます。
まとめ
当時の変換結果だけで、現在のツール全体の優劣は判断できません。対象ページでフォント・画像・階層・余白を比較して選んでください。
これは筆者が当時の同じページで比較した結果です。ページやツールのバージョンによって結果は変わります。
無料枠の回数や有料機能は変わるため、旧記事の料金条件で選ばず、利用時のプラン表示を確認してください。
気になった方は試してみてください。
取り込む前に元のFigmaファイルを複製し、取り込み用ページを分けます。PC幅とスマホ幅はそれぞれ取得し、文字・フォント・画像・階層・余白を元画面と照合してください。失敗時は取り込んだフレームだけを取り除き、元ファイルを残します。ログイン後の画面や顧客情報を外部ツールへ送る場合は共有範囲を先に確認します。Builder.ioの公開実装も参照できます。
よくある質問：Figmaで取り込むとき（HTML to Figmaの過去の検証例）
この記事の内容は、今も使えますか？
旧プロジェクトからの移行案内があり、現行の公式手順はCopy LayoutとPaste from Chromeを使います。記事の2023年の画面と旧JSON手順がそのまま使えるとは限りません。現行版での取り込み完了は、この改訂では実機検証していません。
HTMLを取り込むと、フォームやログインの動作もFigmaに移りますか？
移りません。記事では、取り込みはその時点の見た目を編集用レイヤーに変換するもので、フォーム送信・ログイン・JavaScriptの動作までFigmaへ移植するものではないとしています。
どんな方法が紹介されていますか？
記事では、Figmaのプラグイン（Builder.io）にURLを入力して取り込む方法と、Chrome拡張機能「HTML to Figma – by Builder.io」でページをfigma.jsonとして書き出し、Figmaのプラグインにアップロードする方法の2つを紹介しています。
プラグインにURLを入力する方法は、どう進めますか？
2023年の旧手順では、Figmaでプラグインをインストールし、Builder.ioを起動してImport UIタブに移動します。URLと画面幅を入力し、Framesにチェックを入れ（階層を再現してくれます）、Import to Figmaのボタンを押してサイトが生成されるのを待ちます。
Chrome拡張機能を使う方法は、どう進めますか？
2023年の旧手順では、拡張機能をインストールして、コピーしたいサイトを開き、拡張機能のアイコンのメニューからCAPTURE PAGEのボタンを押します。page.figma.jsonというデータがダウンロードされるので、Figmaのプラグインのimport UIタブで、Upload the figma.json file hereからjsonをアップロードします。
html.to.designと比べて、どうですか？
当時の同じページでの比較ではhtml.to.designの再現度が高いと感じました。現在の優劣を示す比較ではありません。無料枠・有料プランの条件と対象ページでの変換結果を確認してください。
取り込む前に、何をしておきますか？
記事では、取り込む前に元のFigmaファイルを複製し、取り込み用ページを分けます。PC幅とスマホ幅はそれぞれ取得し、文字・フォント・画像・階層・余白を元画面と照合します。
失敗したときや、機密のあるページを取り込むときは？
記事では、失敗時は取り込んだフレームだけを取り除き、元ファイルを残します。ログイン後の画面や顧客情報を外部ツールへ送る場合は、共有範囲を先に確認します。
