Video-Tutorial: Eigene Animationen zu deinen Banner-Designs in Figma hinzufügen

Dieses Video zeigt, wie du mit dem Bannerify-Plugin eigene Keyframe-Animationen zu deinen Bannern hinzufügst.

Das Panel für eigene Animationen öffnen

Um das Panel für eigene Animationen zu öffnen, klick im Hauptkopfbereich von Bannerify auf den Button Custom Animations. Daraufhin öffnet sich das Panel, in dem du deine eigene Keyframe-Animation anlegen kannst.

Keyframes für eigene Animationen erstellen

Wenn du das Animations-Panel öffnest, siehst du 2 Keyframes: den ersten Keyframe (0 %) und den letzten Keyframe (100 %). Sie sind standardmäßig vorhanden und lassen sich nicht entfernen, denn eine Keyframe-Animation braucht mindestens einen Frame, mit dem sie beginnt, und einen Keyframe, der zeigt, wo sie endet.

Einen Keyframe zum Bearbeiten auswählen

Du wechselst sofort zwischen beliebigen Keyframes, indem du auf der Spur Keyframes oben im Panel für eigene Animationen auf einen Keyframe klickst. Mit einem Klick auf einen Keyframe kannst du die Eigenschaften genau dieses Keyframes bearbeiten.

Neue Keyframes einfügen

Um zwischen Start- und Endpunkt einen Keyframe hinzuzufügen, gib seinen Prozentwert (zum Beispiel 50) in das Feld Add at ein und wähle dann Add.

Jeder neue Keyframe wird automatisch mit denselben Eigenschaften erstellt, die dein aktuell ausgewählter Keyframe hat. So kannst du Eigenschaften ausgehend von bereits hinzugefügten Keyframes anpassen. Nachdem du auf Add geklickt hast, ist der neue Keyframe außerdem automatisch ausgewählt.

Keyframe-Eigenschaften bearbeiten

Für jeden Keyframe deiner Animation kannst du 5 verschiedene Eigenschaften bearbeiten. Alle Unterschiede in den Eigenschaften zwischen deinen Keyframes werden automatisch animiert. Setzt du zum Beispiel die Skalierung beim Keyframe 0 % auf 2x und beim Keyframe 100 % auf 1x, entsteht automatisch eine „Schrumpf“-Animation.

• Die Eigenschaft X animiert die horizontale Position deines Elements (in Pixeln).
• Die Eigenschaft Y animiert die vertikale Position deines Elements (in Pixeln).
• Die Eigenschaft Opacity animiert die Transparenz deines Elements in Prozent.
• Die Eigenschaft Rotate animiert die Drehung deines Elements in Grad.
• Die Eigenschaft Scale animiert die Größe deines Elements.

Relative X/Y-Transformationen in Prozent nutzen

Möchtest du die X/Y-Position lieber als Prozentsatz des animierten Elements festlegen, stell in den Keyframe-Eigenschaften die Einheit für Position von px auf % um. Dann kannst du für deine X/Y-Werte einen Prozentwert festlegen (statt Pixeln).

Ein prozentualer X/Y-Transformationswert animiert das Element, auf das die Animation angewendet ist, automatisch ausgehend von seiner Position und wendet die prozentuale Transformation auf seine Größe an. Ein X-Transformationswert von 10% auf einem Keyframe bewegt zum Beispiel eine 100px breite Ebene um 10px. Wendest du dieselbe Animation mit einem X-Transformationswert von 10% auf eine 200px breite Ebene an, bewegt sich die Ebene um 20px.

Die Skalierung in X- und Y-Skalierung aufteilen

Möchtest du die Skalierung für die X- und die Y-Achse einzeln festlegen, stell in den Keyframe-Eigenschaften den Modus für Scale von Uniform auf X / Y um. Dann kannst du die horizontale und die vertikale Skalierung deiner Keyframes unabhängig voneinander festlegen, statt beide gleichmäßig für eine einheitliche Vergrößerungs- oder Verkleinerungsanimation zu skalieren.

Diese Einstellung ist praktisch, wenn du die Breite oder Höhe einer Ebene animieren willst, ohne gleichzeitig die andere Achse zu beeinflussen.

Die Animation in der Live-Vorschau ansehen

Wie deine Animation mit den aktualisierten Keyframes und Eigenschaften aussieht, siehst du im Bereich Live preview neben deinen Keyframe-Eigenschaften. Alle Änderungen an Keyframes, Eigenschaften oder Easing erscheinen automatisch in der Live-Vorschau.

Du kannst die Wiedergabegeschwindigkeit der Live-Vorschau anpassen. Wenn du sehen willst, wie deine eigene Animation bei unterschiedlichen Geschwindigkeiten aussieht, zieh den Schieberegler Duration unter der Vorschau. Damit legst du fest, wie viele Sekunden ein Durchlauf der Vorschau dauert.

Keyframe-Eigenschaften kopieren und einfügen

Um Eigenschaften von einem Keyframe auf einen anderen zu übertragen, wähle zuerst den Keyframe aus, dessen Eigenschaften du kopieren willst, und klick auf Copy. Wähle dann den Keyframe aus, in den du die kopierten Eigenschaften einfügen willst, und klick auf Paste, um sie auf den ausgewählten Keyframe zu übertragen. Du kannst auch mit der rechten Maustaste auf einen Keyframe klicken und Copy Properties oder Paste Properties wählen.

Kopierte Eigenschaften sind nur verfügbar, bis das Panel geschlossen wird. Solange das Panel für eigene Animationen geöffnet ist, kannst du Eigenschaften von und zu beliebigen Keyframes deiner Animationen kopieren und einfügen. Nachdem du das Panel für eigene Animationen geschlossen hast, lassen sich kopierte Eigenschaften nicht mehr einfügen.

Keyframes löschen

Um einen Keyframe zu löschen, klick auf der Spur Keyframes auf den gewünschten Keyframe, um ihn auszuwählen, und dann auf den Button Delete (oder klick mit der rechten Maustaste auf den Keyframe und wähle Delete Keyframe), um ihn aus der Zeitleiste zu entfernen. Beachte, dass du die Keyframes 0% und 100% nicht löschen kannst, da deine Animations-Zeitleiste diese Standard-Keyframes braucht.

Nachdem du einen Keyframe gelöscht hast, wird automatisch wieder der Keyframe 0% als aktiver Keyframe zum Bearbeiten ausgewählt.

Ein gelöschter Keyframe ist endgültig weg. Wenn du einen deiner Keyframes löschst, wird er dauerhaft aus der Zeitleiste entfernt, und du kannst das Löschen nicht rückgängig machen. Du kannst aber die Eigenschaften eines Keyframes mit Copy kopieren, ihn löschen und die Eigenschaften dann in einen anderen Keyframe einfügen, solange du deine Animations-Zeitleiste noch bearbeitest.

Das Easing der Animation festlegen

Welches Easing deine Animation haben soll, legst du über eine Option im Menü Easing fest. Das Easing gilt automatisch für deine gesamte Zeitleiste und aktualisiert den Bereich Live preview, sodass du siehst, wie das gewählte Easing die Bewegung deiner Keyframe-Animation verändert.

Folgende Easing-Optionen stehen zur Auswahl:

• Ease (Standard)
• Ease out
• Ease in
• In and out
• Linear
• Gentle
• Overshoot
• Anticipate

Einen eigenen Cubic-Bezier-Wert für das Easing festlegen

Video-Tutorial: Cubic-Bezier-Easing zu Banner-Animationen in Figma hinzufügen

Dieses Video zeigt, wie du mit dem Bannerify-Plugin eigenes Cubic-Bezier-Easing zu Banner-Animationen in Figma hinzufügst.

Für eine eigene Kurve ziehst du die Anfasser der Kurve im Menü Easing oder fügst einen gültigen CSS-cubic-bezier-Wert (zum Beispiel cubic-bezier(0.65,0.05,0.36,1);) in das Feld unter den Presets ein. Eine eigene Cubic-Bezier-Kurve kannst du mit einer Website wie https://easings.co/ oder einem anderen Dienst deiner Wahl erzeugen, der dir hilft, eigene CSS-cubic-bezier-Kurven zu erstellen.

Den Ursprungspunkt der Animation festlegen

Standardmäßig liegt der Ursprung aller deiner eigenen Animationen auf der X- und Y-Achse bei Center und Center. Du kannst ihn aber anpassen, indem du auf einen der neun Punkte im Raster Origin point klickst. Es kombiniert Top, Center oder Bottom für die vertikale Achse mit Left, Center oder Right für die horizontale Achse.

Der Ursprung der Animation bestimmt, an welcher Stelle die Animation an der Ebene „fixiert“ ist. Setzt du den Ursprung zum Beispiel auf Top und Left, wird dieser Punkt deiner Ebene zum Drehpunkt einer Rotationsanimation oder zu dem Punkt, von dem aus und zu dem hin die Ebene skaliert wird.

Deine neue eigene Animation speichern

Um deine neue Animation zu speichern, gib ihr im Textfeld Animation name einen Namen und klick dann auf den Button Add New Animation.

Eigene Animationen werden nur in der aktuellen Figma-Datei gespeichert und sind nur dort verfügbar. Eine gespeicherte Animation steht auf jeder Seite deiner aktuellen Figma-Datei zur Verfügung. Führst du Bannerify aber in einer ganz anderen oder neuen Figma-Datei aus, erscheinen deine gespeicherten Animationen dort nicht, denn sie werden direkt in der Figma-Datei gespeichert und lassen sich nicht in eine andere Datei übertragen. In neuen Figma-Dateien musst du neue Animationen erneut anlegen. Alternativ kannst du in der aktuellen Figma-Datei eine neue Seite anlegen, auf der deine gespeicherten eigenen Animationen aus dieser Datei weiterhin verfügbar sind.

Deine gespeicherten eigenen Animationen nutzen

Sobald du mindestens eine eigene Animation gespeichert hast, kannst du sie in deinen Bannern nutzen, indem du in den Zeitleisten deiner Ebenen auf die Auswahlfelder für Eingangsanimationen und Ausgangsanimationen klickst. Dort siehst du eine neue Gruppe namens Custom Animations mit allen eigenen Animationen, die du gespeichert hast.

Eigene Animationen auf mehrere Ebenen anwenden: Wie andere Preset-Animationen kannst du auch deine eigene Animation gleichzeitig auf mehrere Ebenen anwenden.

Deine gespeicherten Animationen aktualisieren

Um eine zuvor gespeicherte eigene Animation zu aktualisieren, wähle sie im Menü Saved animations aus. Die gespeicherte Animation wird dann mit ihren Keyframes in das Panel für eigene Animationen geladen.

Danach kannst du Keyframes und Eigenschaften nach Bedarf bearbeiten. Wenn du mit den Änderungen zufrieden bist, klick auf den Button Update Saved Animation, um sie zu speichern und die bisherigen Keyframes der Animation zu überschreiben.

Beachte: Wenn du eine gespeicherte Animation aktualisierst, werden die aktualisierten Keyframes automatisch auf alle Ebenen deiner Banner angewendet, die diese eigene Animation bereits nutzen.

Eine neue Animation auf Basis einer gespeicherten Animation erstellen. Möchtest du eine gespeicherte Animation laden und ändern, ohne die gespeicherte Version zu „überschreiben“, gib einen neuen Animation name ein und klick auf den Button Add New Animation, um daraus eine neue Animation zu erstellen.

Gespeicherte Animationen löschen

Um eine Animation zu löschen, wähle unter Saved animations eine Option aus, um die Animation zu laden, und klick dann auf den Button Delete Saved Animation, um die gespeicherte Animation zu löschen.

Eine gelöschte gespeicherte Animation ist endgültig weg und wird von deinen Ebenen entfernt. Wenn du eine deiner gespeicherten Animationen löschst, wird sie dauerhaft aus der Liste Saved animations entfernt. Alle Ebenen in deinen Bannern, die die gelöschte eigene Animation genutzt haben, werden wieder auf keine Animation zurückgesetzt.