Video-Tutorial: Banner in Figma animieren und als HTML exportieren

Dieses Video zeigt, wie du produktionsreife HTML-Banner in Sekunden aus Figma animierst und exportierst.

Animationen auswählen

Bannerify bringt Dutzende vordefinierte, keyframe-basierte Animationen mit, die in 5 Kategorien gruppiert sind:

• Entrances
• Exits
• Basic Transforms
• Attention Seekers
• Background Pans

Um eine Eingangsanimation festzulegen, fahr in der Zeitleiste von Bannerify mit der Maus über die Ebene, die du animieren willst, und klick auf das obere Auswahlfeld. Scroll durch die Liste der Animationen und klick auf einen Animationsnamen, um ihn auf deine Ebene anzuwenden. Die Banner-Vorschau wird sofort mit der neuen Animation aktualisiert.

Animationen von einer Ebene entfernen: Soll eine Ebene gar keine Animation haben, wähle No Entry Animation und/oder No Exit Animation. Alternativ kannst du eine Figma-Ebene mit dem Präfix locked- umbenennen (zum Beispiel locked-RectangleBackground). Auch dann werden keine Animationen hinzugefügt, und das Auswahlfeld für Animationen in der Zeitleiste des Plugins wird deaktiviert.

Banner-Animationen in der Zeitleiste ansehen

Mit einem Klick auf das Symbol Play spielst du die Animationen deiner Banner in der Vorschau ab, und mit dem Symbol Pause hältst du die Zeitleiste an jeder beliebigen Stelle an. Mit dem Symbol Restart startest du die Wiedergabe wieder von vorn.

Klick auf das Zeitlineal über den Bannern oder zieh daran, um durch die Animation zu scrubben. Der gemeinsame Abspielkopf bleibt über alle Banner hinweg an den Timing-Spuren ausgerichtet. Du kannst auch im Kopfbereich eines Banners scrubben, wo dessen Lineal angezeigt wird.

Mit +, −, dem Zoom-Schieberegler oder dem Zusammenziehen mit zwei Fingern auf dem Trackpad über dem Lineal oder den Timing-Spuren zoomst du von 100 % bis 1000 %. Im vergrößerten Zustand ziehst du den abgerundeten blauen Scrollbalken unter dem Lineal, um nach links oder rechts zu wandern. Klick auf Fit, um wieder die gesamte Zeitleiste zu sehen. Diese Steuerelemente ändern nur die Ansicht, nicht die Timings der Animationen oder die Exportdauer. Alle Steuerelemente zur Navigation findest du unter In der Zeitleiste zoomen und scrollen.

Für präziseres Bearbeiten nutzt du Einrasten, Ebenenfilter, Marker und wiederverwendbare Bewegungssequenzen oder lässt einen Arbeitsbereich in Schleife laufen, während du einen Übergang anpasst.

Timeline Settings

Klick im Kopfbereich auf Timeline Settings. Das Panel öffnet sich auf General und hat vier Tabs:

Tab	Steuerelemente
General	Länge der Zeitleiste, Magic Delays und Magic Speeds
Timeline Tools	Einen Vorschaubereich in Schleife abspielen und benannte Marker hinzufügen
Motion Sequences	Abgestimmte Animationen speichern und wiederverwenden
Sync Timings	Timings zwischen Bannergrößen kopieren

Snap, der Ebenenfilter, Zoom To Selection und die Steuerelemente zum Einklappen von Gruppen befinden sich unter Timeline Settings → Timeline Tools.

Änderungen prüfen und wiederherstellen

Klick neben den Pfeilen für Rückgängig/Wiederholen auf History, um deine Änderungen an der Zeitleiste durchzusehen. Wähle einen Schritt, um zurück- oder vorzuspringen; Current kennzeichnet den aktiven Stand. Neue Änderungen, die du nach dem Zurückspringen machst, ersetzen den späteren Verlauf.

Die Länge der Zeitleiste anpassen

Öffne Timeline Settings → General, wähle unter Total Timeline Length eine Dauer und klick dann auf Update Timeline Length. Die verfügbaren Längen reichen von 1 Sekunde bis 3 Minuten. Die Änderung gilt für alle deine Banner; Timing-Bereiche, die über eine kürzere Zeitleiste hinausgehen, werden passend angepasst.

Mit Undo stellst du die vorherige Länge und die Timings wieder her, oder du wählst unter History einen früheren Schritt. Siehe Die Länge der Zeitleiste anpassen.

Ausgangsanimationen hinzufügen

Ausgangsanimationen fügst du genauso hinzu wie Eingangsanimationen. Statt auf das obere Auswahlfeld klickst du auf das untere Auswahlfeld, um eine Ausgangsanimation für deine Ebene zu wählen.

Achte darauf, dass jede Ausgangsanimation einer Ebene erst nach dem Ende der Eingangsanimation beginnt. Sonst überschneiden sich beide Animationen und erzeugen gleichzeitig widersprüchliche Übergänge.

Geschwindigkeit und Timing von Animationen anpassen

Geschwindigkeit und Verzögerung deiner Animationen passt du an, indem du auf den linken oder rechten Rand des Zeitleistenbalkens deiner Ebene klickst und ihn mit gedrückter Maustaste ziehst. So änderst du die Länge der Animation und ihren Start- bzw. Endpunkt.

Die Position deiner Animation auf der Zeitleiste verschiebst du, indem du in die Mitte des Zeitleistenbalkens deiner Ebene klickst und ihn mit gedrückter Maustaste nach links oder rechts ziehst, um festzulegen, wo die Animation in der Zeitleiste liegt.

Gib genaue Timing-Werte mit der Tastatur ein. Wenn du den Timing-Balken lieber nicht nutzen willst, kannst du Geschwindigkeit und Verzögerung auch festlegen, indem du auf den zweiten Wert in deiner Zeitleisten-Ebene klickst und mit der Tastatur eine neue Zahl eingibst (zum Beispiel 1.5), um die Anzahl der Sekunden festzulegen.

Animationen in Schleife abspielen

Soll sich eine Animation auf einer bestimmten Ebene endlos wiederholen (auch nachdem die Zeitleiste des Banners zu Ende ist), aktiviere den Schalter Loop neben der ausgewählten Animation. Das ist praktisch für sehr kurze Animationen, die sich für eine Wiedergabe in Schleife eignen (zum Beispiel „Heartbeat“, „Flicker“ oder „Pulse“).

Animationen kopieren und einfügen

Mit den Buttons Copy und Paste kopierst du eine Animation schnell von einer Ebene der Zeitleiste auf eine andere. Ein Klick auf Copy kopiert die Animation, die du dann mit einem Klick auf Paste bei jeder anderen Ebene einfügen kannst.

Eine kopierte Animation in mehrere Ebenen einfügen: Du kannst eine kopierte Animation auch gleichzeitig auf mehrere Ebenen anwenden.

Animationen auf mehrere Ebenen anwenden

Um eine Animation schnell auf mehrere Ebenen gleichzeitig anzuwenden, wähle Ebenen über die Kontrollkästchen neben den Ebenennamen aus (oder nutze die Funktion Quick Select Layers) und leg die Animation dann im aufklappenden Bereich unten im Plugin-Fenster fest. Wenn dir die Animation gefällt, klick auf den Button Apply Animations to Selected Layers, um die neue Animation auf alle ausgewählten Ebenen anzuwenden.

Ähnliche Ebenen schnell auswählen

Arbeitest du mit einem Banner-Set, dessen Banner dieselben Elemente oder Ebenen enthalten, kannst du mit dem Menü Quick Select Layers im Kopfbereich von Bannerify ähnliche Ebenen in allen Bannern automatisch auswählen. Das ist eine praktische Alternative dazu, jede Ebene einzeln anzuhaken.

Beispiel für Quick Select Layers: Enthalten zum Beispiel alle deine Banner eine Ebene namens CTA Button, klick auf diese Option, um automatisch alle Ebenen CTA Button anzuhaken. Danach kannst du Animationen für diese Ebene in allen Bannern gleichzeitig anwenden.

Magic Delays und Magic Speeds nutzen

Öffne Timeline Settings → General und wähle einen Wert unter Magic Delays oder Magic Speeds. Klick auf Apply To All Entry Animations oder Apply To All Exit Animations, um ihn auf alle deine Banner anzuwenden.

Magic Delays

Wähle eine gestaffelte Verzögerung von 0,1 bis 0,5 Sekunden. Die Ebenen erhalten aufeinanderfolgende Verzögerungen und behalten dabei ihre Animationsdauer.

Magic Speeds

Wähle eine Dauer von 0,1 bis 1 Sekunde. Die Startzeiten bleiben gleich, außer sie müssen nach vorn rücken, damit die Animation in die Zeitleiste passt.

Jede Anwendung ist ein Schritt im Verlauf. Mit Undo, Redo oder dem Panel History wechselst du zwischen den Änderungen. Siehe Magic Delays und Magic Speeds.