--- url: "/de/pixelay/compare-designs.md" description: "So vergleichst du in der Pixelay-Web-App Figma-Designs mit Live-URLs – mit Overlays, Vergleichsmodi und Werkzeugen." --- # Figma-Designs im Browser mit echten Website-URLs vergleichen > So vergleichst du in der Pixelay-Web-App Figma-Designs mit Live-URLs – mit Overlays, Vergleichsmodi und Werkzeugen. 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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/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. > **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. ## Durch die Seite scrollen, um alle Frames zu sehen {#scrolling-the-page-to-view-all-of-your-frames} [Video](/assets/videos/pixelay/compare/web-overview.mp4) 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. > **Tip:** 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 {#toggling-between-the-figma-design-and-website-build-modes} [Video](/assets/videos/pixelay/compare/toggler.mp4) 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. > **Tip:** **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 {#using-the-transparent-overlay-mode} [Video](/assets/videos/pixelay/compare/opacity-slide.mp4) 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 {#using-the-split-screen-overlay-mode} [Video](/assets/videos/pixelay/compare/swiper.mp4) 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 {#using-the-blend-diff-overlay-mode} [Video](/assets/videos/pixelay/compare/diff.mp4) 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 {#using-the-draggable-overlay-mode} [Video](/assets/videos/pixelay/compare/draggable.mp4) 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 {#using-the-measure-pixels-ruler} [Video](/assets/videos/pixelay/compare/measure.mp4) 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 {#toggling-between-environment-urls} [Video](/assets/videos/pixelay/compare/select-environment-url.mp4) Wenn du vor dem Hochladen deiner Designs im Pixelay-Figma-Plugin [weitere Umgebungs-URLs hinzugefügt hast](/de/pixelay/upload-designs#adding-multiple-environment-website-urls-optional), 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 {#using-with-a-hot-reload-enabled-development-environment} [Video](/assets/videos/pixelay/compare/hot-reload.mp4) Wenn deine lokalen Entwicklungs-URLs mit [Hot Module Replacement (HMR)](https://webpack.js.org/concepts/hot-module-replacement/) 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.