--- url: "/de/bannerify/design/variants.md" description: "Exportiere aus einem Figma-Banner-Set viele Varianten als HTML, GIF, MP4, WebM, APNG, WebP, Bild oder PDF – mit Zeilen aus CSV, XLSX oder ZIP." --- # Banner-Varianten aus Tabellendaten erstellen > Exportiere aus einem Figma-Banner-Set viele Varianten als HTML, GIF, MP4, WebM, APNG, WebP, Bild oder PDF – mit Zeilen aus CSV, XLSX oder ZIP. ### 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. [Embedded media](https://www.youtube-nocookie.com/embed/EiVk0G0nEU4) [Video](/assets/videos/bannerify/export/banner-spreadsheet-variants.mp4) 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 {#step-1-match-your-spreadsheet-headers-to-figma-layer-names} 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. > **Tip:** 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 {#supported-spreadsheet-cell-values} 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 {#step-2-upload-your-csv-xlsx-or-zip-file} Ö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 {#step-3-enable-variants-and-choose-which-rows-to-export} 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 {#missing-fonts-and-export-fallback-behavior} 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 {#automatic-variant-folder-and-file-naming} 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 {#customizing-export-folder-and-file-names} 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 {#using-spreadsheet-header-placeholders} 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 {#using-bannerify-s-built-in-placeholders} 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}` > **Tip:** 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 {#zip-structure-and-preview-page-behavior} 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 {#how-spreadsheet-media-files-are-packaged} 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 {#practical-tips} - 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.