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.

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

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.

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

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

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

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

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

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

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

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

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}

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

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

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

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