--- url: "/pl/emailify/design/preview.md" description: "Okno podglądu w Emailify pozwala zobaczyć e-mail jako prawdziwy HTML i z nim pracować, zanim go wyeksportujesz." --- # Podgląd e-maila HTML w Figmie > Okno podglądu w Emailify pozwala zobaczyć e-mail jako prawdziwy HTML i z nim pracować, zanim go wyeksportujesz. [Video](/assets/videos/emailify/design/preview-email.mp4) Kliknięcie przycisku **Preview** w nagłówku wtyczki Emailify automatycznie generuje prawdziwy podgląd HTML Twojego e-maila bezpośrednio we wtyczce w Figmie. Dopóki okno podglądu jest otwarte, zmiany wprowadzane w warstwach Emailify w Figmie pojawiają się w podglądzie HTML na bieżąco. ## Korzystanie z kart panelu podglądu {#using-the-preview-panel-tabs} Panel podglądu ma cztery karty: - **HTML Preview** pokazuje bieżący responsywny HTML, aktualizuje się podczas edycji warstw w Figmie i zawiera prosty przełącznik podglądu trybu ciemnego. - **Preflight** sprawdza produkcyjny HTML pod kątem praktycznych problemów z tematem, preheaderem, dostępnością, linkami, obrazami, doręczaniem i przycinaniem w Gmailu. - **Test Send** przygotowuje produkcyjny HTML, aby można go było skopiować do [htmltest.email](https://htmltest.email/) w celu ręcznego testu w skrzynce odbiorczej. - **Email Previews** zamawia zrzuty ekranu z klientów poczty bezpośrednio w Emailify. Zobacz [Korzystanie z Email Previews we wtyczce](/pl/emailify/export/testing#using-email-previews-in-the-plugin). Preflight i Test Send korzystają z dostępu Emailify do produkcyjnego HTML, więc są dostępne z aktywną licencją Pro lub dopóki masz jeszcze bezpłatne próby Pro. Opcje testów w klientach poczty opisuje strona [Testowanie e-maili HTML przed wysyłką](/pl/emailify/export/testing). > **Info:** **GIF-y** są w trybie podglądu wyświetlane jako statyczne obrazy, aby podgląd ładował się szybciej (renderowanie GIF-ów trwa dłużej), ale w końcowych eksportach HTML z wtyczki będą animowane. > **Tip:** Gdy okno podglądu jest otwarte, możesz edytować dowolne nadpisania mobilne, klikając przycisk **Settings** w nagłówku panelu podglądu. ### Podgląd e-maila w różnych szerokościach urządzeń {#previewing-your-email-at-different-device-widths} Aby sprawdzić, jak e-mail wygląda w różnych szerokościach urządzeń, kliknij pole wyboru w nagłówku panelu podglądu i wybierz jedną z poniższych opcji: - Desktop & Mobile (widok hybrydowy) - Desktop (szerokość **726px**) - iPhone 17 Pro Max (szerokość **440px**) - iPhone 16 Pro Max (szerokość **430px**) - iPhone Air (szerokość **420px**) - Google Pixel (szerokość **412px**) - iPhone 17 (szerokość **402px**) - iPhone 16 (szerokość **393px**) - iPhone 13 Mini (szerokość **375px**) - iPhone 12 Mini (szerokość **360px**) - iPhone SE (szerokość **320px**) > **Note:** **Breakpoint mobilny e-maili**. E-maile HTML eksportowane z Emailify mają jeden „breakpoint”, ustawiany automatycznie według szerokości ramki desktopowej w Figmie. Na przykład jeśli ramka Emailify ma 600px, style i nadpisania mobilne zaczną działać od szerokości 599px w dół. > **Tip:** Zwykle zaleca się szerokość e-maila **od 600px do 640px**, ponieważ panele czytnika w niektórych klientach poczty lub aplikacjach mogą mieć mniej niż 700px szerokości i wyświetlać style mobilne zamiast układu desktopowego. ## Zmiany z Figmy na żywo w oknie podglądu HTML {#live-preview-changes-in-html-preview-window-from-figma} Przy otwartym podglądzie HTML możesz dalej edytować warstwy w Figmie i od razu widzieć zmiany w oknie podglądu, bez klikania za każdym razem **Refresh**. [Video](/assets/videos/emailify/design/live-preview-edits-desktop.mp4) ## Podgląd trybu ciemnego {#previewing-dark-mode} Włącz **Dark Mode** na pasku narzędzi HTML Preview, aby porównać bieżący e-mail z przybliżonym, lokalnym podglądem trybu ciemnego w Emailify. Podgląd stosuje ogólne, automatyczne przekształcenie kolorów, a nie kolory konkretnego klienta poczty. Selektor szerokości podglądu nadal działa, więc ten sam projekt w trybie ciemnym możesz sprawdzić w szerokości desktopowej lub mobilnej. Dark Mode jest niedostępny, gdy wybrany jest łączony widok hybrydowy **Desktop & Mobile**. Jeśli e-mail zawiera nadpisania trybu ciemnego Emailify, użyj sąsiedniego przełącznika **Overrides**, aby pokazać lub ukryć jego jawne style tła, tekstu, obramowania i podmiany obrazów. > **Warning:** Przełącznik jest pomocą projektową, a nie emulatorem klienta czy urządzenia. Klienty poczty stosują własne przekształcenia trybu ciemnego, a lokalny podgląd nie odtwarza filtrów treści po zalogowaniu, natywnych silników renderujących i fontów, interfejsu aplikacji, przetwarzania przy doręczaniu ani wszystkich różnic między klientami i ich wersjami. > **Warning:** [Obsługa stylów nadpisań trybu ciemnego](https://www.caniemail.com/features/css-at-media-prefers-color-scheme/) w klientach poczty jest ograniczona. Jawne nadpisania Emailify są przeznaczone dla obsługiwanych wersji Apple Mail; Gmail, Outlook, Windows Mail, Yahoo i inne klienty mogą automatycznie zmieniać kolory w inny sposób. ## Sprawdzanie rozmiaru pliku e-maila HTML w kilobajtach (kb) {#checking-the-file-size-of-your-html-email-in-kilobytes-kb} W nagłówku panelu podglądu zobaczysz liczbę oznaczającą całkowity rozmiar pliku HTML e-maila (tylko samego pliku `.html`, bez zasobów graficznych). Pomaga to sprawdzić, czy nie przekraczasz [limitu przycinania Gmaila, czyli 102 kB](https://mailchimp.com/help/gmail-is-clipping-my-email/). > **Warning:** **Jeśli rozmiar HTML przekracza 102 kB**, rozmiar pliku w oknie podglądu zostanie wyróżniony na żółto jako wizualny sygnał, że e-mail przekroczył ten limit. > **Tip:** [Zmniejszenie liczby warstw „Row” w e-mailu lub ich scalenie](/pl/emailify/design/optimizing-html-file-size) to najlepszy sposób na zmniejszenie rozmiaru pliku HTML. ## Podgląd bezpiecznych fontów zapasowych w e-mailu {#previewing-web-safe-font-fallbacks-in-your-email} [Video](/assets/videos/emailify/design/preview-font-fallbacks.mp4) Jeśli dla niestandardowych fontów webowych w e-mailu ustawiono bezpieczne [fonty zapasowe](/pl/emailify/design/fonts), możesz podejrzeć, jak będą wyglądać, włączając przełącznik **Show Fallback Fonts** na dole okna podglądu Emailify. ## Lintowanie (i automatyczne poprawianie) Auto Layout w warstwach Emailify {#auto-layout-linting-and-auto-fixing-for-emailify-layers} [Video](/assets/videos/emailify/design/linter-auto-fix.mp4) Podczas podglądu HTML w funkcji **Preview** wtyczka automatycznie sprawdza, czy warstwy dodane przez Emailify nadal mają prawidłowe właściwości Auto Layout w Figmie, które zapewniają wizualnie spójny eksport do HTML. Wtyczka pokaże listę warstw, w których trzeba poprawić właściwości Auto Layout (na przykład zmienić wysokość „Fixed” na „Hug”). Opcjonalnie możesz zastosować te zmiany automatycznie, klikając przycisk **Apply Fixes** – wtedy oznaczone warstwy w Figmie zostaną zaktualizowane o wymagane poprawki właściwości Auto Layout. ## Ręczne przenoszenie i porządkowanie warstw Emailify, które są w niewłaściwym miejscu {#manually-moving-and-resolving-emailify-layers-that-are-in-the-wrong-place} [Video](/assets/videos/emailify/design/manual-move-layers.mp4) Podczas podglądu HTML w funkcji **Preview** wtyczka automatycznie sprawdza, czy warstwy dodane przez Emailify nadal mają strukturę, w jakiej zostały utworzone (na przykład warstwa Row -> warstwy Column -> warstwy treści), co zapewnia wizualnie spójny eksport do HTML. Wtyczka pokaże listę warstw, które trzeba ręcznie przenieść, z instrukcją dla każdej z nich (na przykład „Move this Row layer back into the main Email frame”), oraz przycisk, który od razu przenosi Cię do warstwy na stronie i na liście warstw w Figmie, dzięki czemu łatwiej ją znaleźć i przenieść. > **Tip:** Możesz [masowo zastosować ustawienia](/pl/emailify/design/settings#apply-settings-in-bulk): otwórz **Settings**, a potem zaznacz w Figmie kilka warstw Emailify tego samego typu. Każde zmienione ustawienie zostanie zastosowane do wszystkich zaznaczonych warstw.