Website to Figma：トップページだけでなく、サイト全体をFigmaに取り込む

1つのWebサイトの多数のページをFigmaに取り込む方法は3つあり、組み合わせて使えます。

複数のリンク

Multipleタブに最大10件のURLを貼り付けます。プラグインはそれらを順番に処理して各ページを1行ずつ配置するため、1ページのDesktop、Tablet、Mobileのキャプチャが横に並び、ページは下へと積み重なります。

Import linked pages

インポートのあと、プラグインはそのページからリンクされている同じサイトの他のページを一覧表示できます。必要なものを選ぶとMultipleインポートとして実行されます。トップページから始めれば、たいてい2回ほどで主要なナビゲーションを網羅できます。

サイトフォルダーまたは.zip

静的なビルドがある場合は、フォルダーをLocal fileタブにドラッグするか、最大30 MBの.zipをアップロードして、取り込むHTMLページを選びます。ファイルは隔離されたブラウザ内でメモリから開かれ、インポートが終わるとすぐに削除されます。

画面の数にかかわらず、各ページは1回のインポートとしてカウントされます。Freeでは毎月10回のインポート、ProとTeamはフェアユースの範囲内で無制限です。詳しくは料金をご覧ください。

静的なフレームのセットも役立ちますが、クライアントや関係者はクリックしながら見られるほうがサイトを早く理解できます。HTML to Framesは既存のナビゲーションを保ちます。

• インポートしたページ間のリンクはNavigateインタラクションになり、トップページのフレームでPricingをクリックすると料金のフレームに移動します。
• その他のリンクはOpen linkアクションを保ち、ブラウザで開きます。
• 固定ヘッダーとstickyヘッダーは、プレゼンテーションモードでスクロールしてもその場にとどまります。
• カルーセルやタブ列などの横スクロール領域は横方向にスクロールします。

Proでは、ホバー時の見た目を持つ要素がDefaultとHoverのバリアントとホバー時インタラクションを備えたコンポーネントセットになるため、ボタンやメニュー項目にカーソルを重ねると反応します。

これにより、インポートしたサイトをそのまま見せられるベースラインとして使えます。現在の体験を順に案内し、問題点にコメントで印を付けてから、フレームを複製して元のページの横でリデザインを始めましょう。各フレームが取り込み元のURLを保存しているため、後からどのページでも再インポートして、公開中のサイトと提案を比較できます。ページの構造についてはHTML to frameで詳しく説明しています。

プロトタイプの接続はインポートに含まれるページ間にのみ作られるため、Import linked pagesでページを追加すれば、クリックできる導線も広がります。

デザインエージェンシーでは、プロジェクトの最初の1週間が、リデザインの土台を作るためにクライアントの既存サイトを再現する作業に費やされることがよくあります。インポートすればその作業の大半がなくなり、チームの手元には最初から整理されたファイルが残ります。

典型的な流れは次のとおりです。

1. **提案の前に：**クライアントの主要なテンプレートをインポートし、Styles & variablesをオンにして、実際に使われているカラーと文字のシステムを確認します。
2. **ディスカバリー中に：**クリック可能なインポート結果をクライアントに見せ、課題をフレーム上に直接書き込みます。
3. **リデザイン中に：**フレームを複製してその場で変更します。繰り返し構造から抽出されたコンポーネントが、全体への変更を速めます。
4. **ハンドオフ時に：**変更したページを再インポートし、リリースされた内容を確認します。

Teamプランは共有ライセンスキーで5シートを提供し、ローンチ価格は月額$22、1インポートあたり最大4画面です。複数のデザイナーがクライアントのサイトを並行してインポートする小さなスタジオに適しています。

クライアントワークを扱うエージェンシーからは、データについての質問もよくいただきます。ページは隔離されたブラウザでレンダリングされ、結果は一度だけ届けられ、ディスクに書き込まれることはありません。全体像はセキュリティページをご覧ください。