Weblify Figmaプラグインでは、Webサイトのインポートに無料のWeblify Chrome拡張機能を使います。拡張機能はブラウザ内で直接動作し、現在のログインやブラウザのセッションを使うページにも対応しています。
Webサイトをインポートする
- Weblify Chrome拡張機能をインストールします。
- コピーしたいWebページをChromeで開きます。
- Weblify拡張機能のアイコンを選択して、ページ上にツールバーを開きます。
- Current Window Sizeのままにするか、サイズのコントロールを開いて1つ以上のキャプチャサイズを選びます。
- ページ全体をコピーするにはCopy page、1つの要素を選ぶにはPick elementを選択します。
- Copied to clipboardの確認が表示されるまで待ちます。ページをコピーするときは、Weblifyがスクロールとコンテンツの準備を終えるまで待ってください。
- Figmaファイルに戻り、macOSではCommand + V、WindowsではCtrl + Vで貼り付けます。
Weblify Figmaプラグインの ⋯ メニューからImport websiteを選び、Download the Chrome Extensionを選択することもできます。
キャプチャサイズを選ぶ
Weblifyのロゴの横にあるサイズのコントロールを開くと、Capture sizesが表示されます。コントロールには選択したサイズが表示され、複数選択している場合は2 sizesのように数が表示されます。
| サイズ | ブラウザのビューポート |
|---|---|
| Current Window Size | 現在のブラウザウィンドウのコンテンツの幅と高さ。ウィンドウのサイズを変えると寸法も更新されます。 |
| Desktop | 1440 × 900ピクセル |
| Tablet | 768 × 1024ピクセル |
| Mobile | 390 × 844ピクセル |
| Custom | 幅を280〜2560ピクセル、高さを320〜2400ピクセルで入力します。 |
複数のチェックボックスを選択すると、名前付きの別々のフレームとして横に並べてFigmaにコピーできます。少なくとも1つのサイズは選択されたままになります。選択内容は、Restartを使っても、Webページを再読み込みするまで保持されます。
Copy pageでは、選択した各幅でページの高さ全体が含まれます。高さの設定はページのレイアウトに使うビューポートを決めるもので、結果をその高さで切り取るわけではありません。Pick elementでは、選択した要素を、選んだ各サイズでの表示どおりにコピーします。
現在のレイアウトのままライブのページをキャプチャするには、Current Window Sizeだけを使ってください。ほかのサイズではページのコピーをリフローするため、JavaScriptで制御されるコンテンツ、埋め込みコンテンツ、canvasのグラフィックは異なる場合があります。
コピーの前にコンテンツを読み込む
Copy pageは、キャプチャの前にページを自動でスクロールします。これにより、遅延読み込みの画像や、スクロール時に表示されるセクションが読み込まれます。その後、Weblifyは元のスクロール位置に戻し、準備したページを選択したサイズでキャプチャします。
無限に続くフィードのあるページが延々と読み込み続けないように、準備には時間とスクロールの上限があります。読み込みが非常に遅いコンテンツ、無限フィードの後半の項目、スクロール時にサイトが削除するコンテンツは、含まれない場合があります。Pick elementでは、事前にページが自動でスクロールされることはありません。
足りないものがある場合は、その場所まで自分でスクロールし、表示されるのを待ってから、Current Window Sizeだけを選択した状態でPick elementをお試しください。
要素を選ぶ
Pick elementを選択し、ページ上にマウスを合わせて、コピーしたい要素をクリックします。上下のコントロールを使うと、コピーする前に親要素や子要素に移動できます。
選択した要素が選んだサイズのいずれかで非表示になっている場合、Weblifyは空のフレームをコピーせずにエラーを表示します。要素が表示されるサイズを選んで、もう一度お試しください。
コピーが成功したら、Restartを選択してサイズの選択を保ったままツールバーに戻るか、確認の通知を閉じます。
ブラウザの内部ページやChrome Web Storeでは、拡張機能がページにコントロールを挿入できません。Weblify拡張機能のアイコンを選択する前に、通常のWebサイトのタブを開いてください。