---
url: "/pl/bannerify/design/variants.md"
description: "Bannerify eksportuje wiele wariantów banerów HTML, GIF, MP4, WebM, APNG, WebP, obrazów lub PDF z jednego zestawu banerów w Figmie, stosując wiersze z CSV, XLSX lub ZIP."
---

# Tworzenie wariantów banerów z danych z arkusza

> Bannerify eksportuje wiele wariantów banerów HTML, GIF, MP4, WebM, APNG, WebP, obrazów lub PDF z jednego zestawu banerów w Figmie, stosując wiersze z CSV, XLSX lub ZIP.

### Poradnik wideo: masowy eksport wariantów banerów z Figmy na podstawie arkusza

Ten film pokazuje, jak za pomocą wtyczki Bannerify masowo wyeksportować warianty banerów z Figmy na podstawie arkusza kalkulacyjnego do HTML lub wideo i GIF.
[Embedded media](https://www.youtube-nocookie.com/embed/EiVk0G0nEU4)

[Video](/assets/videos/bannerify/export/banner-spreadsheet-variants.mp4)

Bannerify może zamienić jeden wczytany zestaw banerów w wiele eksportowanych wariantów, stosując podczas eksportu po jednym wierszu arkusza kalkulacyjnego naraz. Bannerify nie synchronizuje arkusza z plikiem Figmy na stałe. Zamiast tego używa wybranych wierszy jako tymczasowych danych wejściowych eksportu, generuje każdy wariant baneru, a następnie pakuje te pliki do końcowego pliku `.zip`.

Warianty banerów działają z:

- eksportami banerów HTML;
- eksportami GIF, MP4, WebM, animowanych WebP i animowanych PNG;
- statycznymi eksportami JPG, PNG, WebP i PDF.

## 1. krok: dopasuj nagłówki arkusza do nazw warstw w Figmie {#step-1-match-your-spreadsheet-headers-to-figma-layer-names}

Pierwszy wiersz arkusza powinien zawierać nazwy warstw, które Bannerify ma podmienić podczas eksportu.

W przypadku warstw tekstowych zmień nazwy warstw tekstowych w Figmie tak, aby dokładnie odpowiadały nagłówkom arkusza.

W przypadku warstw z obrazami zmień nazwy warstw z wypełnieniem obrazem w Figmie tak, aby dokładnie odpowiadały nagłówkom arkusza, a potem wpisz w komórce arkusza URL obrazu, wartość `data:image/...` albo odwołanie do zasobu z pliku ZIP.

W przypadku warstw z osadzonymi multimediami zmień nazwę docelowej warstwy nietekstowej w Figmie tak, aby dokładnie odpowiadała nagłówkowi arkusza, a potem wpisz w komórce arkusza bezpośredni URL pliku `.mp4`, `.webm` lub `.json` albo odwołanie do pasującego pliku `.mp4`, `.webm` lub `.json` z przesłanego źródła ZIP. Podczas eksportu Bannerify potraktuje wartości wideo jako źródła osadzonego wideo, a wartości `.json` jako źródła osadzonych animacji Lottie.

Aby synchronizować style, zmień nazwę docelowej warstwy tak, aby dokładnie odpowiadała nagłówkowi arkusza, a potem wpisz w komórce arkusza prawidłowy ciąg deklaracji CSS, na przykład `color:#ffffff; font-size:48px;` lub `display:none;`.

Aby sterować widocznością, możesz też wpisać `_hide` lub `_show` w pasującej komórce arkusza, aby ukryć lub pokazać daną warstwę z Figmy podczas eksportu wariantów.

Oto prosty przykład:

| headline | cta | logo | badge |
| --- | --- | --- | --- |
| Kup teraz, zapłać później | Pobierz aplikację | logo-1.png | display:none; |
| Rozłóż płatność na raty | Dowiedz się więcej | logo-2.png | opacity:0.5; |
| Elastyczne możliwości zakupów | Zacznij teraz | logo-3.png | background-color:#111111; color:#ffffff; |

Każdy wiersz danych staje się jednym wariantem baneru.

> **Tip:** Jeśli zamiast zwykłego pliku `.csv` lub `.xlsx` prześlesz plik `.zip`, Bannerify użyje pierwszego znalezionego w nim pliku arkusza i może też odnaleźć dołączone obrazy oraz pliki multimedialne `.mp4`, `.webm` i `.json` z tego samego pliku ZIP według nazwy pliku lub ścieżki względnej.

## Obsługiwane wartości komórek arkusza {#supported-spreadsheet-cell-values}

Podczas eksportu wariantów Bannerify stosuje obecnie następujące typy wartości z arkusza:

- zwykły tekst dla pasujących warstw tekstowych w Figmie;
- odwołania do obrazów dla pasujących warstw z wypełnieniem obrazem:
  URL-e obrazów, wartości `data:image/...` lub odwołania do plików obrazów dołączonych do przesłanego pliku ZIP;
- bezpośrednie URL-e plików `.mp4`, `.webm` lub `.json` dla pasujących warstw z osadzonymi multimediami;
- odwołania do plików `.mp4`, `.webm` lub `.json` dołączonych do przesłanego pliku ZIP dla pasujących warstw z osadzonymi multimediami;
- ciągi deklaracji CSS dla pasujących warstw docelowych synchronizacji;
- polecenia widoczności `_hide` i `_show` dla pasujących warstw.

Jeśli chcesz sterować widocznością lub stylami z poziomu arkusza, użyj wartości CSS takich jak `display:none;`, `opacity:0;`, `left:20px;` lub `transform:translateX(40px);`.

Bannerify akceptuje obecnie w wartościach arkusza następujące właściwości CSS:

- `width`, `height`, `opacity`
- `background`, `background-image`, `background-color`
- `border-radius`, `border`, `border-left`, `border-right`, `border-top`, `border-bottom`, `border-color`, `border-width`
- `font-size`, `color`, `font-family`, `font-weight`, `text-transform`, `font-style`, `line-height`, `text-align`, `vertical-align`
- `display`, `flex-direction`, `gap`, `justify-content`, `align-items`
- `padding`, `padding-top`, `padding-right`, `padding-bottom`, `padding-left`
- `box-shadow`, `filter`, `transform`, `left`, `top`

## 2. krok: prześlij plik CSV, XLSX lub ZIP {#step-2-upload-your-csv-xlsx-or-zip-file}

Otwórz panel **Variants** w Bannerify i prześlij plik `.csv`, `.xlsx` lub `.zip` w sekcji **Data Source**.

Gdy Bannerify odczyta plik, po lewej stronie panelu pokaże podgląd aktywnego arkusza. Dzięki temu przed eksportem sprawdzisz, czy nagłówki i wartości w wierszach wyglądają prawidłowo.

Tabela podglądu wyróżnia wartości z obrazami miniaturami, pokazuje wartości wideo jako plakietki `Video Embed` lub `Video URL`, wyświetla deklaracje CSS jako tokeny stylów, a wartości `_hide` / `_show` – jako polecenia widoczności warstw, dzięki czemu przed eksportem szybko zauważysz wiersze z wartościami innymi niż tekst.

Jeśli później prześlesz nowy plik, Bannerify zastąpi bieżące źródło z pliku najnowszym.

## 3. krok: włącz warianty i wybierz wiersze do eksportu {#step-3-enable-variants-and-choose-which-rows-to-export}

Po wczytaniu arkusza włącz opcję **Enable Banner Variants During Exports**.

Za pomocą pól wyboru w tabeli możesz dokładnie wskazać, które wiersze mają zostać wyeksportowane jako warianty:

- pole wyboru w nagłówku tabeli zaznacza lub odznacza wszystkie wiersze;
- pole wyboru w dowolnym wierszu dołącza lub wyklucza dany wariant;
- podczas eksportu używane są tylko zaznaczone wiersze.

Bannerify zapamiętuje te wybory wierszy dla zapisanego źródła arkusza, więc po ponownym otwarciu wtyczki dołączone i wykluczone wiersze pozostają takie same.

## Brakujące fonty i eksport zastępczy {#missing-fonts-and-export-fallback-behavior}

Gdy warianty są włączone, Bannerify przed eksportem sprawdza wybrane banery pod kątem brakujących fontów.

Jeśli Bannerify znajdzie w Figmie warstwy z brakującymi fontami, wyświetli ostrzeżenie w panelu Variants. W takim przypadku Bannerify wyeksportuje oryginalne banery, zamiast próbować renderować uszkodzone warianty z arkusza.

## Automatyczne nazwy folderów i plików wariantów {#automatic-variant-folder-and-file-naming}

Jeśli zostawisz pole **Export Folder Structure Naming** puste, Bannerify automatycznie nazwie każdy eksportowany wariant.

Zasady automatycznego nazywania:

1. Oryginalne eksporty dołączone do wariantów z arkusza są grupowane w folderze `row-0` w przypadku małych arkuszy lub `row-000`, gdy łączna liczba wierszy wymaga dopełnienia zerami.
2. Ścieżka folderu wariantu korzysta z wartości `folder` z arkusza, jeśli taka istnieje.
3. Jeśli nie ma wartości `folder`, Bannerify używa nazw `row-1`, `row-2` itd. w przypadku mniejszych arkuszy, a w większych zestawach dopełnia je zerami, np. `row-001`, `row-002`.
4. Nazwa eksportowanego pliku korzysta z wartości `name` z arkusza, jeśli taka istnieje.
5. Jeśli nie ma wartości `name`, Bannerify zachowuje w eksporcie oryginalną nazwę baneru z Figmy.

Oznacza to, że przy pustym polu nazewnictwa mogą powstać na przykład takie ścieżki:

- `row-0/300x250_Homepage Hero`
- `product-launch/300x250_Homepage Hero`
- `row-003/300x250_Homepage Hero`

## Własne nazwy folderów i plików eksportu {#customizing-export-folder-and-file-names}

Możesz zastąpić automatyczne nazewnictwo, wpisując własny szablon w polu **Export Folder Structure Naming**.

Użyj jednej z postaci:

- `name-only-template`
- `folder/name-template`

Wszystko przed ostatnim znakiem `/` staje się ścieżką folderu wariantu. Wszystko po nim staje się nazwą eksportowanego pliku.

Jeśli wpiszesz tylko szablon nazwy, Bannerify użyje wynikowej wartości jako ścieżki eksportowanego elementu. W eksportach HTML `#{Item_Name}` tworzy folder, np. `summer-sale`, z plikiem `index.html` w środku. W eksportach obrazów lub wideo tworzy plik, np. `summer-sale.png`, `summer-sale.gif` lub `summer-sale.mp4`.

### Symbole zastępcze z nagłówków arkusza {#using-spreadsheet-header-placeholders}

Dowolny nagłówek arkusza możesz wykorzystać jako dynamiczny token, zapisując go w ten sposób:

- `#{headline}`
- `#{cta}`
- `#{campaign}`
- `#{product_name}`

Jeśli nagłówek zawiera spacje lub znaki interpunkcyjne, Bannerify obsługuje też jego znormalizowaną postać z podkreśleniami. Na przykład nagłówka `CTA Label` możesz użyć jako `#{CTA Label}` lub `#{cta_label}`.

### Wbudowane symbole zastępcze Bannerify {#using-bannerify-s-built-in-placeholders}

Bannerify obsługuje też kilka wbudowanych wartości:

- `#{row_number}` – numer bieżącego wiersza, zaczynając od `1`;
- `#{row_index}` – indeks wiersza liczony od zera;
- `#{figma_name}` – nazwa baneru w Figmie;
- `#{figma_width}` – szerokość baneru;
- `#{figma_height}` – wysokość baneru;
- `#{figma_size}` – rozmiar baneru, np. `300x250`;
- `#{source}` – nazwa źródła arkusza;
- `#{source_slug}` – nazwa źródła w postaci sluga;
- `#{platform}` – bieżąca platforma eksportu.

Przykłady:

- `#{campaign}/#{figma_size}_#{figma_name}`
- `#{row_number}_#{headline}`
- `exports/#{campaign}/#{figma_name}`
- `exports/#{row_number}_#{figma_size}`

> **Tip:** Jeśli nagłówki arkusza pokrywają się z nazwami wbudowanych tokenów, np. `name` lub `folder`, możesz jawnie odwołać się do surowej wartości z arkusza za pomocą `#{csv_name}` lub `#{csv_folder}`.

## Struktura pliku ZIP i strona podglądu {#zip-structure-and-preview-page-behavior}

Gdy warianty są włączone, Bannerify eksportuje każdy wiersz do osobnego folderu wariantu w końcowym pliku `.zip`.

W eksportach HTML wygenerowany plik podglądu `index.html` automatycznie wskazuje ścieżkę eksportu każdego wariantu baneru.

W eksportach opartych na canvasie, takich jak GIF, MP4, WebM, animowane WebP, animowane PNG i statyczne obrazy, plik podglądu `index.html` również stosuje te same zasady nazywania folderów i plików wariantów.

Dzięki temu strona podglądu pozostaje zsynchronizowana z:

- wybranymi wierszami arkusza;
- własnymi szablonami nazw folderów i plików;
- automatycznymi ścieżkami zastępczymi opartymi na `row`, `folder` lub `name`.

## Pakowanie plików multimedialnych z arkusza {#how-spreadsheet-media-files-are-packaged}

Gdy wiersz arkusza podmienia warstwę z osadzonymi multimediami, Bannerify obsługuje multimedia w zależności od typu źródła:

- bezpośrednie URL-e plików `.mp4`, `.webm` lub `.json` pozostają zdalnymi URL-ami w eksportowanych banerach HTML;
- pliki `.mp4`, `.webm` lub `.json` dołączone do pliku ZIP są kopiowane do folderu każdego eksportowanego baneru HTML i wskazywane lokalnie;
- w eksportach opartych na canvasie, takich jak GIF, MP4, WebM, animowane WebP i animowane PNG, Bannerify podczas renderowania odczytuje zdalny URL multimediów lub plik z ZIP, a potem używa tego tymczasowego źródła do eksportowanych klatek.

Bannerify stosuje te wartości multimediów z arkusza tylko podczas eksportu. Nie nadpisuje na stałe oryginalnego URL multimediów zapisanego w warstwie w Figmie.

## Praktyczne wskazówki {#practical-tips}

- Nagłówki arkusza powinny być krótkie i opisowe.
- Używaj pól wyboru wierszy, aby wykluczać robocze wiersze, zamiast je usuwać.
- Użyj źródła ZIP, jeśli chcesz dołączyć do arkusza lokalne obrazy lub lokalne pliki multimedialne `.mp4`, `.webm` lub `.json`.
- Używaj bezpośrednich URL-i multimediów, gdy pliki `.mp4`, `.webm` lub `.json` są już hostowane online.
- Do podmiany plików GIF używaj warstw z wypełnieniem obrazem; warianty osadzonych multimediów obsługują obecnie `.mp4`, `.webm` i `.json`.
- Zostaw pole nazewnictwa puste, chyba że potrzebujesz własnej struktury folderów.
- Jeśli wprowadzasz nowy szablon nazw, najpierw przetestuj jeden eksport.