Poradnik wideo: animowane GIF-y z Figmy w eksporcie e-maili HTML
Ten film pokazuje, jak dodać animowane GIF-y do projektów e-maili i wyeksportować z Figmy gotowe do produkcji, responsywne e-maile HTML za pomocą wtyczki Emailify.
Przesyłanie animowanych GIF-ów wymaga licencji Emailify Pro.
Jeśli korzystasz z bezpłatnej wersji próbnej wtyczki, GIF-y zostaną przesłane jako obrazy statyczne. Możesz też użyć opcji Export HTML z przełącznikiem Upload ustawionym na off, aby wyeksportować i pobrać animowane pliki .gif razem z e-mailami HTML lokalnie.
Dodawanie animowanego GIF-a jako obrazu w treści warstwy Column
Możesz przeciągnąć plik .gif z komputera do dowolnej warstwy Column – zostanie dodany jako warstwa obrazu w treści w Figmie.
Aby zachować wysoką jakość GIF-a, zmieniaj rozmiar warstwy proporcjonalnie (przytrzymując klawisz Shift podczas zmiany rozmiaru warstwy w Figmie), tak aby zachować oryginalne proporcje. Dzięki temu Emailify może użyć w eksporcie oryginalnych danych pliku GIF.
Jeśli zmienisz proporcje warstwy w Figmie tak, że będą inne niż w oryginalnym GIF-ie, Emailify musi odtworzyć klatki GIF-a w zupełnie nowym pliku .gif, aby uwzględnić przycięty obszar obrazu (klienty poczty HTML nie obsługują przycinania w CSS). To oznacza większe pliki GIF i dłuższy eksport.
Dlaczego wyeksportowany GIF jest większy niż oryginalny?
Jeśli zmienisz proporcje warstwy GIF w Figmie, Emailify musi odtworzyć klatki GIF-a w nowym pliku .gif, aby wyeksportowany e-mail odpowiadał przyciętemu obszarowi obrazu. Klienty poczty HTML nie obsługują przycinania GIF-ów w CSS tak, jak pokazuje to podgląd w Figmie, więc odtworzenie klatek może zwiększyć rozmiar pliku i spowolnić eksport.
Aby wyeksportowany GIF miał rozmiar zbliżony do oryginalnego pliku, zmieniaj jego rozmiar proporcjonalnie i zachowaj oryginalne proporcje.
Możesz ustawić atrybut tekstu alternatywnego albo dodać do obrazów klikalny link URL za pomocą przycisku Settings w nagłówku wtyczki.
Emailify próbuje automatycznie wykryć, czy GIF ma przezroczyste tło. Jeśli Twój GIF wymaga przezroczystości, a wtyczka sama jej nie wykrywa, dodaj słowo Transparent w dowolnym miejscu nazwy warstwy w Figmie (na przykład My Layer Name - Transparent), aby wymusić eksport z przezroczystym tłem.
Format GIF obsługuje tylko krycie 0% albo 100%, bez wartości pośrednich. Animowany GIF może więc mieć całkowicie przezroczyste tło za elementami, które są w pełni nieprzezroczyste i widoczne. Warstwy muszą być albo całkowicie przezroczyste, albo nie: warstwy o kryciu poniżej 50% będą przezroczyste, a warstwy o kryciu powyżej 50% – nieprzezroczyste.
Dodawanie animowanego GIF-a jako obrazu tła warstwy Row, Hero lub Wrapper
Jeśli potrzebujesz animowanego GIF-a jako obrazu tła za prawdziwą treścią w formacie rich text, przeciągnij plik .gif z komputera na wypełnienie dowolnej ramki Row, Hero lub Wrapper w Figmie. Zostanie on ustawiony jako wypełnienie obrazem w tle ramki. Pozostałe wypełnienia Figmy w tej ramce (np. nakładki kolorów lub gradientów) również zostaną uwzględnione w końcowym eksporcie .gif.
Zaletą tego rozwiązania jest to, że warstwy treści wewnątrz ramki nadal będą renderowane w eksporcie e-maila HTML jako osobne warstwy z bogatą treścią, nad animowanym tłem GIF.
Emailify próbuje automatycznie wykryć, czy GIF ma przezroczyste tło. Jeśli Twój GIF wymaga przezroczystości, a wtyczka sama jej nie wykrywa, dodaj słowo Transparent w dowolnym miejscu nazwy warstwy w Figmie (na przykład My Layer Name - Transparent), aby wymusić eksport z przezroczystym tłem.
Format GIF obsługuje tylko krycie 0% albo 100%, bez wartości pośrednich. Animowany GIF może więc mieć całkowicie przezroczyste tło za elementami, które są w pełni nieprzezroczyste i widoczne. Warstwy muszą być albo całkowicie przezroczyste, albo nie: warstwy o kryciu poniżej 50% będą przezroczyste, a warstwy o kryciu powyżej 50% – nieprzezroczyste.
Animowane GIF-y w Outlooku: większość klientów poczty obsługuje animowane GIF-y, ale Outlook 2019 i starsze wersje wyświetlają tylko pierwszą klatkę GIF-a zamiast odtwarzać animację. Zadbaj, aby ta klatka zawierała kluczowy obraz lub tekst, tak by działała jako statyczna wersja zapasowa. W Outlooku z Office 365 GIF-y odtwarzają się automatycznie trzy razy, a potem zatrzymują się z przyciskiem odtwarzania, który pozwala obejrzeć je ponownie.