Video-Tutorial: Animierte Figma-Motion-Banner als HTML, MP4-Video oder GIF exportieren

Bannerify kann unterstützte Animationen erkennen, die mit Figma Motion erstellt wurden, und sie als Eingangsanimation Figma Motion bereitstellen. Wie bei jeder anderen Bannerify-Animation entscheidest du, welche Ebenen sie nutzen.

Die Erkennung ersetzt nie automatisch eine bestehende Eingangsanimation von Bannerify. Wende Figma Motion auf einzelne Ebenen an oder nutze die vorhandenen Stapelaktionen für Ebenen in Bannerify, um es auf mehrere Ebenen gleichzeitig anzuwenden.

Figma Motion ist derzeit eine Beta-API. Solange die API in der Beta-Phase ist, kann Figma das Datenmodell von Motion ändern. Den aktuellen Status der API bei Figma findest du in der Dokumentation zur Figma Motion API.

Bevor du loslegst

• Füge in Figma einer Ebene in deinem Banner-Frame eine Motion-Animation hinzu.
• Achte darauf, dass die Ebene in der Zeitleiste von Bannerify erscheint. Liegt sie in einer Gruppe, Komponente oder anderen Ebene, nimm zuerst die verschachtelte Ebene auf.
• Lade oder aktualisiere das Banner in Bannerify, nachdem du Motion-Keyframes in Figma geändert hast.

Erkanntes Motion mit einem Klick anwenden

Findet Bannerify unterstütztes Motion auf Ebenen, die es noch nicht nutzen, erscheint über den Banner-Zeitleisten die Meldung Figma Motion detected.

Klick auf Apply to All Banners (n Layers), um die eigenen unterstützten Motion-Spuren jeder geeigneten Ebene in allen Banner-Frames anzuwenden, die gerade in Bannerify geladen sind. Die Anzahl umfasst alle geeigneten Motion-Ebenen in den geladenen Zeitleisten. Bannerify aktiviert außerdem Mirror Figma Motion Timings, damit sofort die nativen Versätze genutzt werden. Bestehende Ausgangs- und Hover-Animationen bleiben unverändert, und du kannst die Spiegelung danach ausschalten, um die bearbeitbaren Timing-Bereiche von Bannerify wiederherzustellen.

Motion auf verschachtelte Gruppen und Pulse-Ebenen anwenden

Klapp im Panel für verschachtelte Ebenen jede Gruppe mit animierten Unterebenen auf. Hat die äußere Gruppe auch ein eigenes Motion, aktiviere für diese Gruppe Keep Parent Animatable, damit ihre Animation neben den Animationen der Unterebenen verfügbar bleibt.

Klick nach dem Schließen des Panels in der Meldung Figma Motion detected auf Apply to All Banners. Neu sichtbare Unterebenen brauchen diesen Schritt, auch wenn Mirror Figma Motion Timings schon aktiviert ist. Pulse-Ebenen können zum Beispiel in der Zeitleiste erscheinen, aber statisch bleiben, bis ihre erkannten Spuren für Skalierung und Deckkraft angewendet werden.

Figma Motion auf mehrere Ebenen anwenden

1. Öffne den Banner-Frame in Bannerify und aktualisiere ihn bei Bedarf.
2. Hak die Kontrollkästchen der Ebenen an, die du aktualisieren willst, oder nutze Quick Select Layers.
3. Öffne unter Batch Layer Actions das Animationsmenü Entry.
4. Wähle in der Gruppe Figma Motion die Option Apply Each Layer's Figma Motion.
5. Leg das gewünschte Eingangs-Timing in Bannerify fest und klick auf Apply Animations to Selected Layers.

Bannerify wendet die eigenen erkannten Motion-Keyframes jeder Ebene an. Enthält deine Auswahl auch Ebenen ohne unterstützte Motion-Werte, behalten diese Ebenen ihre aktuelle Eingangsanimation, und Bannerify zeigt dir vor dem Anwenden, wie viele ausgewählte Ebenen geeignet sind.

Figma Motion auf eine Ebene anwenden

1. Such die animierte Ebene in der Zeitleiste von Bannerify.
2. Öffne ihr Menü Entry Animation.
3. Wähle die erkannte Animation in der Gruppe Figma Motion.

Bannerify fasst alle unterstützten Motion-Spuren der Ebene zu einer einzigen Eingangsanimation zusammen. Position, Deckkraft, Skalierung und Drehung können zum Beispiel gemeinsam animiert werden und behalten dabei ihre eigenen Keyframes und ihr eigenes Easing.

Die Figma-Motion-Zeitleiste spiegeln

Sobald mindestens eine Ebene ihre Figma-Motion-Eingangsanimation nutzt, zeigt Bannerify über der Zeitleiste Mirror Figma Motion Timings an. Die Beschriftung enthält die Anzahl der Motion-Ebenen, die aktualisiert werden, etwa Mirror Figma Motion Timings (5 Layers).

• Die Ein-Klick-Aktion Apply to All Banners aktiviert die Option automatisch.
• Lass sie ausgeschaltet, um Motion-Animationsbalken mit den normalen Timing-Steuerelementen von Bannerify zu positionieren oder in der Länge zu ändern.
• Schalte sie ein, um die nativen Start- und Endversätze aus Figma für jede ausgewählte Motion-Animation zu nutzen. Bannerify passt außerdem die gesamte Zeitleiste an die längste ausgewählte Motion-Zeitleiste an.
• Schalte sie wieder aus, um die bearbeitbaren Timing-Bereiche von Bannerify wiederherzustellen, die du vor dem Spiegeln genutzt hast.

Der Schalter zum Spiegeln synchronisiert selbst nur das Timing der Zeitleiste. Er wendet Figma Motion weder auf zusätzliche Ebenen an noch ersetzt er andere Eingangsanimationen. Die Ein-Klick-Aktion wendet geeignete Ebenen an, bevor sie den Schalter aktiviert; für eine gezieltere Auswahl nutzt du den Workflow pro Ebene oder als Stapel und steuerst die Spiegelung dann separat.

Für Banner, die bereits in Figma animiert sind, nutzt du Apply to All Banners, um in einem Schritt möglichst nah an die native Zeitleiste von Figma heranzukommen. Bannerify wendet jede geeignete geladene Ebene an und aktiviert automatisch Mirror Figma Motion Timings. Die Gesamtlänge der Zeitleiste wird in ganzen Sekunden angegeben; die längste native Zeitleiste wird daher bei Bedarf auf die nächste ganze Sekunde aufgerundet.

Du kannst trotzdem eine separate Ausgangsanimation von Bannerify hinzufügen. Für einen sauberen Übergang setzt du die Ausgangsanimation hinter das Ende der Figma-Motion-Eingangsanimation.

Unterstützte Motion-Eigenschaften

Bannerify gibt derzeit diese nativen Motion-Eigenschaften wieder:

• Position auf der X- und Y-Achse
• Deckkraft
• Skalierung auf der X- und Y-Achse
• Drehung
• Einheitliche oder einzelne Eckenradien bei Rechteckebenen mit einfarbiger Füllung, die an der horizontalen und vertikalen Achse ausgerichtet sind, einschließlich Drehungen um 90 Grad, ohne sichtbare Konturen, Effekte, Masken oder Eckenglättung

Animierte Eckenradien werden in der Vorschau sowie in HTML-, GIF- und Video-Exporten wiedergegeben. Rechtecke mit Bildfüllung, Frames, Gruppen und Rechtecke mit Konturen, Effekten oder Eckenglättung zeigen weiterhin einen Kompatibilitätshinweis zum Eckenradius.

Jede Eigenschaft behält innerhalb der kombinierten Bannerify-Animation ihre eigenen Keyframes, ihr eigenes Timing und ihr eigenes Easing. Bannerify wandelt unterstütztes Cubic-Bezier- und Spring-Easing in das Format um, das Vorschau und Exporte nutzen. Dabei können sehr kleine visuelle Unterschiede auftreten, vor allem bei Spring-Bewegungen.

Mischt eine Animation unterstützte und nicht unterstützte Eigenschaften, gibt Bannerify die unterstützten Eigenschaften wieder und benennt die Eigenschaften, die es derzeit nicht exportieren kann. Eine Ebene ohne unterstützte Motion-Eigenschaften zeigt keine Option Figma Motion.

Die Meldung in der Zeitleiste nennt nicht unterstützte Eigenschaften, darunter Größe, Eckenradius bei nicht unterstützten Ebenentypen oder Darstellungen, Abstände und Innenabstände von Auto Layout, Kontur- oder Rahmenstärke, Path Trim, Füllungen, Konturen oder Effekte. Die aufgeführten Eigenschaften werden in der exportierten Datei nicht animiert.

Motion in einem gedrehten Banner wiederverwenden

Du kannst einen Banner-Frame im Hochformat um 90 Grad drehen, um ihn im Querformat zu nutzen. Bannerify folgt der gedrehten Richtung seiner Motion-Positionsspuren und der Eckenreihenfolge unterstützter Rechtecke. Aktualisiere das Banner nach dem Drehen, damit Artwork und Motion-Spuren gemeinsam neu geladen werden.

Wenn du den Frame drehst, dreht sich auch sein Artwork. Pass Texte und Bilder in Figma an, wenn sie aufrecht bleiben sollen, und prüfe dann die Animation in der Vorschau von Bannerify und in der exportierten Datei. Eine Eckenradius-Animation erfordert weiterhin ein unterstütztes Rechteck, das an der horizontalen und vertikalen Achse ausgerichtet ist; schräg gedrehte Rechtecke zeigen einen Kompatibilitätshinweis.

Nach dem Bearbeiten in Figma aktualisieren

Nachdem du eine Motion-Animation in Figma geändert hast, klick in Bannerify auf Refresh All Banners oder nutze Refresh Banner Layers für das betroffene Banner. Bannerify erkennt die neuesten Keyframes. Ebenen, die Figma Motion bereits nutzen, bleiben dabei, während neu animierte Ebenen unverändert bleiben, bis du Figma Motion auf sie anwendest.

Vorschau und Export

Figma-Motion-Animationen funktionieren mit den Steuerelementen Play und Replay von Bannerify und lassen sich an jeder Stelle der Zeitleiste scrubben. Bannerify erfasst unterstütztes Motion-Artwork unabhängig vom aktuellen Abspielkopf in Figma, auch bei Ebenen, die mit einer Skalierung oder Deckkraft von null beginnen. Skalierung und Drehung behalten den Mittelpunkt der ursprünglichen Figma-Ebene bei, auch wenn das exportierte Artwork andere Begrenzungen hat, etwa bei Text oder Artwork mit Schatten.

Sie sind auch beim Export in diese Formate enthalten:

• CSS- oder GSAP-HTML
• GIF
• MP4

Prüfe vor dem Export die Meldung Figma Motion detected über der Zeitleiste. Sie zeigt an, wenn:

• unterstütztes Motion erkannt, aber noch nicht als Bannerify-Eingangsanimation der Ebene angewendet wurde;
• eine Motion-Ebene Eigenschaften enthält, die Bannerify derzeit nicht exportiert;
• eine Motion-Ebene nur nicht unterstützte Eigenschaften enthält und noch nicht angewendet werden kann.

Du kannst alles unterstützte, noch nicht angewendete Motion direkt aus der Meldung in der Zeitleiste anwenden.

Fehlerbehebung

Einige Figma-Motion-Animationen fehlen im Export

1. Prüf die Meldung Figma Motion detected über der Zeitleiste auf nicht angewendete Ebenen.
2. Klick auf Apply to All Banners oder wähle Figma Motion im Menü Entry Animation jeder betroffenen Ebene.
3. Sieh dir die Namen nicht unterstützter Eigenschaften an, die in der Warnung aufgeführt sind.
4. Klapp verschachtelte animierte Ebenen in die Zeitleiste von Bannerify aus und aktualisiere dann das Banner.
5. Prüf, ob Mirror Figma Motion Timings aktiviert bleibt, wenn die exportierten Versätze der Motion-Zeitleiste in Figma entsprechen sollen.

Figma Motion erscheint nicht im Animationsmenü

• Prüf, ob die Ebene mindestens eine unterstützte Motion-Eigenschaft hat.
• Ist die Ebene verschachtelt, achte darauf, dass sie in die Zeitleiste von Bannerify aufgenommen ist.
• Aktualisiere das Banner, nachdem du die Motion-Animation in Figma hinzugefügt oder bearbeitet hast.
• Achte bei Stapelaktionen darauf, dass die aktuelle Auswahl mindestens eine Ebene mit erkannten Motion-Werten enthält.

Das Timing passt nicht zu Figma Motion

Wende Figma Motion zuerst auf die gewünschten Ebenen an. Aktiviere dann über der Zeitleiste Mirror Figma Motion Timings, um ihre nativen Start- und Endversätze statt der Positionen der Bannerify-Animationsbalken zu nutzen.

Die Animation sieht leicht anders aus

Prüf, ob jede animierte Eigenschaft unterstützt wird. Cubic-Bezier-Easing wird wo möglich direkt wiedergegeben, während Spring-Easing und unabhängig voneinander animierte Spuren für die Vorschau- und Exportformate von Bannerify umgewandelt werden und sehr kleine Unterschiede aufweisen können.