Video-Tutorial: Banner-Varianten aus einer Tabelle gebündelt aus Figma exportieren

Dieses Video zeigt, wie du mit dem Plugin Bannerify Banner-Varianten aus einer Tabelle gebündelt aus Figma als HTML oder Video/GIF exportierst.

Bannerify kann aus einem geladenen Banner-Set viele exportierte Varianten machen, indem es beim Export jeweils eine Tabellenzeile anwendet. Bannerify synchronisiert die Tabelle nicht dauerhaft in deine Figma-Datei. Stattdessen nutzt es die ausgewählten Zeilen als vorübergehende Eingaben für den Export, erzeugt jede Banner-Variante und packt die Dateien dann in deine finale .zip-Datei.

Banner-Varianten funktionieren mit:

• HTML-Banner-Exporten
• Exporten als GIF, MP4, WebM, animiertes WebP und animiertes PNG
• statischen Exporten als JPG, PNG, WebP und PDF

Schritt 1: Tabellenüberschriften an die Namen der Figma-Ebenen anpassen

Die erste Zeile deiner Tabelle sollte die Namen der Ebenen enthalten, die Bannerify beim Export ersetzen soll.

Benenne Textebenen in Figma so um, dass sie exakt den Tabellenüberschriften entsprechen.

Benenne Ebenen mit Bildfüllung in Figma so um, dass sie exakt den Tabellenüberschriften entsprechen, und trag dann in die Tabellenzelle eine Bild-URL, einen data:image/...-Wert oder einen Verweis auf ein Asset in einer ZIP-Datei ein.

Für eingebettete Medienebenen benennst du die gewünschte Figma-Ebene (keine Textebene) so um, dass sie exakt der Tabellenüberschrift entspricht. Trag dann in die Tabellenzelle entweder eine direkte .mp4-, .webm- oder .json-URL ein oder einen Verweis auf eine passende .mp4-, .webm- oder .json-Datei aus einer hochgeladenen ZIP-Quelle. Bannerify behandelt Videowerte beim Export als eingebettete Videoquellen und .json-Werte als eingebettete Lottie-Quellen.

Für die Stil-Synchronisierung benennst du die gewünschte Ebene so um, dass sie exakt der Tabellenüberschrift entspricht, und trägst in die Tabellenzelle eine gültige CSS-Deklaration ein, etwa color:#ffffff; font-size:48px; oder display:none;.

Zur Steuerung der Sichtbarkeit kannst du auch _hide oder _show in eine passende Tabellenzelle schreiben, um diese Figma-Ebene beim Export der Varianten aus- oder einzublenden.

Hier ein einfaches Beispiel:

headline	cta	logo	badge
Shop now pay later	Download the app	logo-1.png	display:none;
Split your payments	Learn more	logo-2.png	opacity:0.5;
Flexible spending power	Get started	logo-3.png	background-color:#111111; color:#ffffff;

Jede Datenzeile wird zu einer Banner-Variante.

Wenn du statt einer einfachen .csv- oder .xlsx-Datei eine .zip-Datei hochlädst, nutzt Bannerify die erste Tabellendatei, die es in der ZIP-Datei findet. Außerdem kann es mitgelieferte Bilder sowie .mp4-, .webm- und .json-Mediendateien aus derselben ZIP-Datei über Dateiname oder relativen Pfad zuordnen.

Unterstützte Zellenwerte

Bannerify wendet beim Export der Varianten derzeit diese Arten von Tabellenwerten an:

• reine Textwerte für passende Textebenen in Figma
• Bildverweise für passende Ebenen mit Bildfüllung: Bild-URLs, data:image/...-Werte oder Verweise auf Bilddateien in einer hochgeladenen ZIP-Datei
• direkte .mp4-, .webm- oder .json-URLs für passende eingebettete Medienebenen
• Verweise auf .mp4-, .webm- oder .json-Dateien in einer hochgeladenen ZIP-Datei für passende eingebettete Medienebenen
• CSS-Deklarationen für passende Ziel-Ebenen der Synchronisierung
• die Sichtbarkeitsbefehle _hide und _show für passende Ebenen

Wenn du Sichtbarkeit oder Stil aus der Tabelle steuern willst, nutze CSS-Werte wie display:none;, opacity:0;, left:20px; oder transform:translateX(40px);.

Bannerify akzeptiert in Tabellenwerten derzeit diese CSS-Eigenschaften:

• 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

Schritt 2: CSV-, XLSX- oder ZIP-Datei hochladen

Öffne in Bannerify das Panel Variants und lade im Bereich Data Source eine .csv-, .xlsx- oder .zip-Datei hoch.

Nachdem Bannerify die Datei gelesen hat, zeigt es links im Panel eine Vorschau der aktiven Tabelle. So kannst du vor dem Export prüfen, ob Überschriften und Zeilenwerte stimmen.

Die Vorschautabelle zeigt Bildwerte mit Miniaturbildern, Videowerte als Badges Video Embed oder Video URL, CSS-Deklarationen als Stil-Tokens und _hide/_show-Werte als Sichtbarkeitsbefehle für Ebenen. So erkennst du Zeilen mit anderen Inhalten als Text vor dem Export auf einen Blick.

Wenn du später eine neue Datei hochlädst, ersetzt Bannerify die aktuelle dateibasierte Quelle durch die neueste.

Schritt 3: Varianten aktivieren und die zu exportierenden Zeilen wählen

Sobald eine Tabelle geladen ist, schalte Enable Banner Variants During Exports ein.

Mit den Kontrollkästchen in der Tabelle legst du genau fest, welche Zeilen als Varianten exportiert werden:

• Mit dem Kontrollkästchen im Tabellenkopf wählst du alle Zeilen aus oder ab.
• Mit dem Kontrollkästchen einer Zeile schließt du diese einzelne Variante ein oder aus.
• Beim Export werden nur angehakte Zeilen verwendet.

Bannerify merkt sich diese Zeilenauswahl für die gespeicherte Tabellenquelle. Wenn du das Plugin wieder öffnest, bleiben ein- und ausgeschlossene Zeilen also unverändert.

Fehlende Schriften und Ausweichverhalten beim Export

Wenn Varianten aktiviert sind, prüft Bannerify die ausgewählten Banner vor dem Export auf fehlende Schriften.

Findet Bannerify in Figma Ebenen mit fehlenden Schriften, warnt es dich im Panel Variants. In diesem Fall exportiert Bannerify stattdessen die Original-Banner, statt fehlerhafte Varianten aus der Tabelle zu rendern.

Automatische Benennung von Variantenordnern und Dateien

Wenn du Export Folder Structure Naming leer lässt, benennt Bannerify jede exportierte Variante automatisch.

Die automatischen Regeln sind:

1. Original-Exporte, die zusammen mit den Tabellenvarianten ausgegeben werden, landen bei kleinen Tabellen im Ordner row-0 oder in row-000, wenn die Gesamtzahl der Zeilen führende Nullen erfordert.
2. Der Ordnerpfad der Variante nutzt den Wert folder aus der Tabelle, falls vorhanden.
3. Gibt es keinen folder-Wert, nutzt Bannerify bei kleineren Tabellen row-1, row-2 usw. und bei größeren Sets Namen mit führenden Nullen wie row-001, row-002.
4. Der Name der exportierten Datei nutzt den Wert name aus der Tabelle, falls vorhanden.
5. Gibt es keinen name-Wert, behält Bannerify für den Export den ursprünglichen Namen des Figma-Banners.

Ein leeres Benennungsfeld kann also Pfade wie diese ergeben:

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

Namen von Exportordnern und Dateien anpassen

Du kannst die automatische Benennung überschreiben, indem du eine eigene Vorlage in Export Folder Structure Naming einträgst.

Nutze entweder:

• name-only-template
• folder/name-template

Alles vor dem letzten / wird zum Ordnerpfad der Variante, alles danach zum Namen der exportierten Datei.

Wenn du nur eine Namensvorlage einträgst, nutzt Bannerify den aufgelösten Wert als Pfad des exportierten Elements. Bei HTML-Exporten erzeugt #{Item_Name} einen Ordner wie summer-sale mit der index.html darin. Bei Bild- oder Videoexporten entsteht eine Datei wie summer-sale.png, summer-sale.gif oder summer-sale.mp4.

Platzhalter aus Tabellenüberschriften nutzen

Du kannst jede Tabellenüberschrift als dynamisches Token verwenden, indem du sie so einschließt:

• #{headline}
• #{cta}
• #{campaign}
• #{product_name}

Enthält eine Überschrift Leerzeichen oder Satzzeichen, unterstützt Bannerify auch die normalisierte Form mit Unterstrichen. Eine Überschrift CTA Label kannst du zum Beispiel als #{CTA Label} oder als #{cta_label} verwenden.

Integrierte Platzhalter von Bannerify nutzen

Bannerify unterstützt außerdem einige integrierte Werte:

• #{row_number} für die aktuelle Zeilennummer, beginnend bei 1
• #{row_index} für den nullbasierten Zeilenindex
• #{figma_name} für den Namen des Figma-Banners
• #{figma_width} für die Breite des Banners
• #{figma_height} für die Höhe des Banners
• #{figma_size} für die Bannergröße, etwa 300x250
• #{source} für den Namen der Tabellenquelle
• #{source_slug} für eine Slug-Version des Quellnamens
• #{platform} für die aktuelle Exportplattform

Beispiele:

• #{campaign}/#{figma_size}_#{figma_name}
• #{row_number}_#{headline}
• exports/#{campaign}/#{figma_name}
• exports/#{row_number}_#{figma_size}

Wenn sich Tabellenüberschriften mit integrierten Token-Namen überschneiden, etwa name oder folder, kannst du den Rohwert aus der Tabelle ausdrücklich mit #{csv_name} oder #{csv_folder} ansprechen.

ZIP-Struktur und Verhalten der Vorschauseite

Wenn Varianten aktiviert sind, exportiert Bannerify jede Zeile in einen eigenen Variantenordner in der finalen .zip-Datei.

Bei HTML-Exporten verweist die erzeugte Vorschauseite index.html automatisch auf den Exportpfad jedes Varianten-Banners.

Bei Canvas-basierten Exporten wie GIF, MP4, WebM, animiertem WebP, animiertem PNG und statischen Bildexporten folgt die Vorschauseite index.html denselben Regeln für Variantenordner und Dateinamen.

Deine Vorschauseite bleibt also synchron mit:

• den ausgewählten Tabellenzeilen
• eigenen Vorlagen für Ordner- und Dateinamen
• den automatischen Ausweichpfaden auf Basis von row, folder oder name

So werden Mediendateien aus der Tabelle verpackt

Wenn eine Tabellenzeile eine eingebettete Medienebene austauscht, behandelt Bannerify die Medien je nach Quelltyp:

• Direkte .mp4-, .webm- oder .json-URLs bleiben in exportierten HTML-Bannern Remote-URLs.
• In der ZIP-Datei mitgelieferte .mp4-, .webm- oder .json-Dateien werden in den Ordner jedes exportierten HTML-Banners kopiert und lokal referenziert.
• Bei Canvas-basierten Exporten wie GIF, MP4, WebM, animiertem WebP und animiertem PNG liest Bannerify beim Rendern entweder die Remote-URL oder die Mediendatei aus der ZIP-Datei und nutzt diese vorübergehende Medienquelle für die exportierten Frames.

Bannerify wendet diese Medienwerte aus der Tabelle nur beim Export an. Die ursprüngliche Medien-URL, die an deiner Figma-Ebene gespeichert ist, wird nicht dauerhaft überschrieben.

Praktische Tipps

• Halte deine Tabellenüberschriften kurz und aussagekräftig.
• Schließ Entwurfszeilen über die Kontrollkästchen aus, statt sie zu löschen.
• Nutze eine ZIP-Quelle, wenn du eine Tabelle zusammen mit lokalen Bildern oder lokalen .mp4-, .webm- oder .json-Mediendateien bündeln willst.
• Nutze direkte Medien-URLs, wenn deine .mp4-, .webm- oder .json-Dateien bereits online gehostet sind.
• Nutze Ebenen mit Bildfüllung, um GIF-Dateien auszutauschen; eingebettete Medienvarianten unterstützen derzeit .mp4, .webm und .json.
• Lass das Benennungsfeld leer, es sei denn, du brauchst eine eigene Ordnerstruktur.
• Teste zuerst einen einzelnen Export, wenn du eine neue Namensvorlage einführst.