ブラウザでFigmaのデザインを実際のWebサイトのURLと比較する

Pixelay Webアプリで、オーバーレイ、各種モード、ツールを使ってFigmaのデザインと公開中のURLを比較するためのガイドです。

Pixelay FigmaプラグインでURLを生成したら、そのURLをWebブラウザで開いてPixelay Webアプリを使い始めます。Webアプリでは、Figmaプラグインでアップロードしたデザインを、Webサイトの開発ビルドのURLと比較できます。

Webアプリは、比較する各URLをiFrameとして読み込み、その上にFigmaのデザインを重ねて表示します。アップロードした各画像のサイズが各iFrameの幅と高さに使われるため、Webサイトのビルドの「レスポンシブ性」を、Figmaで意図したデザインと照らし合わせて確認できます。

Pixelay Chrome拡張機能をインストールしてください。PixelayでデザインとURLを比較できるようにするには、Pixelay Chromeプラグインをインストールしてください。バックグラウンドで動作し、ブラウザでプラグインのURLを検出するとPixelayを読み込みます。

ページをスクロールしてすべてのフレームを表示する ​

ページ内は、縦と横のスクロール（マウスホイール、またはスクロールバーのクリックとドラッグ）だけで移動できます。左右にスクロールするとアップロードしたすべてのフレームを、上下にスクロールすると各フレームのコンテンツ全体を確認できます。

Pixelayのプロジェクトに20個を超えるFigmaフレームがある場合、すべてのURLを一度に読み込んでページが重くなるのを避けるため、Chrome拡張機能は自動的に1度に1つのフレームだけを表示して比較する方式に切り替わります。画面右下のコントロールパネルでFigmaフレームを選ぶと、フレームを切り替えられます。

FigmaのデザインとWebサイトのビルドのモードを切り替える ​

元のFigmaデザインとWebサイトのビルドをすばやく切り替えるには、PixelayのコントロールパネルにあるOriginal Figma DesignとLive Website Buildのアイコンボタンをクリックします。

それぞれをクリックすると選択したモードに切り替わり、もう一方のモードから切り離して、それぞれを単独で確認できます。

公開中のWebサイトのプレビューを操作する。オーバーレイのモードをLive Website Buildに切り替えると、ページを操作できます。フォームの入力欄を使ったり、何かをクリックしたりして、公開中のWebサイトの見た目を比較対象の元のFigmaデザインに近づけたいときに便利です。

透明オーバーレイモードを使う ​

不透明度を変えながらFigmaのデザインとWebサイトのビルドを比較するには、Transparent Overlayアイコンボタンをクリックしてこの比較モードを有効にします。透明オーバーレイモードが有効になります。

Overlay Opacityスライダーをクリック（長押し）してドラッグすると、元のデザインと公開中のURLの間の透明度を指定できます。

分割画面オーバーレイモードを使う ​

画面を分割してFigmaのデザインとWebサイトのビルドを比較するには、Split Screen Overlayアイコンボタンをクリックしてこの比較モードを有効にします。分割画面オーバーレイモードが有効になります。

各デザインの中央にある青いSplit Lineをクリック（長押し）してドラッグすると、元のデザインと公開中のURLをそれぞれどれだけ同時に表示するかを指定できます。

差分オーバーレイモードを使う ​

差分の描画モードでFigmaのデザインとWebサイトのビルドを比較するには、Blend-Diff Overlayアイコンボタンをクリックしてこの比較モードを有効にします。差分オーバーレイモードが有効になります。

Overlay Opacityスライダーをクリック（長押し）してドラッグすると、元のデザインと公開中のURLの間の透明度を指定できます。

ドラッグ可能なオーバーレイモードを使う ​

すべてのデザインでオーバーレイの位置を手動で調整するには、Draggable Overlayアイコンボタンをクリックしてこの比較モードを有効にします。ドラッグ可能なオーバーレイモードが有効になります。

Overlay Opacityスライダーをクリック（長押し）してドラッグすると、元のデザインと公開中のURLの間の透明度を指定できます。

ピクセル定規を使う ​

ページ上の要素間の距離をピクセル定規で測るには、Measure Pixelsアイコンボタンをクリックしてこの計測モードを有効にします。ピクセル計測モードが有効になります。

このモードが有効な間は、ページ上の任意の2点の間をマウスカーソルでクリック（長押し）してドラッグすると、ピクセル単位の距離を測れます。

Overlay Opacityスライダーをクリック（長押し）してドラッグすると、元のデザインと公開中のURLの間の透明度を指定できます。

環境のURLを切り替える ​

比較するデザインをアップロードする前に、Pixelay Figmaプラグインで追加の環境URLを設定していれば、Pixelay WebアプリのコントロールパネルにあるChange Environment Base URLドロップダウンで、それらを切り替えられます。

Pixelayのプレビュー内のすべてのフレームで、ベースURLが自動的に切り替わります。たとえばhttps://dev.yoursite.comを選ぶと、ページごとのURLも含めて、すべてのhttps://www.yoursite.comのURLのベースURLがdev.yoursite.comに変わります（たとえば、ページURLをhttps://www.yoursite.com/aboutに設定したFigmaフレームでは、代わりにhttps://dev.yoursite.com/aboutが読み込まれます）。

ホットリロードが有効な開発環境で使う ​

ローカルの開発用URLでHot Module Replacement（HMR）の仕組みを使っている場合、Pixelay Webアプリ内のフレームは（iFrameで開発用URLを参照しているため）、Pixelay WebアプリのURL自体を再読み込みしなくても、リアルタイムで自動的に更新されます。

コードエディターでローカルに加えた変更は、ファイルを保存してHMRがその変更をURLに反映すると、Pixelay Webアプリにも反映されます。