Przygotowanie projektów we wtyczce do Figmy
Pixelay przesyła przez wtyczkę do Figmy obrazy ramek nadrzędnych najwyższego poziomu z bieżącej strony w Figmie, a następnie w aplikacji webowej Pixelay nakłada je na adresy URL odpowiadających im podstron Twojej strony.
Wymagane są ramki nadrzędne w Figmie. Aby porównywać projekty, strona w Figmie musi zawierać co najmniej jedną „ramkę nadrzędną”, czyli ramkę umieszczoną bezpośrednio na stronie.
Zaznaczanie ramek z Figmy do porównania
Na początek zaznacz ramki z projektu w Figmie, które chcesz porównać z adresami URL wdrożonej strony.
Pixelay wczyta wszystkie „ramki nadrzędne” do wtyczki jako listę projektów, które możesz porównać ze stroną. Kliknij pole wyboru lub miniaturę dowolnej ramki, aby ją zaznaczyć (ponowne kliknięcie usuwa zaznaczenie).
Zaznaczanie ramek nadrzędnych bezpośrednio w Figmie. Aby łatwiej wybrać ramki nadrzędne do porównania, kliknij lub zaznacz dowolne ramki na stronie w Figmie – lista dostępnych ramek we wtyczce Pixelay automatycznie zawęzi się do nich.
Odświeżanie ramek nadrzędnych z Figmy
Jeśli wtyczka Pixelay jest już uruchomiona, a chcesz dodać lub usunąć ramki nadrzędne na bieżącej stronie w Figmie, wprowadź potrzebne zmiany, a potem kliknij przycisk z ikoną Refresh frames obok liczby zaznaczonych ramek we wtyczce Pixelay.
Wpisywanie adresu URL strony
Domyślny adres URL, z którym chcesz porównać projekty, wpisz jako prawidłowy adres w polu Base Website URL u góry wtyczki Pixelay. Ten adres będzie domyślną stroną wczytywaną do porównania z zaznaczonymi projektami.
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.
Używaj adresów https://. Pixelay wczytuje opublikowane strony i lokalne adresy deweloperskie tylko przez HTTPS.
Dodawanie adresów URL konkretnych podstron
Jeśli porównujesz kilka ramek jednocześnie, możesz podać osobny adres URL dla każdej ramki. Na przykład dla projektu podstrony „O nas” możesz wpisać adres w rodzaju _https://yoursite.com/about/_. Taki adres zastępuje domyślny adres URL z paska narzędzi Pixelay.
Dodawanie adresów URL kilku środowisk (opcjonalnie)
Jeśli Twoja strona ma kilka środowisk, dodaj dodatkowy bazowy adres URL dla każdej wersji deweloperskiej, stagingowej lub produkcyjnej. Między tymi środowiskami przełączysz się w aplikacji webowej Pixelay.
Aby dodać kolejne adresy, kliknij przycisk z ikoną Show extra website URLs obok bazowego adresu strony, wpisz nowy adres w polu Add Extra Base URL (na przykład https://dev.yoursite.com lub https://test.yoursite.com) i kliknij przycisk Add URL, aby dodać go do listy bazowych adresów dodatkowych środowisk. Po ponownym przesłaniu projektów z wtyczki adresy te pojawią się na liście rozwijanej w aplikacji webowej Pixelay.
Aby usunąć adres środowiska, wybierz go z listy rozwijanej, kliknij ikonę Delete selected URL, a potem potwierdź przyciskiem Delete. Prześlij projekty Pixelay ponownie, aby zmiana objęła bieżący link do porównania.
Generowanie adresu URL porównania
Gdy zaznaczysz ramki z Figmy do porównania i przypiszesz im adresy URL strony, kliknij przycisk Compare Designs we wtyczce Pixelay (pokazuje on, ile ramek zostanie porównanych). W panelu Compare Figma Designs kliknij przycisk Upload Designs, aby potwierdzić i rozpocząć przesyłanie.
Jeśli przycisk Compare Designs jest niedostępny, najedź na niego kursorem, aby zobaczyć powód: najpierw wpisz bazowy adres URL strony albo zaznacz co najmniej jedną ramkę. W trybie darmowym można porównywać tylko ramki o szerokości do 430 px.
Duplikat pliku Figmy ma ten sam adres URL co oryginał. Aby wygenerować dla duplikatu inny adres, przy otwartej wtyczce wpisz kod Konami (Up, Up, Down, Down, Left, Right, Left, Right, B, A). Pixelay utworzy nowy adres URL, nie usuwając poprzedniego.
Jeśli przesyłanie lub odświeżanie ramek się nie powiedzie, Pixelay wyświetli błąd we wtyczce i zatrzyma wskaźnik postępu. Błąd przesyłania nie cofa ramek ani ustawień, które zostały już wysłane na stronę porównania.
Otwieranie adresu URL porównania
Po przesłaniu wszystkich ramek zobaczysz potwierdzenie Designs Uploaded Successfully!, które informuje, że adres URL strony porównania jest gotowy.
Kliknij przycisk z ikoną Copy link, aby skopiować adres i wkleić go w przeglądarce (albo komuś udostępnić), lub kliknij link Comparison URL w potwierdzeniu. Otworzy to aplikację webową Pixelay w przeglądarce, w której możesz zacząć porównywać projekty z Figmy z deweloperskimi adresami URL strony.
Pamiętaj, że aby porównywać projekty z adresami URL w Pixelay, musisz zainstalować wtyczkę Pixelay do Chrome. Link do niej znajdziesz też w potwierdzeniu we wtyczce.
Ponowny dostęp do adresu URL porównania z wtyczki
Jeśli adres URL porównania został już utworzony we wtyczce, a chcesz go ponownie skopiować (bez ponownego przesyłania projektów), kliknij przycisk Compare Designs we wtyczce Pixelay. W panelu Compare Figma Designs pojawi się utworzony wcześniej adres. Aby go użyć, kliknij przycisk z ikoną Copy link, aby skopiować adres i wkleić go w przeglądarce (albo komuś udostępnić), lub kliknij link comparison URL w panelu.
Ponowne przesyłanie projektów z Figmy pod adres URL porównania
Jeśli zaktualizujesz projekt, chcesz dodać lub pominąć inne ramki z Figmy albo zmienić adresy stron lub podstron w porównaniu, prześlij zaznaczone projekty ponownie pod ten sam adres URL porównania. Zrób to tak samo jak za pierwszym razem: kliknij przycisk Compare Designs we wtyczce Pixelay, ale tym razem wybierz przycisk Update Designs.
Adres URL porównania nie zmienia się po ponownym przesłaniu projektów. Każde kliknięcie przycisku Update Designs zastępuje wcześniej przesłane ramki i linki do stron, a wygenerowany wcześniej adres URL porównania Pixelay zostaje zaktualizowany o nowe projekty i linki.