Keyframe-Eigenschaften bearbeiten

Passe die Eigenschaften X, Y, Scale, Rotation und Opacity deiner Keyframes an.

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.

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.