Poradnik wideo: eksport banerów z Figmy do HTML/GSAP

Ten film pokazuje, jak za pomocą wtyczki Bannerify w kilka sekund wyeksportować z Figmy gotowe do publikacji animowane banery do HTML/GreenSock (GSAP).

Poradnik wideo: eksport banerów HTML z Figmy na wiele platform reklamowych

Ten film pokazuje, jak za pomocą wtyczki Bannerify jednym kliknięciem wyeksportować animowane banery HTML z Figmy na wiele platform reklamowych.

Eksport do HTML

Gdy banery są gotowe i chcesz je wyeksportować do HTML, kliknij przycisk Export to HTML w nagłówku Bannerify. Otworzą się ustawienia eksportu HTML.

Po skonfigurowaniu wszystkich ustawień eksportu HTML kliknij przycisk Export n Banners na dole panelu eksportu, aby rozpocząć eksport banerów z Figmy do HTML.

Gdy Bannerify skończy przetwarzać banery, zobaczysz komunikat z potwierdzeniem. Plik .zip z wyeksportowanymi banerami pobierzesz, klikając przycisk Download your .zip file.

Nazwy plików eksportowanych banerów zachowują litery takie jak Å, Ä, Ö, å, ä, ö z nazw ramek w Figmie. Nazwy folderów eksportu i nazwa głównego pliku ZIP również obsługują litery ze znakami diakrytycznymi. Separatory ścieżek i nieobsługiwane znaki interpunkcyjne są nadal usuwane z nazw plików ramek.

Po pobraniu pliku .zip z Figmy na komputer otwórz w eksploratorze plików folder, w którym został zapisany. Kliknij dwukrotnie wyeksportowany plik .zip, aby rozpakować jego zawartość i korzystać z banerów w dowolny sposób.

Najpierw rozpakuj wyeksportowany plik .zip, zanim użyjesz banerów lub prześlesz je na platformę reklamową. Wyeksportowany plik .zip zawiera wszystkie pojedyncze banery (oraz zagnieżdżony folder _zips, w którym każdy baner jest już osobno spakowany i gotowy do przesłania na platformę reklamową).

Blokery reklam w przeglądarce mogą uniemożliwiać prawidłowe odtwarzanie lokalnych podglądów banerów. Jeśli wyeksportowany baner HTML wygląda na zamrożony, nie animuje się lub w podglądzie w przeglądarce działa inaczej, przed ponownym eksportem tymczasowo wyłącz rozszerzenia blokujące reklamy lub chroniące prywatność dla lokalnego pliku podglądu albo przetestuj go w innej przeglądarce.

Każdy format wyjściowy HTML ma własne wymagania dotyczące konfiguracji i pakowania. Przed eksportem skorzystaj z przewodnika Opcje platform reklamowych, aby wybrać właściwy format.

Zapisywanie pobranych plików z Figmy. Jeśli korzystasz z aplikacji desktopowej Figma, pojawi się okno pobierania pliku. Jeśli jednak używasz Figmy w przeglądarce internetowej, plik zostanie domyślnie automatycznie pobrany na komputer (zwykle do folderu Downloads / Pobrane).

Używaj tych samych ustawień eksportu w różnych plikach Figmy: gdy panel ustawień Export to HTML jest otwarty i aktywny, naciśnij Ctrl + Shift + E, aby zapisać bieżące ustawienia eksportu jako bannerify-export-settings.json. W innym pliku Figmy otwórz ten sam panel i naciśnij Ctrl + Shift + I, aby wskazać ten plik JSON i zastosować jego ustawienia do bieżącej strony. Zarówno w Windows, jak i na Macu używaj klawisza Control.

Automatyczne przycinanie zdjęć w maskach

Standardowy eksport HTML/CSS + GSAP może automatycznie usuwać nieużywane obszary odpowiednich zdjęć JPEG wewnątrz prostokątnych lub zaokrąglonych masek ruchu. Bannerify zachowuje cały obszar potrzebny podczas obsługiwanych animacji Zoom Pan Left i Zoom Pan Right, z niewielkim marginesem bezpieczeństwa. Optymalizacja może też obejmować nieruchome zdjęcia i animacje zanikania. Warstwy Figma i pozycje animacji pozostają bez zmian.

Obsługiwane są też kierunkowe Fade In/Out, Slide In/Out i Wipe In/Out, Instant Show/Hide oraz Scale Up/Down Center. Nakładające się animacje wejścia i wyjścia, które mogłyby łączyć transformacje, zachowują oryginalny obraz.

Ta optymalizacja jest automatyczna i niezależna od kompresji obrazów oraz docelowego rozmiaru plików. Obraz jest zastępowany tylko wtedy, gdy przycięty plik jest mniejszy. Oszczędność zależy od tego, jak duża część oryginalnego zdjęcia pozostaje poza maską przez całą animację.

Nieobsługiwane animacje, wstrzyknięty kod niestandardowy, Figma Motion, obrócone grafiki lub grafiki z efektami oraz inne formaty eksportu zachowują oryginalne obrazy. Jeśli przycinanie się nie powiedzie, Bannerify również użyje oryginału, aby eksport mógł być kontynuowany.

Warianty wygenerowane z arkusza kalkulacyjnego zachowują oryginalne obrazy, aby każdy wiersz używał właściwego zdjęcia. Zwykłe banery, w tym oryginalny baner główny, nadal mogą korzystać z automatycznego kadrowania.

Opcje standardowe

Dodawanie czarnej ramki 1px do wszystkich banerów

Włączenie opcji ramki 1px automatycznie dodaje obramowanie 1px solid black do kodu CSS wszystkich banerów. Przydaje się to na platformach reklamowych, które wolą (lub wymagają), aby banery miały czarne obramowanie 1px.

Dodawanie animacji wczytywania do wszystkich banerów

Włączenie opcji preloadera automatycznie dodaje animację wczytywania do kodu HTML wszystkich banerów. Animacja jest wyświetlana, dopóki wszystkie obrazy baneru nie wczytają się w przeglądarce.

Opcje odtwarzania

Ustawianie liczby odtworzeń banerów

Ta opcja określa, ile razy oś czasu wszystkich banerów ma zostać odtworzona od początku do końca. Domyślna wartość to 1, co oznacza, że banery odtworzą oś czasu animacji od początku do końca jeden raz.

Możesz zmienić tę liczbę, wpisując w polu liczbowym wyższą wartość, na przykład 6. Wtedy animacja na osi czasu wszystkich banerów zostanie odtworzona od początku do końca sześć razy.

Nieskończone zapętlanie banerów

Możesz sprawić, że oś czasu animacji we wszystkich banerach będzie odtwarzana w pętli bez końca, włączając opcję Infinitely loop all banners.

Osobne pliki .zip dla każdego baneru

Po włączeniu przełącznika Include individual .zip files for each banner wyeksportowany plik będzie zawierał dodatkowy folder _zips. Znajdą się w nim osobne pliki zip dla każdego wyeksportowanego baneru. Oszczędza to czas, jeśli Twoja platforma reklamowa wymaga przesłania osobnego pliku zip dla każdego baneru.

Opcjonalne dołączanie backup.jpg do plików zip. Jeśli chcesz, aby plik obrazu backup.jpg znalazł się w każdym pliku zip, włącz przełącznik Add "backup.jpg" to individual zip files. Jeśli ten przełącznik jest wyłączony przy osobnym pakowaniu banerów, a jednocześnie włączony jest przełącznik Add "backup.jpg", wszystkie obrazy zapasowe trafią też do folderu _backups w katalogu głównym głównego pliku .zip wyeksportowanego z Bannerify.

Wybór formatu wyjściowego HTML

Bannerify może eksportować HTML niezależny od platformy, paczki do przesłania na konkretne platformy, układy responsywne i kilka formatów zbiorczych. Każda opcja w Code Output Settings ma osobny przewodnik w sekcji Opcje platform reklamowych, z opisem konfiguracji, obsługi kliknięć, struktury paczki i wskazówkami dotyczącymi testowania.

Dołączanie i wykluczanie banerów z eksportu

Domyślnie eksport obejmuje wszystkie warstwy najwyższego poziomu w pliku Figmy, które zostały wczytane do Bannerify jako banery. Jeśli chcesz wykluczyć któreś banery (bez ponownego wczytywania zaznaczonych banerów), wyłącz przełącznik Include In Export w nagłówku osi czasu danego baneru. Ukryje to oś czasu tego baneru i wykluczy go ze wszystkich eksportów.

Eksport zminifikowanego kodu

Aby zoptymalizować rozmiar plików, Bannerify domyślnie minifikuje cały eksportowany kod i zapisuje jeden plik .html na każdy baner. Jeśli potrzebujesz bardziej czytelnego kodu lub podziału na osobne pliki .html, .css i .js, wyłącz przełącznik Minified w opcjach eksportu kodu.

Eksport tekstu jako znaczników akapitu zamiast obrazów SVG

Domyślnie wszystkie warstwy tekstowe na osi czasu Bannerify są eksportowane jako obrazy SVG (w znacznikach obrazów), ale opcjonalnie możesz wyeksportować je jako tekst sformatowany (w znacznikach akapitu), włączając przełącznik Export text as <p> tags instead of <svg>.

Zachowanie wybranych warstw tekstowych jako obrazów

Gdy opcja eksportu akapitów jest włączona, warstwy tekstowe zablokowane w Figmie zachowują format SVG/obrazu, zamiast stawać się edytowalnym tekstem HTML.

1. W Figmie zablokuj każdą warstwę tekstową, która ma pozostać grafiką. Zablokuj samą warstwę tekstową, a nie tylko grupę lub ramkę nadrzędną.
2. Warstwy tekstowe, które chcesz edytować w HTML, pozostaw odblokowane.
3. Włącz Export text as <p> tags instead of <svg> i wyeksportuj banery ponownie.

Na przykład pozostaw odblokowany symbol zastępczy nazwy dealera, a otaczający go tekst zablokuj. Symbol zastępczy pozostanie edytowalnym tekstem HTML, a zablokowany tekst trafi do zasobów graficznych. Zablokowanie nie usuwa grafiki z baneru ani nie zapewnia kontroli dostępu do wyeksportowanych plików. Odblokowana warstwa tekstowa przy następnym eksporcie znów może zostać wyeksportowana jako tekst sformatowany. Obecne zasady kwalifikowania tekstu i ograniczenia formatów nadal obowiązują.

Informacje o fontach marki w edytowalnym tekście znajdziesz w sekcji Dodawanie własnych fontów do edytowalnego tekstu HTML.