--- url: "/pl/pixelay/compare-designs.md" description: "Jak w aplikacji webowej Pixelay porównywać projekty z Figmy z działającymi adresami URL za pomocą nakładek, trybów i narzędzi." --- # Porównywanie projektów z Figmy z adresami URL stron w przeglądarce > Jak w aplikacji webowej Pixelay porównywać projekty z Figmy z działającymi adresami URL za pomocą nakładek, trybów i narzędzi. Gdy wygenerujesz adres URL we wtyczce Pixelay do Figmy, otwórz go w przeglądarce, aby zacząć korzystać z aplikacji webowej Pixelay. To w niej porównasz projekty przesłane przez wtyczkę do Figmy z adresami URL wersji deweloperskiej Twojej strony. Aplikacja webowa wczytuje każdy porównywany adres URL jako [iFrame](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe) i nakłada na niego Twoje projekty z Figmy. Rozmiar każdego przesłanego obrazu wyznacza szerokość i wysokość danego iFrame’a, dzięki czemu możesz sprawdzić „responsywność” wdrożonej strony względem docelowych projektów z Figmy. > **Note:** **Zainstaluj rozszerzenie Pixelay do Chrome**. Aby porównywać projekty z adresami URL w Pixelay, zainstaluj [wtyczkę Pixelay do Chrome](https://chrome.google.com/webstore/detail/pixelay-for-figma/gnbafbeabkbkecmbedfgebgboicpnkpp). Działa ona w tle i uruchamia Pixelay, gdy wykryje w przeglądarce adres URL z wtyczki. ## Przewijanie strony, aby zobaczyć wszystkie ramki {#scrolling-the-page-to-view-all-of-your-frames} [Video](/assets/videos/pixelay/compare/web-overview.mp4) Po stronie poruszasz się, przewijając ją w pionie i w poziomie (kółkiem myszy albo przeciągając paski przewijania). Przewijanie w lewo i w prawo pokazuje wszystkie przesłane ramki, a przewijanie w górę i w dół – całą zawartość każdej z nich. > **Tip:** Jeśli projekt w Pixelay ma więcej niż 20 ramek z Figmy, rozszerzenie do Chrome automatycznie przełącza się na wyświetlanie jednej ramki naraz, aby strona nie zwalniała przez wczytywanie wszystkich adresów URL jednocześnie. Między ramkami przełączasz się, wybierając dowolną z nich w panelu sterowania w prawym dolnym rogu ekranu. ## Przełączanie między projektem z Figmy a wdrożoną stroną {#toggling-between-the-figma-design-and-website-build-modes} [Video](/assets/videos/pixelay/compare/toggler.mp4) Aby szybko przełączać się między oryginalnym projektem z Figmy a wdrożoną stroną, klikaj przyciski z ikonami **Original Figma Design** i **Live Website Build** w panelu sterowania Pixelay. Każdy z nich włącza wybrany tryb, dzięki czemu możesz obejrzeć projekt i stronę osobno. > **Tip:** **Interakcja z podglądem działającej strony**. Po przełączeniu nakładki na **Live Website Build** możesz korzystać ze strony. Przydaje się to, gdy trzeba wypełnić pola formularza lub coś kliknąć, aby wygląd strony lepiej odpowiadał porównywanemu projektowi z Figmy. ## Tryb przezroczystej nakładki {#using-the-transparent-overlay-mode} [Video](/assets/videos/pixelay/compare/opacity-slide.mp4) Aby porównać projekty z Figmy i wdrożoną stronę przy różnych poziomach krycia, kliknij przycisk z ikoną **Transparent Overlay**. Włączy to tryb przezroczystej nakładki. Przeciągając suwak **Overlay Opacity**, ustawisz stopień przezroczystości między oryginalnym projektem a działającym adresem URL. ## Tryb nakładki z podzielonym ekranem {#using-the-split-screen-overlay-mode} [Video](/assets/videos/pixelay/compare/swiper.mp4) Aby porównać projekty z Figmy i wdrożoną stronę na podzielonym ekranie, kliknij przycisk z ikoną **Split Screen Overlay**. Włączy to tryb nakładki z podzielonym ekranem. Przeciągając niebieską **Split Line** pośrodku każdego projektu, ustawisz, jaka część oryginalnego projektu, a jaka działającego adresu URL ma być jednocześnie widoczna. ## Tryb nakładki różnic (blend-diff) {#using-the-blend-diff-overlay-mode} [Video](/assets/videos/pixelay/compare/diff.mp4) Aby porównać projekty z Figmy i wdrożoną stronę metodą mieszania różnic, kliknij przycisk z ikoną **Blend-Diff Overlay**. Włączy to tryb nakładki różnic. Przeciągając suwak **Overlay Opacity**, ustawisz stopień przezroczystości między oryginalnym projektem a działającym adresem URL. ## Tryb przeciąganej nakładki {#using-the-draggable-overlay-mode} [Video](/assets/videos/pixelay/compare/draggable.mp4) Aby ręcznie dopasować położenie nakładki dla wszystkich projektów, kliknij przycisk z ikoną **Draggable Overlay**. Włączy to tryb przeciąganej nakładki. Przeciągając suwak **Overlay Opacity**, ustawisz stopień przezroczystości między oryginalnym projektem a działającym adresem URL. ## Linijka do mierzenia pikseli {#using-the-measure-pixels-ruler} [Video](/assets/videos/pixelay/compare/measure.mp4) Aby zmierzyć linijką pikselową odległość między dowolnymi elementami na stronie, kliknij przycisk z ikoną **Measure Pixels**. Włączy to tryb mierzenia pikseli. Gdy ten tryb jest aktywny, zmierzysz odległość w pikselach, przeciągając kursor myszy między dowolnymi dwoma punktami na stronie. Przeciągając suwak **Overlay Opacity**, ustawisz stopień przezroczystości między oryginalnym projektem a działającym adresem URL. ## Przełączanie między adresami URL środowisk {#toggling-between-environment-urls} [Video](/assets/videos/pixelay/compare/select-environment-url.mp4) Jeśli przed przesłaniem projektów do porównania [dodasz we wtyczce Pixelay do Figmy dodatkowe adresy URL środowisk](/pl/pixelay/upload-designs#adding-multiple-environment-website-urls-optional), przełączysz się między nimi z listy rozwijanej **Change Environment Base URL** w panelu sterowania aplikacji webowej Pixelay. Spowoduje to automatyczną zamianę bazowego adresu URL dla wszystkich ramek w podglądach Pixelay. Na przykład wybranie `https://dev.yoursite.com` zmieni bazowy adres URL wszystkich adresów `https://www.yoursite.com` na `dev.yoursite.com`, także w adresach konkretnych podstron (ramka z Figmy z adresem strony `https://www.yoursite.com/about` wczyta wtedy `https://dev.yoursite.com/about`). ## Praca ze środowiskiem deweloperskim z hot reloadem {#using-with-a-hot-reload-enabled-development-environment} [Video](/assets/videos/pixelay/compare/hot-reload.mp4) Jeśli Twoje lokalne adresy URL deweloperskie korzystają z [Hot Module Replacement (HMR)](https://webpack.js.org/concepts/hot-module-replacement/), ramki w aplikacji webowej Pixelay będą się aktualizować automatycznie w czasie rzeczywistym (bo wskazują w iFrame’ach na Twoje adresy deweloperskie), bez odświeżania samego adresu aplikacji Pixelay. Wszystkie zmiany wprowadzone lokalnie w edytorze kodu pojawią się w aplikacji webowej Pixelay, gdy zapiszesz pliki, a HMR wstrzyknie zmiany do Twoich adresów URL.