Video-Tutorial: Banner aus Figma als HTML/GSAP exportieren

Dieses Video zeigt, wie du mit dem Plugin Bannerify produktionsreife animierte Banner in Sekunden aus Figma als HTML/GreenSock (GSAP) exportierst.

Video-Tutorial: HTML-Banner aus Figma für mehrere Werbeplattformen exportieren

Dieses Video zeigt, wie du mit dem Plugin Bannerify animierte HTML-Banner mit einem Klick aus Figma für mehrere Werbeplattformen exportierst.

Als HTML exportieren

Wenn du mit deinen Bannern zufrieden bist und sie als HTML exportieren möchtest, klick im Header von Bannerify auf den Button Export to HTML. Damit öffnen sich die HTML-Exporteinstellungen.

Wenn du alle HTML-Exporteinstellungen festgelegt hast, klick unten im Exportpanel auf den Button Export n Banners, um deine Banner aus Figma als HTML zu exportieren.

Nachdem Bannerify deine Banner verarbeitet hat, erscheint eine Bestätigung. Klick auf den Button Download your .zip file, um die .zip-Datei mit deinen exportierten Bannern herunterzuladen.

Die Dateinamen exportierter Banner behalten Buchstaben wie Å, Ä, Ö, å, ä, ö aus den Namen deiner Figma-Frames. Auch Namen von Exportordnern und der Name der Haupt-ZIP-Datei unterstützen Buchstaben mit Akzenten. Pfadtrennzeichen und nicht unterstützte Satzzeichen werden weiterhin aus den Frame-Dateinamen entfernt.

Nachdem du die .zip-Datei aus Figma auf deinen Computer heruntergeladen hast, öffne im Datei-Explorer den Ordner, in dem sie gespeichert wurde. Mit einem Doppelklick auf die exportierte .zip-Datei entpackst du den Inhalt und kannst deine Banner nach Belieben verwenden.

Entpacke die exportierte .zip-Datei zuerst, bevor du die Banner verwendest oder bei einer Werbeplattform hochlädst. Die exportierte .zip-Datei enthält alle einzelnen Banner (und den verschachtelten Ordner _zips, in dem alle Banner einzeln vorgezippt und bereit für den Upload bei einer Werbeplattform liegen).

Werbeblocker im Browser können verhindern, dass lokale Banner-Vorschauen richtig abgespielt werden. Wenn ein exportiertes HTML-Banner eingefroren wirkt, nicht animiert wird oder sich in der Browser-Vorschau anders verhält, deaktiviere Werbeblocker bzw. Datenschutz-Erweiterungen vorübergehend für die lokale Vorschaudatei oder teste in einem anderen Browser, bevor du neu exportierst.

Jedes HTML-Ausgabeformat hat eigene Anforderungen an Einrichtung und Verpackung. Wähle vor dem Export mithilfe der Anleitung Optionen für Werbeplattformen das richtige Format.

Downloads aus Figma speichern Wenn du die Desktop-App von Figma nutzt, erscheint eine Aufforderung zum Herunterladen deiner Datei. Wenn du Figma dagegen im Webbrowser nutzt, wird deine Datei standardmäßig automatisch auf deinen Computer heruntergeladen (meist in den Ordner Downloads).

Exporteinstellungen in mehreren Figma-Dateien wiederverwenden: Solange das Einstellungspanel Export to HTML geöffnet ist und den Fokus hat, drück Ctrl + Shift + E, um deine aktuellen Exporteinstellungen als bannerify-export-settings.json zu speichern. Öffne in einer anderen Figma-Datei dasselbe Panel und drück Ctrl + Shift + I, um diese JSON-Datei auszuwählen und ihre Einstellungen auf die aktuelle Seite anzuwenden. Nutze unter Windows und Mac die Ctrl-Taste.

Automatischer Zuschnitt maskierter Fotos

Standardmäßige HTML/CSS + GSAP-Exporte können ungenutzte Bildbereiche geeigneter JPEG-Fotos in rechteckigen oder abgerundeten Bewegungsmasken automatisch entfernen. Bannerify behält den gesamten Bereich, der während der unterstützten Animationen Zoom Pan Left und Zoom Pan Right benötigt wird, einschließlich eines kleinen Sicherheitsrands. Auch unbewegte Fotos und Überblendungen können profitieren. Ihre Figma-Ebenen und Animationspositionen bleiben unverändert.

Unterstützt werden außerdem gerichtete Fade In/Out-, Slide In/Out- und Wipe In/Out-Animationen, Instant Show/Hide sowie Scale Up/Down Center. Bei überlappenden Ein- und Ausgangsanimationen, die Transformationen kombinieren könnten, bleibt das Originalbild erhalten.

Diese Optimierung erfolgt automatisch und unabhängig von Bildkomprimierung und Dateigrößenzielen. Ein Bild wird nur ersetzt, wenn die zugeschnittene Datei kleiner ist. Die Einsparung hängt davon ab, wie viel des ursprünglichen Fotos während der gesamten Animation außerhalb der Maske bleibt.

Nicht unterstützte Animationen, eingefügter benutzerdefinierter Code, Figma Motion, gedrehte Grafiken oder Grafiken mit Effekten sowie andere Exportformate behalten die ursprünglichen Bilder. Schlägt der Zuschnitt fehl, verwendet Bannerify ebenfalls das Originalbild, damit der Export fortgesetzt werden kann.

Aus Tabellen erzeugte Varianten behalten ihre Originalbilder, damit jede Zeile das richtige Foto verwendet. Normale Banner, einschließlich des ursprünglichen Master-Banners, können weiterhin automatisch zugeschnitten werden.

Standardoptionen

Allen Bannern einen schwarzen Rahmen von 1px hinzufügen

Wenn du die Option für den 1px-Rahmen aktivierst, wird dem CSS aller Banner automatisch ein Rahmen 1px solid black hinzugefügt. Das hilft bei Werbeplattformen, die einen schwarzen Rahmen von 1px um Banner bevorzugen (oder verlangen).

Allen Bannern eine Ladeanimation hinzufügen

Wenn du die Preloader-Option aktivierst, wird dem HTML aller Banner automatisch ein Preloader hinzugefügt. Diese Ladeanimation wird angezeigt, bis alle Bilder des Banners im Webbrowser geladen sind.

Wiedergabeoptionen

Festlegen, wie oft Banner abgespielt werden

Mit dieser Option legst du fest, wie oft die Zeitleiste aller Banner von Anfang bis Ende abgespielt wird. Der Standardwert ist 1, das heißt, deine Banner spielen die Animation einmal von Anfang bis Ende ab.

Du kannst diese Zahl ändern, indem du eine höhere Zahl in das Eingabefeld eingibst, zum Beispiel 6. Dann wird die Animation aller Banner sechsmal von Anfang bis Ende abgespielt.

Banner endlos wiederholen

Wenn du die Option Infinitely loop all banners aktivierst, wird die Animation in allen Bannern endlos wiederholt.

Einzelne .zip-Dateien für jedes Banner einschließen

Wenn du den Schalter Include individual .zip files for each banner aktivierst, enthält deine exportierte Datei einen zusätzlichen Ordner namens _zips. Dieser Ordner _zips enthält für jedes exportierte Banner eine eigene ZIP-Datei. Das ist praktisch und spart Zeit, wenn deine Werbeplattform für jedes Banner eine eigene ZIP-Datei verlangt.

backup.jpg optional in die ZIP-Dateien aufnehmen Wenn die Bilddatei backup.jpg in jeder ZIP-Datei enthalten sein soll, aktiviere den Schalter Add "backup.jpg" to individual zip files. Ist dieser Schalter beim einzelnen Zippen deiner Banner deaktiviert und hast du zusätzlich den Schalter Add "backup.jpg" aktiviert, landen alle Backup-Bilder in einem Ordner _backups im Stammverzeichnis der von Bannerify exportierten Haupt-.zip-Datei.

Ein HTML-Ausgabeformat wählen

Bannerify kann plattformneutrales HTML, plattformspezifische Upload-Pakete, responsive Layouts und mehrere Stapelformate exportieren. Zu jeder Option in den Code Output Settings gibt es unter Optionen für Werbeplattformen eine eigene Anleitung mit Einrichtung, Klickverarbeitung, Paketstruktur und Hinweisen zum Testen.

Banner in den Export ein- oder ausschließen

Standardmäßig werden alle Ebenen auf oberster Ebene deiner Figma-Datei, die als Banner in Bannerify geladen sind, in den Export aufgenommen. Wenn du Banner ausschließen willst (ohne die ausgewählten Banner neu zu laden), stell den Schalter Include In Export im Zeitleisten-Header des jeweiligen Banners auf „aus“. Dadurch wird die Zeitleiste dieses Banners ausgeblendet und das Banner aus allen Exporten ausgeschlossen.

Minifizierter Code

Um die Dateigrößen zu optimieren, minifiziert Bannerify standardmäßig den gesamten exportierten Code und speichert pro Banner eine einzige .html-Datei. Wenn dein Code besser lesbar sein und/oder in separate .html-, .css- und .js-Dateien aufgeteilt werden soll, schalte in den Code-Exportoptionen den Schalter Minified aus.

Text als Absatz-Tags statt als SVG-Bilder exportieren

Standardmäßig werden alle Textebenen in deiner Bannerify-Zeitleiste als SVG-Bilder (in Image-Tags) exportiert. Optional kannst du sie stattdessen als Rich Text (in Absatz-Tags) exportieren, indem du die Option Export text as <p> tags instead of <svg> aktivierst.

Ausgewählte Textebenen als Bilder behalten

Wenn der Export als Absatz aktiviert ist, behalten in Figma gesperrte Textebenen ihre SVG- bzw. Bildausgabe, statt zu bearbeitbarem HTML-Text zu werden.

1. Sperre in Figma jede Textebene, die als Grafik erhalten bleiben soll. Sperre die Textebene selbst, nicht nur die übergeordnete Gruppe oder den Frame.
2. Lass die Textebenen, die du im HTML bearbeiten willst, entsperrt.
3. Aktiviere Export text as <p> tags instead of <svg> und exportiere erneut.

Lass zum Beispiel einen Platzhalter für den Händlernamen entsperrt und sperre den umgebenden Text. Der Platzhalter bleibt bearbeitbares HTML, während der gesperrte Text in den Bild-Assets bleibt. Das Sperren entfernt die Grafik nicht aus dem Banner und bietet keine Zugriffskontrolle für die exportierten Dateien. Wenn du eine Textebene entsperrst, kommt sie beim nächsten Export wieder für Rich Text infrage. Die bestehenden Voraussetzungen und Formateinschränkungen für Text gelten weiterhin.

Für Markenschriften in bearbeitbarem Text siehe Eigene Schriften zu bearbeitbarem HTML-Text hinzufügen.