Designs im Figma-Plugin vorbereiten
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.
Ü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
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).
Ü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
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
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.
Installiere die Chrome-Erweiterung von Pixelay. Damit du deine Designs mit Pixelay mit URLs vergleichen kannst, installiere bitte das Pixelay-Chrome-Plugin. Es läuft im Hintergrund und startet Pixelay, sobald im Browser eine URL aus dem Plugin erkannt wird.
Verwende https://-URLs. Pixelay kann Live-Websites und lokale Entwicklungs-URLs nur über HTTPS laden.
Seitenspezifische Website-URLs hinzufügen
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)
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.
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.
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
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.
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.
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.
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
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. Es ist auch in der Bestätigung des Plugins verlinkt.
Vergleichs-URL erneut aus dem Plugin aufrufen
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
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.
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.