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

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 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.

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ą.

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.

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ń

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)

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ół.

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

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.

Podgląd trybu ciemnego

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.

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.

Obsługa stylów nadpisań trybu ciemnego 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)

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.

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.

Zmniejszenie liczby warstw „Row” w e-mailu lub ich scalenie to najlepszy sposób na zmniejszenie rozmiaru pliku HTML.

Podgląd bezpiecznych fontów zapasowych w e-mailu

Jeśli dla niestandardowych fontów webowych w e-mailu ustawiono bezpieczne fonty zapasowe, 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

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

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ść.

Możesz masowo zastosować ustawienia: otwórz Settings, a potem zaznacz w Figmie kilka warstw Emailify tego samego typu. Każde zmienione ustawienie zostanie zastosowane do wszystkich zaznaczonych warstw.