Sobald du deine URL im Pixelay-Figma-Plugin erzeugt hast, kannst du sie in deinem Browser öffnen und mit der Pixelay-Web-App arbeiten. In der Web-App vergleichst du die Designs, die du über das Figma-Plugin hochgeladen hast, mit den URLs deines Website-Entwicklungsbuilds.
Die Web-App lädt jede zu vergleichende URL als iFrame und legt deine Figma-Designs darüber. Die Größe jedes hochgeladenen Bilds bestimmt Breite und Höhe des jeweiligen iFrames. So kannst du das responsive Verhalten deines Website-Builds mit den vorgesehenen Designs aus Figma vergleichen.
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.
Durch die Seite scrollen, um alle Frames zu sehen
Du bewegst dich auf der Seite vollständig durch vertikales und horizontales Scrollen (mit dem Mausrad oder indem du die Scrollleisten anklickst und ziehst). Wenn du nach links und rechts scrollst, siehst du alle hochgeladenen Frames; wenn du nach oben und unten scrollst, siehst du den gesamten Inhalt des jeweiligen Frames.
Wenn dein Pixelay-Projekt mehr als 20 Figma-Frames enthält, zeigt die Chrome-Erweiterung automatisch nur noch einen Frame zum Vergleichen an, damit die Seite nicht langsamer wird, weil alle URLs gleichzeitig geladen werden. Zwischen den Frames wechselst du, indem du im Bedienfeld unten rechts auf dem Bildschirm einen deiner Figma-Frames auswählst.
Zwischen Figma-Design und Website-Build umschalten
Um schnell zwischen dem ursprünglichen Figma-Design und deinem Website-Build umzuschalten, klick im Pixelay-Bedienfeld auf die Symbole Original Figma Design und Live Website Build.
Mit jedem Klick schaltest du in den gewählten Modus und siehst die jeweilige Ansicht ohne die andere.
Mit der Live-Vorschau der Website interagieren. Wenn du den Overlay-Modus auf Live Website Build stellst, kannst du mit der Seite interagieren. Das ist praktisch, wenn du Formularfelder ausfüllen oder etwas anklicken musst, damit deine Live-Website optisch besser zu den Figma-Designs passt, mit denen du vergleichst.
Transparentes Overlay verwenden
Um deine Figma-Designs und deinen Website-Build mit unterschiedlicher Deckkraft zu vergleichen, klick auf das Symbol Transparent Overlay. Damit aktivierst du den transparenten Overlay-Modus.
Indem du den Regler Overlay Opacity anklickst, gedrückt hältst und ziehst, legst du fest, wie transparent das ursprüngliche Design über der Live-URL liegt.
Split-Screen-Overlay verwenden
Um deine Figma-Designs und deinen Website-Build im geteilten Bildschirm zu vergleichen, klick auf das Symbol Split Screen Overlay. Damit aktivierst du den Split-Screen-Overlay-Modus.
Indem du die blaue Split Line in der Mitte jedes Designs anklickst, gedrückt hältst und ziehst, legst du fest, wie viel vom ursprünglichen Design und wie viel von der Live-URL gleichzeitig zu sehen ist.
Differenz-Overlay verwenden
Um deine Figma-Designs und deinen Website-Build über eine Differenzansicht zu vergleichen, klick auf das Symbol Blend-Diff Overlay. Damit aktivierst du den Differenz-Overlay-Modus.
Indem du den Regler Overlay Opacity anklickst, gedrückt hältst und ziehst, legst du fest, wie transparent das ursprüngliche Design über der Live-URL liegt.
Verschiebbares Overlay verwenden
Um die Position des Overlays für alle deine Designs von Hand anzupassen, klick auf das Symbol Draggable Overlay. Damit aktivierst du den Modus für das verschiebbare Overlay.
Indem du den Regler Overlay Opacity anklickst, gedrückt hältst und ziehst, legst du fest, wie transparent das ursprüngliche Design über der Live-URL liegt.
Pixel-Lineal verwenden
Um den Abstand zwischen beliebigen Elementen auf deiner Seite mit einem Pixel-Lineal zu messen, klick auf das Symbol Measure Pixels. Damit aktivierst du den Messmodus.
Solange dieser Modus aktiv ist, misst du den Abstand in Pixeln, indem du mit gedrückter Maustaste den Mauszeiger zwischen zwei beliebigen Punkten auf der Seite ziehst.
Indem du den Regler Overlay Opacity anklickst, gedrückt hältst und ziehst, legst du fest, wie transparent das ursprüngliche Design über der Live-URL liegt.
Zwischen Umgebungs-URLs wechseln
Wenn du vor dem Hochladen deiner Designs im Pixelay-Figma-Plugin weitere Umgebungs-URLs hinzugefügt hast, kannst du im Bedienfeld der Pixelay-Web-App über das Dropdown Change Environment Base URL zwischen ihnen wechseln.
Damit wird die Basis-URL aller Frames in deinen Pixelay-Vorschauen automatisch ausgetauscht. Wählst du zum Beispiel https://dev.yoursite.com, erhalten alle https://www.yoursite.com-URLs die Basis-URL dev.yoursite.com, auch seitenspezifische URLs (ein Figma-Frame mit der Seiten-URL https://www.yoursite.com/about lädt dann zum Beispiel stattdessen https://dev.yoursite.com/about).
Mit einer Entwicklungsumgebung mit Hot Reload verwenden
Wenn deine lokalen Entwicklungs-URLs mit Hot Module Replacement (HMR) laufen, aktualisieren sich die Frames in der Pixelay-Web-App automatisch in Echtzeit (weil sie in iFrames auf deine Entwicklungs-URLs zeigen), ohne dass du die URL der Pixelay-Web-App selbst neu laden musst.
Alle Änderungen, die du lokal in deinem Code-Editor vornimmst, erscheinen in der Pixelay-Web-App, sobald du die Dateien speicherst und HMR die Änderungen in deine URLs einspielt.