Figmaプラグインでデザインを準備する
Pixelayは、Pixelay Figmaプラグインを使って現在のFigmaページから最上位の親フレームの画像をアップロードし、Pixelay Webアプリで、Webサイトのビルド内の対応するページのURLにそれらを重ねて表示する仕組みです。
Figmaの親フレームが必要です。デザインを比較するには、Figmaページに少なくとも1つの「親フレーム」が含まれている必要があります。親フレームとは、ページの直下にあるフレームのことです。
比較するFigmaフレームを選択する
まず、Webサイトのビルド内のURLと比較したいフレームを、Figmaのデザインから選択します。
Pixelayは、すべての「親フレーム」を、Webサイトのビルドと比較できるデザインの一覧としてプラグインに読み込みます。フレームのチェックボックスか画像のサムネイルをクリックすると選択でき、もう一度クリックすると選択が解除されます。
Figmaの親フレームをハイライトして選択する。比較したいFigmaの親フレームを選びやすくするため、Figmaページ上でフレームをクリックまたはハイライトすると、Pixelayプラグインの選択可能なフレームの一覧が自動的にそのフレームに絞り込まれます。
Figmaの親フレームを再読み込みする
Pixelayプラグインを実行中に、現在のFigmaページで親フレームを追加または削除する必要がある場合は、必要に応じて変更を加えてから、Pixelayプラグインの選択済みフレーム数の横にあるRefresh framesアイコンボタンをクリックします。
WebサイトのURLを入力する
Pixelayプラグイン上部のBase Website URLフィールドに有効なURLを入力すると、デザインと比較するデフォルトのURLを設定できます。このURLは、選択したデザインと比較するために読み込まれるデフォルトのページとして使われます。
Pixelay Chrome拡張機能をインストールしてください。PixelayでデザインとURLを比較できるようにするには、Pixelay Chromeプラグインをインストールしてください。バックグラウンドで動作し、ブラウザでプラグインのURLを検出するとPixelayを読み込みます。
https://のURLを使ってください。 Pixelayが読み込めるのは、HTTPS経由の公開中のWebサイトとローカル開発用のURLのみです。
ページごとのWebサイトURLを追加する
複数のフレームを同時に比較する場合は、フレームごとに比較するURLを指定できます。たとえば「About」ページのデザインを比較する場合は、_https://yoursite.com/about/_ のようなURLを入力します。この個別のURLは、PixelayツールバーのデフォルトのURLよりも優先されます。
複数の環境のWebサイトURLを追加する（任意）
Webサイトの環境が複数ある場合は、開発、ステージング、本番の各サイトに追加のベースURLを設定します。Pixelay Webアプリからそれらの環境を切り替えることができます。
URLを追加するには、ベースWebサイトURLの横にあるShow extra website URLsアイコンボタンをクリックし、Add Extra Base URLフィールドに新しいURL（たとえばhttps://dev.yoursite.comやhttps://test.yoursite.com）を入力して、Add URLボタンをクリックすると、追加環境のベースURLの一覧に加わります。プラグインからデザインを再アップロードすると、これらのURLがPixelay Webアプリのドロップダウンリストに表示されます。
環境のURLを削除するには、ドロップダウンからそのURLを選び、Delete selected URLアイコンをクリックしてから、Deleteをクリックして確定します。変更を現在の比較リンクに反映するには、Pixelayのデザインを再アップロードしてください。
比較用URLを生成する
比較したいFigmaフレームを選択し、それぞれにWebサイトのビルドのURLを割り当てたら、PixelayプラグインのCompare Designsボタン（比較するフレームの数が表示されます）をクリックします。Compare Figma DesignsパネルでUpload Designsボタンをクリックすると、確定してアップロードが始まります。
Compare Designsが使えない場合は、ボタンにカーソルを合わせると理由が表示されます。先にベースWebサイトURLを入力するか、少なくとも1つのフレームにチェックを入れてください。Freeモードで比較できるのは、幅430px以下のフレームのみです。
Figmaファイルを複製すると、そのURLもコピーされます。 複製したファイル用に別のURLを生成するには、プラグインを開いた状態でコナミコマンド（Up、Up、Down、Down、Left、Right、Left、Right、B、A）を入力してください。Pixelayは以前のURLを削除せずに、新しいURLを作成します。
フレームのアップロードや再読み込みに失敗した場合、Pixelayはプラグインにエラーを表示し、進行状況の表示を停止します。アップロードのエラーが起きても、すでに比較ページに送信されたフレームや設定が元に戻ることはありません。
比較用URLを開く
すべてのフレームのアップロードが終わると、Designs Uploaded Successfully! という確認メッセージが表示され、比較ページのURLが使える状態になったことがわかります。
Copy linkアイコンボタンをクリックしてURLをコピーし、Webブラウザに貼り付ける（またはほかの人と共有する）か、確認メッセージ内のComparison URLリンクをクリックします。ブラウザでPixelay Webアプリが開き、FigmaのデザインとWebサイトの開発用URLの比較を始められます。
なお、PixelayでデザインとURLを比較できるようにするには、Pixelay Chromeプラグインをインストールしてください。このリンクは、プラグインの確認メッセージにも表示されます。
プラグインから比較用URLにもう一度アクセスする
プラグインで比較用URLをすでに作成していて、デザインを再アップロードせずにURLをもう一度コピーしたい場合は、PixelayプラグインのCompare Designsボタンをクリックします。Compare Figma Designsパネルに、以前に作成した比較用URLが表示されます。URLを再び使うには、Copy linkアイコンボタンをクリックしてURLをコピーし、Webブラウザに貼り付ける（またはほかの人と共有する）か、パネル内のcomparison URLリンクをクリックします。
Figmaのデザインを比較用URLに再アップロードする
デザインを更新した場合や、比較するFigmaフレームを追加・除外したい場合、比較用URL内のWebサイトやページのリンクを変更したい場合は、最初にアップロードしたときと同じ方法で、選択したデザインを比較用URLに再アップロードできます。PixelayプラグインのCompare Designsボタンをクリックし、今度はUpdate Designsボタンをクリックします。
デザインを再アップロードしても、比較用URLは変わりません。Update Designsボタンをクリックするたびに、以前にアップロードしたフレームとWebサイトのリンクが置き換えられ、以前に生成したPixelayの比較用URLが新しいデザインとリンクで更新されます。