Video-Tutorial: Animierte Banner mit mehreren Szenen in Figma erstellen
Dieses Video zeigt, wie du mit dem Plugin Bannerify animierte Banner mit mehreren Szenen in Figma erstellst (und als HTML oder Video exportierst).
Was sind Banner mit mehreren Szenen?
Standardmäßig behandelt Bannerify jeden Figma-Frame der obersten Ebene als eigenes Banner.
Wenn du Use Figma sections as multi-scene banners aktivierst, behandelt Bannerify jede Figma Section als ein Banner und jeden gleich großen Frame in dieser Section als eigene Szene in derselben Zeitleiste.
Das ist ideal, wenn du mehrere Motive oder Botschaften nacheinander in einem einzigen Banner-Export zeigen willst.
Bannerify folgt der visuellen Ebenenreihenfolge der Frames in der Section. Wenn du die Szenen-Frames in Figma verschiebst, wird die Reihenfolge der Szenen in Bannerify aktualisiert, sobald du die Banner aktualisierst und neu lädst.
Schnelleinrichtung
- Erstelle deine Banner-Frames wie gewohnt in Figma.
- Wähle die Frames aus, die zu Szenen eines Banners werden sollen.
- Klick mit der rechten Maustaste und wähle Wrap in new section.
- Klick in Bannerify auf Refresh All Banners, um zum Ladebildschirm zurückzukehren.
- Aktiviere Use Figma sections as multi-scene banners.
- Klick auf Load Checked Banners (oder Load All Banners).
Jetzt solltest du ein Banner pro Section sehen, mit nach Szenen gruppierten Ebenen in der Zeitleiste.
Schritt-für-Schritt-Workflow
1. Bannerify ausführen
Öffne Bannerify über die Figma-Plugins. Wenn du es oft nutzt, speichere es in deiner Liste Saved plugins, damit du schnell darauf zugreifen kannst.
2. Standardverhalten prüfen (optional)
Bevor du den Section-Modus aktivierst, lädt Bannerify Frames der obersten Ebene als einzelne Banner.
So kannst du prüfen, ob deine Ausgangs-Frames richtig erkannt werden.
3. Szenen-Frames in eine Section packen
Wähle alle Frames aus, die du zu einem Banner mit mehreren Szenen zusammenfassen willst, und nutze dann:
Right click -> Wrap in new section
Diese Section ist im Section-Modus jetzt der Container für dein Banner.
4. Neu laden und in den Section-Modus wechseln
Klick in Bannerify auf Refresh All Banners und aktiviere dann:
Use Figma sections as multi-scene banners
Bannerify durchsucht jetzt Sections statt einzelner Frames.
5. Section-Banner laden
Klick auf Load Checked Banners oder Load All Banners.
Jetzt siehst du:
- ein Banner pro Section
- Szenengruppen in der Zeitleiste (Szene 1, Szene 2, Szene 3 usw.)
- Ebenenbeschriftungen und Steuerelemente, die die Szenen berücksichtigen
Wenn Szene 3 vor Szene 2 erscheinen oder Szene 1 ans Ende rücken soll, bring die Szenen-Frames in der Section in die gewünschte visuelle Ebenenreihenfolge und aktualisiere und lade die Section dann in Bannerify neu.
6. Länge der Zeitleiste an die Szenenabfolge anpassen
Wenn sich Szenen derzeit überlappen, erhöhe die Länge der Zeitleiste (zum Beispiel von 5s auf 15s) und klick auf Update Timeline Length.
Passe dann das Timing der Ebenen so an, dass jede Szene auf der längeren Zeitleiste nacheinander ein- und ausgeblendet wird.
Änderungen an der Länge der Zeitleiste wirken sich sofort auf die Vorschau und auf GIF- und Videoexporte aus, auch bei Bannern mit mehreren Szenen. Nach einer Änderung der Dauer musst du die Banner nicht neu laden.
Nutze die gruppierten Timing-Steuerelemente für Szenen, um ganze Szenenblöcke schneller zu verschieben, statt jede Ebene einzeln anzupassen.
7. Vorschau ansehen und exportieren
Prüfe Reihenfolge und Timing der Szenen in der Vorschau und exportiere dann nach Bedarf:
- HTML-Export für Code-Pakete für Werbeplattformen
- GIF-Export für animierte Bilder
- MP4/Video-Export für Videodateien
Alle Szenen einer Section werden als eine zusammenhängende Bannersequenz exportiert.
Mit mehreren Größen und mehreren Sections arbeiten
Du kannst Sections duplizieren, um weitere Bannergrößen oder Varianten zu erstellen.
Beim Aktualisieren lädt Bannerify jede Section als eigenes Banner mit seinen eigenen Szenen. So kannst du mehrere Formate und Varianten mit mehreren Szenen in einem einzigen Durchgang exportieren.
Wichtige Voraussetzung: Szenen-Frames müssen gleich groß sein
Damit Frames als Szenen desselben Banners gelten, müssen sie innerhalb der Section exakt dieselben Maße haben.
Schon bei 1 px Unterschied kann Bannerify einen Frame aus den Szenen dieser Section ausschließen.
Beispiel: Wenn zwei Frames 269x250 groß sind und einer 268x250, lädt Bannerify möglicherweise nur die Frames mit passender Größe als Szenen.
In diesem Fall:
- Gib allen Szenen-Frames in der Section exakt dieselbe Breite und Höhe.
- Aktualisiere die Banner.
- Lade das Section-Banner neu.
Checkliste zur Fehlerbehebung
- Nur einige Szenen werden geladen: Prüfe, ob alle Frames in der Section exakt dieselben Maße haben.
- Änderungen an der Section erscheinen nicht: Klick auf Refresh All Banners und lade neu.
- Die Reihenfolge der Szenen stimmt nicht: Ordne die Frames in der Figma-Section neu an, klick dann auf Refresh All Banners und lade neu.
- Szenen überlappen zu stark: Verlängere die Zeitleiste und verteile das Timing neu.
- Der Export sieht anders aus als die Vorschau: Prüfe nach Änderungen an der Zeitleiste noch einmal das Timing der Ebenen und die Reihenfolge der Szenen.
Zusammenfassung
Figma-Sections mit Bannerify zu nutzen ist der schnellste Weg, längere, erzählende Bannersequenzen zu bauen, ohne alles in einen riesigen Frame zu zwängen.
Gestalte jede Szene als normalen Frame, pack die Frames in eine Section, aktiviere den Section-Modus und animiere und exportiere sie dann als ein zusammenhängendes Banner.