---
url: "/ja/pixelay/upload-designs.md"
description: "Figmaの親フレームの選択、URLの設定、デザインのアップロード、Pixelayの比較リンクの管理の手順です。"
---

# 比較するデザインをFigmaからアップロードする

> Figmaの親フレームの選択、URLの設定、デザインのアップロード、Pixelayの比較リンクの管理の手順です。

## Figmaプラグインでデザインを準備する {#preparing-designs-in-the-figma-plugin}

Pixelayは、Pixelay Figmaプラグインを使って現在のFigmaページから最上位の親フレームの画像をアップロードし、Pixelay Webアプリで、Webサイトのビルド内の対応するページのURLにそれらを重ねて表示する仕組みです。

> **Note:** **Figmaの親フレームが必要です**。デザインを比較するには、Figmaページに少なくとも1つの「親フレーム」が含まれている必要があります。親フレームとは、ページの*直下*にあるフレームのことです。

### 比較するFigmaフレームを選択する {#selecting-figma-frames-to-compare}

[Video](/assets/videos/pixelay/upload/selecting-frames.mp4)

まず、Webサイトのビルド内のURLと比較したいフレームを、Figmaのデザインから選択します。

Pixelayは、すべての「親フレーム」を、Webサイトのビルドと比較できるデザインの一覧としてプラグインに読み込みます。フレームのチェックボックスか画像のサムネイルをクリックすると選択でき、もう一度クリックすると選択が解除されます。

> **Tip:** **Figmaの親フレームをハイライトして選択する**。比較したいFigmaの親フレームを選びやすくするため、Figmaページ上でフレームをクリックまたはハイライトすると、Pixelayプラグインの選択可能なフレームの一覧が自動的にそのフレームに絞り込まれます。

### Figmaの親フレームを再読み込みする {#refreshing-figma-parent-frames}

[Video](/assets/videos/pixelay/upload/refreshing-layers.mp4)

Pixelayプラグインを実行中に、現在のFigmaページで親フレームを追加または削除する必要がある場合は、必要に応じて変更を加えてから、Pixelayプラグインの選択済みフレーム数の横にある**Refresh frames**アイコンボタンをクリックします。

### WebサイトのURLを入力する {#entering-your-website-url}

[Video](/assets/videos/pixelay/upload/entering-url.mp4)

Pixelayプラグイン上部の**Base Website URL**フィールドに有効なURLを入力すると、デザインと比較するデフォルトのURLを設定できます。このURLは、選択したデザインと比較するために読み込まれるデフォルトのページとして使われます。

> **Note:** **Pixelay Chrome拡張機能をインストールしてください**。PixelayでデザインとURLを比較できるようにするには、[Pixelay Chromeプラグイン](https://chrome.google.com/webstore/detail/pixelay-for-figma/gnbafbeabkbkecmbedfgebgboicpnkpp)をインストールしてください。バックグラウンドで動作し、ブラウザでプラグインのURLを検出するとPixelayを読み込みます。

> **Tip:** **`https://`のURLを使ってください。** Pixelayが読み込めるのは、HTTPS経由の公開中のWebサイトとローカル開発用のURLのみです。

#### ページごとのWebサイトURLを追加する {#adding-page-specific-website-urls}

複数のフレームを同時に比較する場合は、*フレームごとに*比較するURLを指定できます。たとえば「About」ページのデザインを比較する場合は、_https://yoursite.com/about/_ のようなURLを入力します。この個別のURLは、PixelayツールバーのデフォルトのURLよりも優先されます。

### 複数の環境のWebサイトURLを追加する（任意） {#adding-multiple-environment-website-urls-optional}

[Video](/assets/videos/pixelay/upload/add-environment-urls.mp4)

Webサイトの環境が複数ある場合は、開発、ステージング、本番の各サイトに追加のベースURLを設定します。Pixelay Webアプリから[それらの環境を切り替える](/ja/pixelay/compare-designs#toggling-between-environment-urls)ことができます。

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アプリのドロップダウンリストに表示されます。

> **Tip:** 環境のURLを削除するには、ドロップダウンからそのURLを選び、**Delete selected URL**アイコンをクリックしてから、**Delete**をクリックして確定します。変更を現在の比較リンクに反映するには、Pixelayのデザインを再アップロードしてください。

### 比較用URLを生成する {#generating-your-comparison-url}

[Video](/assets/videos/pixelay/upload/compare-upload.mp4)

比較したいFigmaフレームを選択し、それぞれにWebサイトのビルドのURLを割り当てたら、Pixelayプラグインの**Compare Designs**ボタン（比較するフレームの数が表示されます）をクリックします。**Compare Figma Designs**パネルで**Upload Designs**ボタンをクリックすると、確定してアップロードが始まります。

> **Tip:** **Compare Designs**が使えない場合は、ボタンにカーソルを合わせると理由が表示されます。先にベースWebサイトURLを入力するか、少なくとも1つのフレームにチェックを入れてください。Freeモードで比較できるのは、幅430px以下のフレームのみです。 選択したFigmaフレームの画像がアップロードされ、Pixelay Webアプリを開くためのURLが生成されます。

> **Warning:** **Figmaファイルを複製すると、そのURLもコピーされます。** 複製したファイル用に別のURLを生成するには、プラグインを開いた状態でコナミコマンド（**Up**、**Up**、**Down**、**Down**、**Left**、**Right**、**Left**、**Right**、**B**、**A**）を入力してください。Pixelayは以前のURLを削除せずに、新しいURLを作成します。

> **Note:** フレームのアップロードや再読み込みに失敗した場合、Pixelayはプラグインにエラーを表示し、進行状況の表示を停止します。アップロードのエラーが起きても、すでに比較ページに送信されたフレームや設定が元に戻ることはありません。

### 比較用URLを開く {#opening-your-comparison-url}

[Video](/assets/videos/pixelay/upload/copy-url.mp4)

すべてのフレームのアップロードが終わると、**Designs Uploaded Successfully!** という確認メッセージが表示され、比較ページのURLが使える状態になったことがわかります。

**Copy link**アイコンボタンをクリックしてURLをコピーし、Webブラウザに貼り付ける（またはほかの人と共有する）か、確認メッセージ内の**Comparison URL**リンクをクリックします。ブラウザでPixelay Webアプリが開き、FigmaのデザインとWebサイトの開発用URLの比較を始められます。

なお、PixelayでデザインとURLを比較できるようにするには、[Pixelay Chromeプラグイン](https://chrome.google.com/webstore/detail/pixelay-for-figma/gnbafbeabkbkecmbedfgebgboicpnkpp)をインストールしてください。このリンクは、プラグインの確認メッセージにも表示されます。

#### プラグインから比較用URLにもう一度アクセスする {#accessing-your-comparison-url-from-the-plugin-again}

プラグインで比較用URLをすでに作成していて、デザインを再アップロードせずにURLをもう一度コピーしたい場合は、Pixelayプラグインの**Compare Designs**ボタンをクリックします。**Compare Figma Designs**パネルに、以前に作成した比較用URLが表示されます。URLを再び使うには、**Copy link**アイコンボタンをクリックしてURLをコピーし、Webブラウザに貼り付ける（またはほかの人と共有する）か、パネル内の**comparison URL**リンクをクリックします。

### Figmaのデザインを比較用URLに再アップロードする {#re-uploading-your-figma-designs-to-the-comparison-url}

[Video](/assets/videos/pixelay/upload/reupload-images.mp4)

デザインを更新した場合や、比較するFigmaフレームを追加・除外したい場合、比較用URL内のWebサイトやページのリンクを変更したい場合は、最初にアップロードしたときと同じ方法で、選択したデザインを比較用URLに再アップロードできます。Pixelayプラグインの**Compare Designs**ボタンをクリックし、今度は**Update Designs**ボタンをクリックします。

> **Note:** **デザインを再アップロードしても、比較用URLは変わりません**。**Update Designs**ボタンをクリックするたびに、以前にアップロードしたフレームとWebサイトのリンクが置き換えられ、以前に生成したPixelayの比較用URLが新しいデザインとリンクで更新されます。