Wtyczka Weblify do Figmy odsyła do darmowego rozszerzenia Weblify do Chrome, które służy do importu stron internetowych. Rozszerzenie działa bezpośrednio w przeglądarce, także na stronach, które korzystają z Twojego bieżącego logowania lub sesji przeglądarki.
Importowanie strony internetowej
- Zainstaluj rozszerzenie Weblify do Chrome.
- Otwórz w Chrome stronę, którą chcesz skopiować.
- Kliknij ikonę rozszerzenia Weblify, aby otworzyć jego pasek narzędzi na stronie.
- Zostaw Current Window Size albo otwórz ustawienie rozmiaru i wybierz jeden lub kilka rozmiarów przechwytywania.
- Wybierz Copy page, aby skopiować całą stronę, lub Pick element, aby wybrać jeden element.
- Poczekaj na potwierdzenie Copied to clipboard. Przy kopiowaniu strony pozwól Weblify dokończyć przewijanie i przygotowanie treści.
- Wróć do pliku w Figmie i wklej skrótem Command + V na macOS lub Ctrl + V w systemie Windows.
Możesz też wybrać Import website z menu ⋯ we wtyczce Weblify do Figmy, a następnie Download the Chrome Extension.
Wybór rozmiarów przechwytywania
Otwórz ustawienie rozmiaru obok logo Weblify, aby zobaczyć Capture sizes. Pokazuje ono wybrany rozmiar albo liczbę, na przykład 2 sizes, gdy wybrano kilka.
| Rozmiar | Viewport przeglądarki |
|---|---|
| Current Window Size | Szerokość i wysokość obszaru treści bieżącego okna przeglądarki. Wymiary aktualizują się, gdy zmieniasz rozmiar okna. |
| Desktop | 1440 × 900 pikseli |
| Tablet | 768 × 1024 pikseli |
| Mobile | 390 × 844 pikseli |
| Custom | Wpisz szerokość od 280–2560 pikseli i wysokość od 320–2400 pikseli. |
Zaznacz kilka pól wyboru, aby skopiować do Figmy osobne, nazwane ramki ułożone obok siebie. Co najmniej jeden rozmiar zawsze pozostaje zaznaczony. Twój wybór zostaje zachowany po użyciu Restart, dopóki nie przeładujesz strony.
Copy page obejmuje pełną wysokość strony przy każdej wybranej szerokości. Ustawienie wysokości określa viewport używany do ułożenia strony; nie przycina wyniku do tej wysokości. Pick element kopiuje wybrany element tak, jak wygląda w każdym wybranym rozmiarze.
Wybierz samo Current Window Size, aby przechwycić aktywną stronę dokładnie w jej bieżącym układzie. Pozostałe rozmiary ponownie układają kopię strony, więc treść sterowana przez JavaScript, treść osadzona lub grafika canvas mogą się różnić.
Wczytywanie treści przed kopiowaniem
Copy page przed przechwyceniem automatycznie przewija stronę. Dzięki temu obrazy ładowane leniwie i sekcje pojawiające się podczas przewijania mają szansę się wczytać. Następnie Weblify przywraca pierwotną pozycję przewinięcia i przechwytuje przygotowaną stronę w wybranych rozmiarach.
Przygotowanie ma limit czasu i przewijania, aby strony z nieskończonym strumieniem treści nie wczytywały się w nieskończoność. Bardzo wolno ładująca się treść, dalsze pozycje nieskończonego strumienia lub treść, którą strona usuwa podczas przewijania, mogą nadal nie zostać skopiowane. Pick element nie przewija najpierw strony automatycznie.
Jeśli czegoś brakuje, przewiń do tego miejsca samodzielnie, poczekaj, aż treść się pojawi, i użyj Pick element przy zaznaczonym wyłącznie Current Window Size.
Wybór elementu
Wybierz Pick element, a następnie najedź kursorem na stronę i kliknij element, który chcesz skopiować. Przed skopiowaniem możesz przyciskami w górę i w dół przejść do elementu nadrzędnego lub podrzędnego.
Jeśli wybrany element jest ukryty w którymś z wybranych rozmiarów, Weblify zgłosi błąd zamiast kopiować pustą ramkę. Wybierz rozmiar, w którym element jest widoczny, i spróbuj ponownie.
Po udanym skopiowaniu wybierz Restart, aby wrócić do paska narzędzi z zachowanymi rozmiarami, albo zamknij powiadomienie z potwierdzeniem.
Wewnętrzne strony przeglądarki i Chrome Web Store nie pozwalają rozszerzeniom wstawiać elementów sterujących na stronę. Zanim klikniesz ikonę rozszerzenia Weblify, otwórz kartę ze zwykłą stroną internetową.