Smart Animate ist Figmas Transition-Typ im Prototyping-Modus, der automatisch Layer mit identischen Namen zwischen zwei Frames vergleicht und ihre Positionsänderungen, Größenänderungen und Opacity-Übergänge als flüssige Animation interpoliert.
Rubrik: Software & Tools · Unterrubrik: Figma · Niveau: Fortgeschritten Synonyme / Auch bekannt als: Smart Animate Transition, Figma Animation, Auto-Transition; Prototyping-Transition „Smart Animate"
Was ist Smart Animate?
Smart Animate wurde 2019 eingeführt und revolutionierte Figmas Prototyping-Möglichkeiten. Statt einen statischen Übergang von Frame A zu Frame B zu zeigen, analysiert Smart Animate die Layer beider Frames: Layers, die in beiden Frames denselben Namen haben, werden als „dasselbe Element" erkannt und ihre Eigenschaftsunterschiede (Position, Größe, Farbe, Opacity, Rotation) werden zwischen den beiden Zuständen animiert.
Das Ergebnis sind flüssige, realistische Micro-Interaktionen – ähnlich wie in nativen Apps oder CSS-Transitions –, ohne eine einzige Zeile Code zu schreiben.
Erklärung
Wie Smart Animate funktioniert
Smart Animate basiert auf einem einfachen Prinzip:
- Zwei Frames werden mit einer Prototyping-Verbindung verbunden.
- Als Transition wird „Smart Animate" ausgewählt.
- Bei der Prototyp-Ausführung vergleicht Figma alle Layer in Frame A mit allen Layern in Frame B.
- Layer mit identischen Namen werden als dasselbe Element betrachtet – Figma interpoliert ihre Eigenschaftsunterschiede:
- Position (X, Y): Das Element bewegt sich von seiner Position in Frame A zu seiner Position in Frame B. - Größe (W, H): Das Element skaliert von einer Größe zur anderen. - Opacity: Das Element blendet ein oder aus. - Rotation: Das Element dreht sich. - Farbe/Fill: Die Farbe wechselt graduell. - Corner Radius: Die Eckenrundung verändert sich.
- Layer, die nur in Frame A existieren, blenden aus. Layer, die nur in Frame B existieren, blenden ein.
Layer-Namen als Verbindungsschlüssel
Der entscheidende Faktor ist der identische Layer-Name. Ein Button mit dem Layer-Namen „Button/Primary" in Frame A wird mit einem Layer „Button/Primary" in Frame B verbunden. Heißt er in Frame B „Button", gibt es keine Verbindung und er wird einfach eingefadet.
Wichtig: Nicht nur der direkte Layer-Name, sondern auch der gesamte Layer-Pfad muss übereinstimmen. Wenn ein Element in Frame A in einem Container namens „Header" liegt und in Frame B in einem Container namens „Navbar", erkennt Smart Animate sie nicht als dasselbe Element.
Easing und Dauer
Wie alle Prototyping-Transitions bietet Smart Animate konfigurierbare Easing-Kurven und Dauer:
- Dauer: Standard 300ms, anpassbar von 1ms bis 10.000ms.
- Easing: Ease In, Ease Out, Ease In and Out, Linear, Spring (physikbasiert).
- Spring-Animationen: Besonders für Micro-Interaktionen empfehlenswert, da sie natürlichere, physikbasierte Bewegungen erzeugen.
Smart Animate mit Variants (Interactive Components)
Die mächtigste Anwendung von Smart Animate ist in Kombination mit Interactive Components: Innerhalb eines Component Sets können Prototyping-Verbindungen zwischen Varianten definiert werden. Diese Verbindungen nutzen automatisch Smart Animate, um z. B. Hover-States flüssig zu animieren.
Für Interactive Components:
- Component Set auswählen.
- In der ersten Variante (z. B. Default) ein Element auswählen.
- Im Prototyping-Tab eine Interaktion hinzufügen: „While Hovering" → „Change To" → „Hover Variant" → „Smart Animate".
- Jede Instanz dieser Component hat nun automatisch die Hover-Animation.
Shared Element Matching-Logik
Smart Animate matcht Layer nach folgenden Regeln:
- Gleicher Name im selben Parent-Container → Sicher gematcht.
- Gleicher Name in verschiedenen Containern → Möglicherweise nicht gematcht.
- Layer in Groups werden nach Gruppen-Name gematcht, dann nach internem Layer-Namen.
- Auto-Layout-Container werden berücksichtigt.
Um sicheres Matching zu gewährleisten: Layer so benennen wie Komponenten und ihre Hierarchie konsistent halten.
Grenzen von Smart Animate
Smart Animate kann nicht animieren:
- Änderungen an der Layer-Hierarchie (z. B. wenn ein Element von einem Container in einen anderen verschoben wurde).
- Komplexe Pfadmorphing (z. B. ein Kreis, der sich in ein Viereck verwandelt).
- Schriftartwechsel.
- Komplexe Effekte wie Blur.
Für komplexe Animationen, die über Smart Animate hinausgehen, empfehlen sich spezialisierte Tools wie ProtoPie, Principle oder direkte Code-Implementierung.
Beispiele
- Button-Hover-Effekt: Button im Default-State (weiß, kein Schatten) → Hover-State (leicht grau, Schatten). Smart Animate animiert die Hintergrundfarbe und den Schattenwert flüssig.
- Card-Expand-Animation: Eine Produktkarte in Listenansicht (klein, wenige Infos) → Detailansicht (groß, alle Infos). Smart Animate bewegt und skaliert den Card-Frame.
- Navigation-Tab-Wechsel: Aktiver Tab-Indikator (kleiner Balken unter dem Tab) bewegt sich von Tab A zu Tab B – Smart Animate animiert die X-Position des Indikators.
- Floating Action Button → Modal: FAB wächst durch eine FAB→Modal-Animation zu einem vollständigen Modal-Dialog (Layer „FAB/Button" transformiert zu „Modal/Container").
- Onboarding-Swipe: Zwischen Onboarding-Screens wird per Swipe-Gesture und Smart Animate ein horizontaler Slide-Übergang mit flüssiger Textbewegung erzeugt.
In der Praxis
Shortcuts und Workflow:
- Smart Animate als Transition auswählen: Prototyping-Verbindung erstellen → im Transition-Dropdown „Smart Animate" wählen.
- Testen im Prototype-Modus:
Strg+Alt+Enter/Cmd+Option+Enter.
Best Practices:
- Layer-Namen von Anfang an konsequent und eindeutig benennen – das ist die Voraussetzung für funktionierendes Smart Animate.
- Spring-Easing für natürlichere Interaktionen verwenden; Linear-Easing für mechanische, schiebende Bewegungen.
- Dauer unter 400ms halten für flüssige UI-Animationen; längere Dauern nur für narrative Übergänge.
- Für Interactive Components Smart Animate auf „While Hovering" setzen für hover-sensitiv Prototypen.
- Zwei Frames nebeneinander auf der Canvas platzieren und manuell vergleichen, welche Layer gleich benannt sind, bevor man die Verbindung zieht.
Häufige Fehler:
- Layer unterschiedlich benennen in Frame A und Frame B – dann erkennt Smart Animate keine Verbindung.
- Zu viele animierte Elemente gleichzeitig – das überlastet den Browser-Prototyp und wirkt unruhig.
- Smart Animate mit zu langer Dauer (>600ms) verwenden – das fühlt sich in UI-Interaktionen schleppend an.
Vergleich & Abgrenzung
Adobe XD hat eine ähnliche Funktion namens „Auto-Animate" – konzeptuell identisch, aber mit weniger Kontrolle über Easing und Dauer. Principle (Mac-only) bietet deutlich mehr Animations-Power mit einem Keyframe-Timeline-Editor. ProtoPie erlaubt variablengesteuerte, triggerbasierte Animationen. CSS Transitions in der Entwicklung sind das Äquivalent: transition: all 300ms ease-in-out;. Smart Animate ist ideal für die meisten UI-Animations-Anwendungsfälle; für komplexe Interaktionsdesigns empfiehlt sich ein spezialisiertes Animations-Tool.
Häufige Fragen (FAQ)
Warum animiert Smart Animate nicht alle meine Layer? Wahrscheinlich haben die betreffenden Layer in Frame A und Frame B unterschiedliche Namen oder sind in unterschiedlichen Containern (Parent-Frames/Groups). Namen angleichen und sicherstellen, dass sie in der gleichen Hierarchie-Ebene liegen.
Kann ich Smart Animate für echte CSS-Animationen verwenden? Smart Animate ist ein Prototyping-Feature und hat keinen direkten CSS-Export. Die animierten Eigenschaften (Position, Opacity, Scale) können aber manuell in CSS-Transitions oder CSS-Keyframes übersetzt werden. Anima (Plugin) kann CSS-Animationen aus Figma-Frames generieren.
Unterstützt Smart Animate auch Textübergänge? Figma animiert bei Smart Animate Textfarbe und Opacity, aber keine Textinhalt-Änderungen (Text morphing). Wenn sich nur der Text ändert, sieht es wie ein Dissolve aus, nicht wie eine flüssige Textänderung.
Verwandte Einträge
Weiterführend
- Figma Help Center – help.figma.com/de
- Figma-Dokumentation: „Smart animate layers between frames" – help.figma.com
- Figma: „Smart Animate Tutorial" (Official Figma YouTube Channel, 2022)
