Smart Animate in Figma ist ein Prototyping-Übergang, der Elemente mit identischen Namen in zwei aufeinanderfolgenden Frames automatisch morpht – für flüssige Animationen ohne manuelles Keyframing.
Rubrik: Software & Tools Deep-Dive · Unterrubrik: Figma · Niveau: Einsteiger Synonyme / Auch bekannt als: Automatische Animation, Morph-Übergang, Shared-Element-Transition
Was ist Smart Animate?
Smart Animate ist eine Transition-Option im Figma-Prototype-Tab. Wenn ein Nutzer von Frame A zu Frame B navigiert und beide Frames Elemente mit identischen Layer-Namen enthalten, animiert Figma diese Elemente automatisch von ihrer Position/Größe/Form in Frame A zu ihrer Position/Größe/Form in Frame B. Das Ergebnis sind professionelle, flüssige Übergänge, wie man sie aus nativen Apps kennt.
Erklärung
Das Matching-Prinzip
Smart Animate basiert auf Layer-Namen-Matching: Hat Frame A ein Element namens Card/Image und Frame B ebenfalls ein Element namens Card/Image, animiert Figma dieses Element nahtlos zwischen den beiden Frames. Figma interpoliert dabei:
- Position (X/Y-Koordinaten)
- Größe (Breite/Höhe)
- Rotation
- Opacity (Transparenz)
- Fill-Farbe (sofern gleicher Typ)
- Corner Radius
- Scale
Elemente, die nur in Frame A vorhanden sind, faden aus; Elemente, die nur in Frame B vorhanden sind, faden ein.
Easing und Duration
Smart-Animate-Übergänge lassen sich präzise steuern:
- Duration: Animationsdauer in Millisekunden (typisch: 200–500ms).
- Easing: Bewegungskurve
- Ease In/Out: Sanftes Beschleunigen und Abbremsen (natürlichste Option) - Ease In: Beginnt langsam, endet schnell - Ease Out: Beginnt schnell, endet langsam - Linear: Konstante Geschwindigkeit (mechanisch wirkend) - Custom Bezier: Beliebige Kurve über Kontrollpunkte - Spring: Federbewegung mit konfigurierbarer Steifigkeit und Dämpfung
Smart Animate mit Variants
Smart Animate entfaltet seine volle Kraft in Kombination mit Interactive Components und Variants. Wenn zwei Varianten desselben Component Sets (z. B. Tab/Inactive und Tab/Active) identische Layer-Namen haben, wechselt der Übergang zwischen ihnen mit einer Smart-Animate-Transition. So werden Hover-States, Fokus-Übergänge und Zustandswechsel in Buttons lebendig.
Vorbereitung für gute Animationen
Für optimale Smart-Animate-Ergebnisse sollten folgende Voraussetzungen erfüllt sein:
- Konsistente Layer-Namen: Gleiche Elemente in beiden Frames haben exakt denselben Namen.
- Gleiche Layer-Hierarchie: Tief verschachtelte Elemente matchen nur, wenn die Hierarchiepfade übereinstimmen.
- Kein Clip Content: Elemente, die geclippt sind, können ihre Grenzen beim Animieren unschön schneiden.
- Ausreichende Duration: Unter 150ms wirken Übergänge zu abrupt; über 600ms zu langsam.
Scroll-Animationen
Seit 2023 unterstützt Figma auch Scroll Animations: Elemente können beim Scrollen innerhalb eines Frames eingeblendet, skaliert oder verschoben werden. Das ist besonders für Landingpage-Prototypen und die Kommunikation von Scroll-Effekten an Entwickler nützlich.
Beispiele
- Komponenten-System: Ein
Card-Component wechselt bei Klick von einer kompakten Listenansicht in eine erweiterte Detailansicht. Dank Smart Animate morpht die Karte flüssig in die Detail-View. - Responsive Design: Beim Wechsel von Mobile zu Desktop wandert die Navigation von unten (Tab Bar) nach links (Sidebar) – Smart Animate zeigt diesen Übergang visuell.
- Prototyping/Handoff: Entwickler sehen im Prototype exakt, wie schnell und mit welchem Easing ein Element animieren soll – Animationswerte können aus dem Prototype abgelesen werden.
- Team-Workflow: Motion-Designer nutzen Smart Animate für die Bewegungsspecifikation; Animationsdauer und Easing werden in einer Motion-Library dokumentiert.
- Fortgeschrittene Kombination mit Interactive Components: Ein Toggle-Switch wechselt per Smart Animate zwischen
OffundOn-Variante – der Thumb bewegt sich flüssig von links nach rechts.
In der Praxis
Smart Animate aktivieren: Prototype-Verbindung erstellen → Transition-Dropdown → „Smart Animate" wählen Duration setzen: Im Verbindungs-Panel → Duration-Feld in ms ändern Easing auswählen: Easing-Dropdown → Kurventyp wählen oder Custom Bezier eingeben Layer-Namen prüfen: Layer-Panel beider Frames vergleichen – identische Namen = Matching garantiert Variant-Übergang: In Interactive Component → zwischen Varianten → Smart Animate als Transition Vorschau: Cmd+Enter → Presentation Mode → Interaktion testen
Vergleich & Abgrenzung
| Smart Animate | Dissolve | Move In/Out | Push | |
|---|---|---|---|---|
| Element-Tracking | Ja | Nein | Nein | Nein |
| Morph zwischen Frames | Ja | Nein | Nein | Nein |
| Geeignet für | Zustandsübergänge | Einfache Seitenübergänge | Slide-Navigation | Navigation |
Smart Animate ist am aufwendigsten in der Vorbereitung (Layer-Namen), produziert aber die realistischsten Animationen. Dissolve ist die einfachste Option für schnelle Seitenübergänge ohne Animation. Im Vergleich zu Adobe XD Auto-Animate funktioniert Figmas Variante ähnlich, ist aber tiefer in das Component- und Variants-System integriert.
Häufige Fragen (FAQ)
Warum animiert Smart Animate mein Element nicht? Die häufigste Ursache ist ein abweichender Layer-Name. Prüfe, ob Groß-/Kleinschreibung und Sonderzeichen in beiden Frames identisch sind. Ein weiterer Grund: Das Element ist in eine Group oder einen Frame eingebettet, dessen übergeordneter Name nicht übereinstimmt – auch die Hierarchie muss matchen.
Kann ich mehrere Elemente gleichzeitig mit Smart Animate animieren? Ja. Alle Layer mit übereinstimmenden Namen in beiden Frames werden gleichzeitig animiert. Man kann einzelne Elemente vom Matching ausnehmen, indem man ihnen in einem der Frames einen anderen Namen gibt.
Verwandte Einträge
Weiterführend
- Figma Help Center – help.figma.com/hc/en-us/articles/360039818874
- Figma (2024): Smart Animate. Figma Docs.
- Online: UX Movement – „How to create smooth Figma animations with Smart Animate"
