本文へスキップ

リンクを貼り付けるだけ

URL to Figma:リンクを貼り付けて、編集可能なレイヤーを取得

Figmaへの最速ルートです。公開URLを貼り付けるだけで、HTML to Framesがページをレンダリングし、計測して、キャンバス上に再構築します。

  • 隔離されたサンドボックスのブラウザでレンダリング
  • Cookieバナーとポップアップは必要に応じて非表示
  • 結果は一度だけ届けられ、ディスクには書き込まれません

Figma Communityで近日公開

URL to Figma:リンクを貼り付けて、編集可能なレイヤーを取得

URL to Figmaは、公開中のページから編集可能なデザインへの最短ルートです。アドレスをコピーしてHTML to Framesプラグインに貼り付け、画面サイズを選んでインポートするだけです。拡張機能のインストールも、コードのエクスポートも、ファイルのアップロードも不要です。競合調査、インスピレーションの分析、リデザイン前のクライアントサイト、自社の本番ページなど、ページが公開されているならいつでも最適な方法です。

貼り付けてから結果が出るまでの間に、多くの処理が行われます。ページはHTML to Framesのキャプチャサービスによって、隔離されたサンドボックスのブラウザで、通常の訪問者が見るのと同じように読み込まれます。指定すれば、まずCookieバナーとポップアップが非表示になります。遅延読み込みのコンテンツが表示されるようにページをスクロールし、きれいなフレームを得るためにアニメーションを停止し、サイトの作りに合ったDesktopフレームにするため実際のデザイン幅を計測します。

その後、プラグインが算出済みのレイアウトとスタイルを読み取り、キャンバス上にネイティブなFigmaレイヤーを構築し、検証できる箇所にはAuto Layout(オートレイアウト)を適用します。テキストは編集可能で、SVGはベクターになり、画像は元のフィットを保ちます。

プライバシーも設計の一部です。結果はプラグインに一度だけ届けられ、その後メモリから削除されます。ディスクに書き込まれることはなく、ジョブの記録は15分後に破棄されます。アーキテクチャの全体はセキュリティページでご覧いただけます。

ログインが必要なページやlocalhostのページには、代わりにChrome拡張機能をご利用ください。多数のページを取り込むならWebsite to Figmaを、初めての方はガイドHTMLをFigmaに変換する方法で各オプションを解説しています。

3ステップでURL to Figma

  1. 01

    ページのアドレスをコピー

    トップページ、商品ページ、ブログ記事、料金表など、どんな公開URLでも使えます。

  2. 02

    Linkタブに貼り付け

    FigmaでHTML to Framesを開き、URLを貼り付けて、DesktopやMobileなどの画面サイズを選びます。

  3. 03

    インポート

    ページがレンダリング、計測され、現在のFigmaページ上に編集可能なレイヤーとして再構築されます。

貼り付けの裏側で起きていること

隔離されたブラウザ

ページは、APIや画像デコードとは別の専用コンテナにあるサンドボックスのブラウザで読み込まれます。

ポップアップを排除

Hide cookie banners & popupsで、キャプチャ前に同意のオーバーレイを取り除きます。

遅延コンテンツも読み込み

スクロールで読み込まれるコンテンツが表示されるようにページをスクロールし、アニメーションは停止します。

計測された幅

Desktopフレームは、固定値の推測ではなくサイトの実際のデザイン幅を使います。

遅いページにはExtra wait

Proでは、重いページの読み込みが終わるまでキャプチャ前に時間を追加できます。

1クリックで再インポート

取り込み元のURLがフレームに保存されるため、ページが変わったあとに更新できます。

URLインポートの舞台裏

リンクの貼り付けは一瞬に見えますが、キャプチャサービスは訪問者が見るものと結果を一致させるためにいくつかの処理を行います。

  1. **隔離された読み込み。**ページは、seccompで制限された専用コンテナ内のサンドボックス化されたChromiumブラウザで開かれます。すべてのリクエストがSSRF対策を通るため、URLを使って内部アドレスにアクセスすることはできません。
  2. **クリーンアップ。**Hide cookie banners & popupsがオンなら、キャプチャ前に同意バナーやオーバーレイが取り除かれます。
  3. **遅延コンテンツ。**ページをスクロールし、スクロールで読み込まれる画像やセクションがキャプチャ時に表示されているようにします。
  4. **静止。**アニメーションは停止され、WebGLは数フレーム後に固定されるため、遷移途中のものがキャプチャされることはありません。
  5. **計測。**実際のデザイン幅を計測します。全幅デザインは1920、ボックス型サイトはボックス幅、可変幅のサイトは1440です。
  6. **受け渡し。**キャプチャした構造はプラグインに一度だけ届けられ、その後メモリから削除されます。

画像は、インターネットにアクセスできない別のデコーダーコンテナで処理されます。その後プラグインがFigma内でローカルにレイヤーを構築し、検証済みのAuto Layoutを適用します。他言語のページについては、Page language(ページの言語)オプションで多言語サイトの15言語から1つを選べます。各オプションの説明はドキュメントにあります。

スピード:適切なオプションの選び方

ほとんどの場合、URLインポートはデフォルトのオプションだけで十分です。調整したいときは、次の設定が最も大きな違いを生みます。

画面サイズ

画面を1つ追加するごとにキャプチャが1回増えます。1ページの画面は並行して処理され、レスポンシブ一式でも1回のインポートとしてカウントされます。Freeは1インポートあたり1画面、ProとTeamは最大4画面です。

Full page

スクロールするページ全体をキャプチャすると、デザインの全体が得られます。ページの上部だけが必要ならオフにしましょう。

Images

仕上がった見た目が欲しければ画像をオンのままに、レイアウトと文字だけが重要ならオフにします。

Extra wait(Pro)

ページによっては、準備ができたように見えてからもコンテンツの読み込みが続きます。Extra waitで時間を追加すれば、遅れて表示されるセクションも含められます。

Detailed layers(Pro)

デフォルトの構造ではなく、より詳細なレイヤーツリーを確認したい場合のオプションです。

プランの上限でページが途中で切れた場合、結果に紫色のCapture limit(キャプチャ上限)の帯が表示されるため、ページ全体を見ているかどうかが常にわかります。プランごとの違いは料金をご覧ください。

URLインポートのプライバシー

URLを貼り付けると、キャプチャサービスがあなたに代わってそのページを訪問します。そのデータがどうなるのか気になるのは当然です。

  • レンダリングは、隔離されたサンドボックスのブラウザで行われます。
  • 結果はプラグインに一度だけ届けられ、その後メモリから削除されます。ディスクに書き込まれることはありません。
  • ジョブの記録は15分後に破棄されます。
  • ログは限定的です。インポートログは180日間保持され(IPアドレスは30日後に削除)、セキュリティログは90日間保持されます。
  • トラッキングなし:プラグイン、拡張機能、Webサイトのいずれにも、Cookie、アナリティクス、トラッキングピクセルはなく、データが販売されることもありません。

あなたの個人情報も最小限に保たれます。アカウント識別子はFigmaのユーザーIDから生成され、Figmaからあなたの名前やメールアドレスを受け取ることはありません。プラグインはFigmaファイルの内容を読み取りません。新しいレイヤーを書き込み、取り込み元のURLや幅など自身のフレームのメタデータだけを読み取ります。

URLインポートは、キャプチャサービスが匿名の訪問者としてアクセスできるページでのみ機能します。ログインが必要なものは、代わりにChrome拡張機能がご自身のブラウザでキャプチャします。詳細はセキュリティページをご覧ください。

キャプチャサービスが匿名の訪問者として開ける、あらゆる公開Webページです。ログインが必要なページ、localhostのローカル開発サーバー、プライベートネットワークのアドレスにはこの方法でアクセスできません。それらにはご自身のブラウザからキャプチャする無料のChrome拡張機能をご利用ください。

含めたい場合のみです。Hide cookie banners & popupsをオンにすると、キャプチャ前に同意バナーやオーバーレイが非表示になり、キャンバス上のページを覆いません。バナー自体をデザインしている場合はオフのままにしてください。

Desktopフレームは、モニターではなく計測したデザイン幅を使います。全幅デザインはコンテンツを中央に置いた1920、ボックス型サイトはボックス幅、可変幅のサイトは1440です。Tablet 768、Mobile 390、Laptop 1280は固定で、ProではCustom widthも使えます。

非常に遅いページでは、遅れて読み込まれるコンテンツが取りこぼされることがあります。ProではExtra waitでキャプチャ前に時間を追加できます。プランの上限でページが切れた場合は、紫色のCapture limitの帯で示されます。結果画面にも警告が一覧表示されます。

いいえ。ページは隔離されたブラウザでレンダリングされ、結果はプラグインに一度だけ届けられたあとメモリから削除されます。ディスクに書き込まれることはなく、ジョブの記録は15分後に破棄されます。Cookie、アナリティクス、トラッキングは一切使用していません。

はい。取り込み元のURLが各フレームに保存されているため、1クリックで再インポートできます。アドレスを貼り直したりインポート設定をやり直したりせずに、リリースごとにページを追跡したり、デザインレビュー前に参照を更新したりするのに便利です。

Webをなぞって描き直すのは、もう終わりにしましょう。

リンクを貼るだけで、編集可能でレスポンシブな本物のFigmaレイヤーが数秒で手に入ります。無料で始められ、毎月10回インポートできます。

クレジットカード不要。ProはFigma内で購入できます。

Figma Communityで近日公開