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 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.
Zainstaluj rozszerzenie Pixelay do Chrome. Aby porównywać projekty z adresami URL w Pixelay, zainstaluj wtyczkę Pixelay do Chrome. Działa ona w tle i uruchamia Pixelay, gdy wykryje w przeglądarce adres URL z wtyczki.
Przewijanie strony, aby zobaczyć wszystkie ramki
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.
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ą
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.
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
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
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)
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
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
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
Jeśli przed przesłaniem projektów do porównania dodasz we wtyczce Pixelay do Figmy dodatkowe adresy URL środowisk, 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
Jeśli Twoje lokalne adresy URL deweloperskie korzystają z Hot Module Replacement (HMR), 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.