---
url: "/de/pixelay/upload-designs.md"
description: "So wählst du übergeordnete Figma-Frames aus, legst URLs fest, lädst Designs hoch und verwaltest deine Pixelay-Vergleichslinks."
---

# Designs aus Figma zum Vergleichen hochladen

> So wählst du übergeordnete Figma-Frames aus, legst URLs fest, lädst Designs hoch und verwaltest deine Pixelay-Vergleichslinks.

## Designs im Figma-Plugin vorbereiten {#preparing-designs-in-the-figma-plugin}

Pixelay lädt über das Pixelay-Figma-Plugin Bilder der übergeordneten Frames der obersten Ebene von der aktuellen Figma-Seite hoch und legt sie in der Pixelay-Web-App über die URLs der passenden Seiten deines Website-Builds.

> **Note:** **Übergeordnete Figma-Frames sind erforderlich**. Um deine Designs zu vergleichen, muss deine Figma-Seite mindestens einen „übergeordneten Frame“ enthalten. Das sind alle Frames, die _direkt_ unter deiner Seite liegen.

### Figma-Frames zum Vergleichen auswählen {#selecting-figma-frames-to-compare}

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

Wähle zuerst die Frames aus deinem Figma-Design aus, die du mit URLs in deinem Website-Build vergleichen möchtest.

Pixelay lädt alle deine „übergeordneten Frames“ als Liste von Designs ins Plugin, die du mit deinem Website-Build vergleichen kannst. Klick auf das Kontrollkästchen oder das Vorschaubild eines Frames, um ihn auszuwählen (ein erneuter Klick hebt die Auswahl wieder auf).

> **Tip:** **Übergeordnete Figma-Frames durch Markieren auswählen**. Damit du die gewünschten übergeordneten Figma-Frames leichter auswählen kannst, filtert das Pixelay-Plugin die Liste der verfügbaren Frames automatisch, sobald du Frames auf deiner Figma-Seite anklickst oder markierst.

### Übergeordnete Figma-Frames aktualisieren {#refreshing-figma-parent-frames}

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

Wenn das Pixelay-Plugin bereits läuft und du auf der aktuellen Figma-Seite übergeordnete Frames hinzufügen oder entfernen musst, nimm die Änderungen einfach vor und klick dann im Pixelay-Plugin auf das Symbol **Refresh frames** neben der Anzahl der ausgewählten Frames.

### Website-URL eingeben {#entering-your-website-url}

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

Gib die Standard-URL, mit der du deine Designs vergleichen möchtest, als gültige URL in das Feld **Base Website URL** oben im Pixelay-Plugin ein. Diese URL wird als Standardseite geladen, mit der deine ausgewählten Designs verglichen werden.

> **Note:** **Installiere die Chrome-Erweiterung von Pixelay**. Damit du deine Designs mit Pixelay mit URLs vergleichen kannst, installiere bitte das [Pixelay-Chrome-Plugin](https://chrome.google.com/webstore/detail/pixelay-for-figma/gnbafbeabkbkecmbedfgebgboicpnkpp). Es läuft im Hintergrund und startet Pixelay, sobald im Browser eine URL aus dem Plugin erkannt wird.

> **Tip:** **Verwende `https://`-URLs.** Pixelay kann Live-Websites und lokale Entwicklungs-URLs nur über HTTPS laden.

#### Seitenspezifische Website-URLs hinzufügen {#adding-page-specific-website-urls}

Wenn du mehrere Frames gleichzeitig vergleichst, kannst du _pro Frame_ eine eigene URL festlegen. Vergleichst du zum Beispiel ein Design für die Seite „About“, könntest du eine URL wie _https://yoursite.com/about/_ eintragen. Diese spezifische URL überschreibt die Standard-URL in der Pixelay-Symbolleiste.

### URLs für mehrere Website-Umgebungen hinzufügen (optional) {#adding-multiple-environment-website-urls-optional}

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

Wenn du mehr als eine Website-Umgebung hast, füge für jede Entwicklungs-, Staging- oder Produktionsseite eine weitere Basis-URL hinzu. In der Pixelay-Web-App kannst du dann [zwischen diesen Umgebungen wechseln](/de/pixelay/compare-designs#toggling-between-environment-urls).

Um weitere URLs hinzuzufügen, klick auf das Symbol **Show extra website URLs** neben deiner Basis-URL, gib die neue URL in das Feld **Add Extra Base URL** ein (zum Beispiel `https://dev.yoursite.com` oder `https://test.yoursite.com`) und klick auf **Add URL**, um sie zur Liste der Basis-URLs für weitere Umgebungen hinzuzufügen. Nachdem du deine Designs erneut aus dem Plugin hochgeladen hast, erscheinen sie in der Pixelay-Web-App als Dropdown-Liste.

> **Tip:** Um eine Umgebungs-URL zu entfernen, wähle sie im Dropdown aus, klick auf das Symbol **Delete selected URL** und bestätige mit **Delete**. Lade die Pixelay-Designs erneut hoch, damit die Änderung auch für den aktuellen Vergleichslink gilt.

### Vergleichs-URL erzeugen {#generating-your-comparison-url}

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

Sobald du die Figma-Frames ausgewählt hast, die du vergleichen möchtest, und ihnen ihre Website-URLs zugewiesen hast, klick im Pixelay-Plugin auf **Compare Designs** (der Button zeigt, wie viele Frames verglichen werden). Klick im Bereich **Compare Figma Designs** auf **Upload Designs**, um zu bestätigen und den Upload zu starten.

> **Tip:** Wenn **Compare Designs** nicht verfügbar ist, fahr mit der Maus darüber, um den Grund zu sehen: Gib zuerst eine Basis-URL ein oder hak mindestens einen Frame an. Im Free-Modus lassen sich nur Frames mit einer Breite von bis zu 430 px vergleichen. Dabei werden Bilder der ausgewählten Figma-Frames hochgeladen, und es wird eine URL erzeugt, die dich zur Pixelay-Web-App führt.

> **Warning:** **Wenn du eine Figma-Datei duplizierst, wird auch ihre URL kopiert.** Um für das Duplikat eine andere URL zu erzeugen, gib bei geöffnetem Plugin den Konami-Code ein (**Up**, **Up**, **Down**, **Down**, **Left**, **Right**, **Left**, **Right**, **B**, **A**). Pixelay erstellt dann eine neue URL, ohne die vorherige zu löschen.

> **Note:** Wenn das Hochladen oder Aktualisieren der Frames fehlschlägt, zeigt Pixelay im Plugin einen Fehler an und stoppt die Fortschrittsanzeige. Ein Upload-Fehler macht Frames oder Einstellungen, die bereits an die Vergleichsseite gesendet wurden, nicht rückgängig.

### Vergleichs-URL öffnen {#opening-your-comparison-url}

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

Wenn alle Frames hochgeladen sind, siehst du die Bestätigung **Designs Uploaded Successfully!**. Sie zeigt dir, dass die URL der Vergleichsseite einsatzbereit ist.

Klick entweder auf das Symbol **Copy link**, um die URL zu kopieren und in deinen Browser einzufügen (oder mit jemand anderem zu teilen), oder klick in der Bestätigung auf den Link **Comparison URL**. Damit öffnest du die Pixelay-Web-App in deinem Browser und kannst deine Figma-Designs mit deinen Entwicklungs-URLs vergleichen.

Hinweis: Damit du deine Designs mit Pixelay mit URLs vergleichen kannst, installiere bitte das [Pixelay-Chrome-Plugin](https://chrome.google.com/webstore/detail/pixelay-for-figma/gnbafbeabkbkecmbedfgebgboicpnkpp). Es ist auch in der Bestätigung des Plugins verlinkt.

#### Vergleichs-URL erneut aus dem Plugin aufrufen {#accessing-your-comparison-url-from-the-plugin-again}

Wenn du deine Vergleichs-URL bereits mit dem Plugin erstellt hast und sie noch einmal kopieren möchtest (ohne deine Designs erneut hochzuladen), klick im Pixelay-Plugin auf **Compare Designs**. Im Bereich **Compare Figma Designs** erscheint dann deine zuvor erstellte Vergleichs-URL. Um sie wieder zu verwenden, klick entweder auf das Symbol **Copy link**, um die URL zu kopieren und in deinen Browser einzufügen (oder mit jemand anderem zu teilen), oder klick im Bereich auf den Link **comparison URL**.

### Figma-Designs erneut zur Vergleichs-URL hochladen {#re-uploading-your-figma-designs-to-the-comparison-url}

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

Wenn du dein Design geändert hast, andere Figma-Frames ein- oder ausschließen oder Website- bzw. Seitenlinks in deiner Vergleichs-URL ändern möchtest, kannst du die ausgewählten Designs genauso erneut hochladen wie beim ersten Mal: Klick im Pixelay-Plugin auf **Compare Designs** und diesmal auf **Update Designs**.

> **Note:** **Deine Vergleichs-URL bleibt beim erneuten Hochladen gleich**. Jedes Mal, wenn du auf **Update Designs** klickst, werden die zuvor hochgeladenen Frames und Website-Links ersetzt, und die bereits erzeugte Pixelay-Vergleichs-URL wird mit deinen neuen Designs und Links aktualisiert.