Mit Smart-Animation erweiterte Animationen erstellen
Bevor du anfängst
Wer kann diese Funktion verwenden
Nutzer*innen in jedem Teams und Abo
Nutzer*innen mit Schreibzugriff auf eine Datei können Prototypen erstellen und bearbeiten.
Nutzer*innen mit Lesezugriff auf eine Datei können Prototypen anzeigen.
Smart-Animation sucht nach übereinstimmenden Ebenen, erkennt Unterschiede und animiert Ebenen zwischen Rahmen (Frames) in einem Prototyp.
Du kannst Smart-Animation in der Liste der Übergänge auswählen, wenn du einen Prototyp erstellst. Du kannst Smart-Animation auch mit anderen Übergängen anwenden, um nahtlose Animationen zu erstellen.
Mithilfe von Smart-Animation kannst du schnell erweiterte Animationen erstellen. Verwende Smart-Animation um diese Vorgänge zu replizieren:
- Ladesequenzen
- Parallax-Scrolling
- Touch-Gesten, z. B. ziehen, wischen, gedrückt halten
- Schieberegler, Umschalter und Schalter
- Inhaltserweiterung (mehr/weniger anzeigen)
- Zum Aktualisieren ziehen
Weitere Informationen zu Smart-Animation erhältst du in unserem Blogbeitrag Announcing smart animate.
Unterstützte Eigenschaften
Smart-Animation sucht nach übereinstimmenden Ebenen, die über mehrere Rahmen verteilt sind. Figma berücksichtigt sowohl den Namen der Ebene als auch die Position innerhalb der Hierarchie.
Bei übereinstimmenden Ebenen erkennt Figma, was geändert wurde, und wendet zur Animation einen Übergang an.
Du kannst Smart-Animation auf komplette Objekte oder Komponenten, aber auch auf einzelne Ebenen einer Komponente oder Gruppe anwenden.
In der Regel ändern sich mehrere Eigenschaften eines Objekts zwischen Rahmen. Nachfolgend findest du eine Übersicht der unterstützten Eigenschaften.
Skalieren
Wenn sich die Größe eines Objekts zwischen den Rahmen ändert, stellt Figma animiert dar, wie sich das Objekt verkleinert oder vergrößert.
Position
Figma erkennt, ob sich die Position eines Objekts auf der X- oder Y-Achse geändert hat, und stellt in einem solchen Fall animiert dar, wie sich das Objekt von seiner aktuellen Position zu seiner Position im Zielrahmen bewegt.
Deckkraft
Smart-Animation kann auch die Deckkraft einer Ebene oder eines Objekts erkennen. Indem du die Deckkraft anpasst, kannst du ein Objekt zwischen Rahmen erscheinen oder verschwinden lassen.
Stelle die Deckkraft der Ebene auf 0 % ein, anstatt die Sichtbarkeit der Ebene zu ändern. Figma wendet beim Übergang einen Auflösungseffekt an, um die Deckkraft der Ebene animiert darzustellen.
Du kannst die Deckkraft über die Fülleigenschaften einer Ebene oder die Eigenschaft Ebene anpassen. Smart-Animation reagiert auf beide Einstellungen.
Wir empfehlen, die Deckkraft der gesamten Ebene anzupassen. Passe die Deckkraft im Tab Design unter der Einstellung Layer (Ebene) an.
Drehung
Smart-Animation berücksichtigt auch die Drehung und Ausrichtung der Ebene.
Du kannst zum Drehen eines Objekts das Drehsymbol in der rechten Seitenleiste oder auf der Arbeitsfläche verwenden. Hover mit dem Mauszeiger über der Ecke eines Objekts, bis der Drehcursor angezeigt wird.
Drehe eine oder mehrere Ebenen um einen Ankerpunkt.
Füllen
Smart-Animation erkennt Änderungen an der Füllung eines Objekts. Dadurch kannst du Änderungen zwischen Volltonfarben, Verläufen und sogar Bildfüllungen animieren.
Wichtige Hinweise
- Smart-Animation unterstützt keine Änderungen an Effekten oder Formen. Wenn eine Eigenschaft nicht unterstützt wird, wendet Figma beim Übergang standardmäßig einen Auflösungseffekt an.
- Smart-Animation unterstützt keine Overlay-Aktionen. Dies liegt daran, dass Figma Overlays wie neue Rahmen behandelt. Du kannst Smart-Animation verwenden, wenn du zwischen Overlays wechselst, sofern diese Overlays übereinstimmende Ebenen haben.
- Wenn du eine neue Ebene in den Zielrahmen einfügst, wird diese mit Smart-Animation mit einem Auflösungseffekt eingeblendet.
- Wenn die Eigenschaften einer Ebene zwischen zwei Rahmen gleich bleiben, wird die Ebene nicht animiert. Dies eignet sich hervorragend für Statusleisten und Menüs sowie für Interaktionen, wenn du nicht zu einer anderen Benutzeroberfläche wechseln möchtest.
- Wenn du für eine oder mehrere Ebenen das Kontrollkästchen Fix Position when Scrolling (Position beim Scrollen fixieren) aktivierst, fügt Figma diese der Liste Fixed (Fixiert) mit den fixierten Ebenen hinzu. Smart-Animation behandelt Ebenen anders, wenn du sie mit anderen Übergängen kombinierst.
Smart-Animation anwenden
Es gibt zwei Möglichkeiten, Smart-Animation für deine Prototypen zu verwenden: als eigenständigen Übergang oder indem du übereinstimmende Ebenen mit einer anderen Animation verwendest.
Smart-Animation
Wähle im Übergangsfeld Smart Animate aus, um den Übergang zwischen zwei Rahmen mit Smart-Animation zu animieren.
- Öffne den Prototyp-Tab in der rechten Seitenleiste.
- Wähle auf der Arbeitsfläche eine Ebene, eine Gruppe oder einen Rahmen aus. Am rechten Rand wird ein Verbindungsknoten angezeigt.
- Klicke auf den Knoten und ziehe ihn zum nächsten Rahmen, um eine Verbindung zu erstellen.
- Definiere die Interaktion in der rechten Seitenleiste, indem du einen Auslöser und eine Aktion festlegst. Der zweite Rahmen wird als Ziel festgelegt.
- Wähle im Abschnitt Animation im Übergangsfeld Smart Animate aus.
- Wende Easing auf den Übergang an oder ändere die Einstellung Duration (Dauer) (optional).
- Wiederhole diesen Vorgang für alle anderen Rahmen, auf die du Smart-Animation anwenden möchtest.
- Klicke in der Symbolleiste auf das Symbol , um den Prototyp in der Präsentationsansicht zu öffnen.
In unserem Beispiel unten siehst du drei Rahmen mit mehreren übereinstimmenden Ebenen. Wir wollen mit Smart-Animation animiert darstellen, wie der Abel Tasman Coast Track aus der Favoritenliste entfernt wird.
Dank Smart-Animation sehen wir nun einen reibungslosen Wechsel zwischen den einzelnen Rahmen des Prototyps.
Smart-Animation auf übereinstimmende Ebenen anwenden
Wenn du Smart-Animation während eines anderen Hauptübergangs auf mehrere Ebenen im Prototyp anwenden möchtest, kannst du das Kontrollkästchen Smart Animate Matching Layers (Smart-Animation auf übereinstimmende Ebenen anwenden) aktivieren.
Figma behandelt fixierte Ebenen anders, wenn die Smart-Animation mit anderen Übergängen verwendet wird.
- Nicht übereinstimmende Ebenen: Der von dir gewählte Hauptübergang wird verwendet.
- Übereinstimmende Ebenen: Smart-Animation wird auf alle Unterschiede bei unterstützten Eigenschaften angewendet.
- Übereinstimmende fixierte Ebenen: Es wird kein Übergang angewendet.
- Nicht übereinstimmende fixierte Ebenen: Anstelle des gewählten Übergangs wird ein Auflösungseffekt angewendet.
Um die Option Smart Animate Matching Layers (Smart-Animation auf übereinstimmende Ebenen anwenden) zu verwenden, aktiviere das Kontrollkästchen in der rechten Seitenleiste, wenn du die Animation anpasst:
Im folgenden Beispiel siehst du eine Statusleiste und eine Navigation, die in allen drei Rahmen vorhanden sind. Diese sollen beim Wechsel zwischen Tabs fixiert bleiben.
Als Übergang zwischen den Rahmen wurde Push (Schieben) festgelegt. Das Kontrollkästchen neben Smart Animate Matching Layers (Smart-Animation auf übereinstimmende Ebenen anwenden) ist deaktiviert.
In diesem Prototyp wird für alle Inhalte im Ziel-Rahmen der Übergang Push (Schieben) verwendet. So entsteht der Eindruck, zwischen verschiedenen Screens des Prototyps zu wechseln.
Wenn du das Kontrollkästchen neben Smart Animate Matching Layers (Smart-Animation auf übereinstimmende Ebenen anwenden) aktivierst, bleiben die Statusleiste und die Navigation fixiert, während der restliche Inhalt mit Push (Schieben) verschoben wird.
Tipps für Smart-Animation
Vor der Einführung von Smart-Animation waren Ebenennamen in Figma eher unwichtig. Da aber für Smart-Animation der Ebenenname und die Hierarchie erforderlich sind, musst du nun möglicherweise einen anderen Ansatz wählen.
Nachfolgend findest du verschiedene Möglichkeiten, wie du unerwartete Ergebnisse bei Smart-Animation korrigieren kannst.
Tipp! Wir empfehlen, beim Erstellen des Prototyps eine längere Dauer festzulegen. So kannst du besser erkennen, was passiert, und Anpassungen vornehmen.
Ebenennamen
Um schnell Rahmen für eine Smart-Animation zu erstellen, kannst du diese einfach duplizieren. Dadurch bleiben die Namen zwischen den einzelnen Rahmen konsistent. Anschließend kannst du in den einzelnen Rahmen Ebenen hinzufügen und entfernen.
Figma benennt Rahmen und Ebenen danach, wie du diese duplizierst oder kopierst und einfügst.
- Innerhalb eines Rahmens: Die Ebenen werden durchnummeriert. Beispiel: Rahmen 1, Rahmen 2 usw.
- Bei Übernahme in einen neuen Rahmen: Die Namen werden übernommen. Beispiel: Wenn du
Rectangle 1aus einem Rahmen kopierst, wird die Form in den nächsten Rahmen alsRectangle 1eingefügt.
Du hast möglicherweise Objekte oder Ebenen, die in mehreren Rahmen vorkommen, aber in jedem anders heißen. Vielleicht hast du auch unterschiedliche Ebenen, die alle gleich heißen, aber während eines Übergangs nicht mittels Smart-Animation miteinander abgeglichen werden sollen.
Du kannst Ebenennamen in der linken Seitenleiste im Ebenen-Tab anzeigen und aktualisieren. Hier erfährst du, wie du mehrere Ebenen gleichzeitig umbenennen kannst.
Übereinstimmende Ebenen anzeigen
Figma hat es außerdem vereinfacht, Ebenen oder Objekte zu identifizieren, die in mehreren Rahmen vorhanden sind bzw. übereinstimmen. Dies gilt für alle Ebenen, Gruppen, Rahmen und Komponenten.
- Öffne in der rechten Seitenleiste den Prototyp-Tab.
- Hover mit dem Mauszeiger über einem Objekt oder einer Ebene auf der Arbeitsfläche.
- Figma hebt diese Ebene in allen anderen Rahmen hervor, in denen sie vorhanden ist.
Reihenfolge und Hierarchie der Ebenen
Bei der Smart-Animation und deren Anwendung auf übereinstimmende Ebenen wird die Reihenfolge bzw. Hierarchie der Ebenen berücksichtigt.
Normalerweise wird mit Move in (Hereinbewegen) oder Slide in (Hereinschieben) der gesamte Zielrahmen über den ursprünglichen Rahmen geschoben. Wenn Smart-Animation auf übereinstimmende Ebenen angewendet wird, werden Ebenen gemäß ihrer Hierarchie hineinbewegt oder -geschoben. Dies kann zu Verwirrung oder unerwarteten Ergebnissen führen.
Im Screenshot unten sind zwei übereinstimmende Objekte in den Rahmen zu sehen (Explorer 1 und Explorer 2). Dies sind die Statusleiste und die Navigation.
Wenn sich über den übereinstimmenden Ebenen weitere Ebenen befinden, werden diese über dem Zielrahmen animiert. In unserem Screenshot unten sehen wir, wie Ebenen aus Explorer 1 über dem Zielrahmen erscheinen.
Indem wir die übereinstimmenden Ebenen stattdessen in der Hierarchie ganz nach oben verschieben, können wir sicherstellen, dass die kompletten Zielrahmen über dem ursprünglichen Rahmen platziert werden.
Ebenen gruppieren
Um genauer festzulegen, worauf Smart-Animation angewendet werden soll, werden übereinstimmende Ebenen anhand des Namens und der Hierarchie zugeordnet. Dadurch kannst du die Zuordnung von Ebenen zwischen Rahmen schnell aufheben.
Angenommen, du hast in jedem Rahmen fünf Rechtecke. Diese Rechtecke haben in jedem Rahmen einen anderen Inhalt. Sie wurden mit Trip 1 bis Trip 5 benannt.
Wenn du für den Übergang Push (Schieben) verwendest, erkennt Smart-Animation sie als übereinstimmende Ebenen. Anstatt diese Rechtecke als neuen Inhalt zu behandeln, animiert Figma die Positionsänderung auf intelligente Weise.
Um dieses Verhalten zu ändern, kannst du die Rechtecke in jedem Rahmen gruppieren und ihnen einen eindeutigen Namen geben.
In der Vorschau des Übergangs siehst du, dass Smart-Animation sie nicht mehr als übereinstimmende Ebenen erkennt. Der Inhalt wird mittels Push (Schieben) zusammen eingeschoben, wodurch der Prototyp erheblich natürlicher wirkt.
Smart-Animation mit Hineinschieben und Hineinbewegen
Bei der Verwendung von Smart Animate Matching Layers (Smart-Animation auf übereinstimmende Ebenen anwenden) mit den Übergängen „Hineinschieben“ und „Hineinbewegen“ sind ein paar Dinge zu beachten.
Wenn die Option aktiviert ist, werden alle übereinstimmenden Ebenen zwischen Rahmen animiert. Dies bedeutet, dass nicht wie bisher der gesamte Zielrahmen (B) über dem ersten Rahmen (A) animiert werden kann.
Auch die Füllung eines Rahmens wird nicht in die Animation einbezogen. Dies kann dazu führen, dass sich Ebenen überlappen und ein unschöner Übergang entsteht.
Um dies zu verhindern, kannst du hinter den anderen Ebenen ein komplett gefülltes Rechteck hinzufügen. In dem Prototyp wird nun der Inhalt jedes Rahmens zusammen verschoben.
