---
url: "/pl/bannerify/export/html.md"
description: "Gdy skończysz animować warstwy na osi czasu, możesz wyeksportować banery jako animowane banery HTML."
---
# Eksport banerów do HTML
> Gdy skończysz animować warstwy na osi czasu, możesz wyeksportować banery jako animowane banery HTML.
### 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).
[Embedded media](https://www.youtube-nocookie.com/embed/SS2J6k5Wo7s)
### 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.
[Embedded media](https://www.youtube-nocookie.com/embed/Q16MPp9YKjg)
[Video](/assets/videos/bannerify/export/html-export.mp4)
## Eksport do HTML {#exporting-to-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.
> **Note:** **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ą).
> **Warning:** **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](/pl/bannerify/export/code-output), aby wybrać właściwy format.
> **Tip:** **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**).
> **Tip:** **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 {#automatic-cropping-of-masked-photos}
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](/pl/bannerify/export/banner-size-optimization). 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 {#standard-options}
### Dodawanie czarnej ramki 1px do wszystkich banerów {#adding-a-1px-black-border-to-all-banners}
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 {#adding-a-preloader-animations-to-all-banners}
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 {#playback-options}
### Ustawianie liczby odtworzeń banerów {#setting-the-number-of-times-to-play-through-banners}
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 {#infinitely-looping-your-banners}
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 {#include-individual-zip-files-for-each-banner}
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.
> **Info:** **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 {#choosing-an-html-output-format}
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](/pl/bannerify/export/code-output), z opisem konfiguracji, obsługi kliknięć, struktury paczki i wskazówkami dotyczącymi testowania.
## Dołączanie i wykluczanie banerów z eksportu {#including-or-excluding-banners-in-your-export}
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](/pl/bannerify/design/figma-frames#refreshing-or-re-loading-multiple-all-banners)), 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 {#minified-code-exports}
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 {#export-text-as-paragraph-tags-instead-of-svg-images}
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