Wir präsentieren Figma Motion: Deine Arbeitsfläche hat jetzt eine Zeitleiste
Bewegung ist auf der Arbeitsfläche verfügbar – in der Datei wie Komponenten, Variablen und dein Team –, sodass deine Entwürfe von Anfang an zum Leben kommen.
Wir präsentieren Figma Motion: Deine Arbeitsfläche hat jetzt eine Zeitleiste teilen
Kundenbeispiel: Atlassian
Für Atlassian hat die Bewegungsfunktion auf der Arbeitsfläche die Hindernisse beseitigt, die einer Veröffentlichung im Wege stehen könnten. „Dadurch werden animierte Illustrationen von einer Aufgabe für Spezialisten zu einer Systemfunktion“, sagt die leitende Produktdesignerin Alexandra Pereira. „Der Dev Mode und die Möglichkeit, Kommentare auf der Zeitleiste zu hinterlassen, ermöglichen einen reibungslosen Austausch.“
Designer*innen, die sich mit Bewegung nicht so gut auskennen, führt der Agent durch die Grundlagen. „Als ich ein Banner animierte, forderte ich den Agenten auf, mir Vorschläge zu geben, was funktionierte und was nicht“, sagt Lead Produktdesigner Davy Fung. Das hilft dabei, Bewegung für alle verständlich zu machen, sagt Lead Motion Designer Maxwell Hathaway: „Die Leute sehen, wie sich Dinge wirklich schnell bewegen, und dieser Einblick wird ihnen helfen, schneller einen Sinn für das zu entwickeln.“
Wenn Bewegung richtig eingesetzt wird When you’re designing motion, you’re designing with time. Understanding the mechanics turns movement into meaning.Principles in motion
Ab heute ist Bewegung nativ in derselben Arbeitsfläche integriert, in der sich auch der Rest deiner Entwürfe befindet. Bewegung ist kein Engpass mehr und auch keine Aufgabe für eine Person allein. Alle Designer*innen können den Figma Agenten jetzt mit Prompts dazu bringen, Animationen direkt auf der neuen Animationszeitleiste zu erstellen – das senkt die Einstiegshürde und erweitert gleichzeitig die Möglichkeiten. Und dank des Zugriffs auf den Dev Mode und dessen Funktionen ist das gesamte Erlebnis auf einen deutlich reibungsloseren Übergang ausgelegt.
Designe und animiere in derselben Datei
In Kürze sind benutzerdefinierte Animationsstile verfügbar, sodass du bald deine eigenen erstellen und speichern kannst.
Neben den Modi „Design“, „Draw“ und „Dev“ ist „Motion“ die neueste Ebene eines vernetzten Erlebnisses auf der Arbeitsfläche. Schalte einen beliebigen Frame in den Bewegungsmodus um, und die Zeitleiste wird neben deinem Entwurf angezeigt.
- Zeitsteuerung: Zieh Ebenen per Drag und Drop, um das Timing anzupassen; scroll durch die Zeitleiste, um einen beliebigen Moment in der Vorschau anzusehen; und lege Position, Skalierung, Drehung und Deckkraft für jeden Keyframe einzeln fest. Aktiviere die automatische Keyframe-Erstellung, um jede Änderung aufzuzeichnen, die du vornimmst, während sich der Abspielkopf bewegt. Und dank der zeitgestützten Kommentare auf der Arbeitsfläche kann jeder auf einen bestimmten Moment in der Animation hinweisen und so das gesamte Team in die Bewegungsbesprechungen einbeziehen.
- Animationsstile: Füge voreingestellte Animationsstile hinzu – Einblenden, Verschieben, Skalieren –, um schnell loszulegen, und verfeinere das Ganze anschließend auf der Arbeitsfläche. Du kannst Animationsstile auf der Zeitachse übereinanderlegen, damit sie gleichzeitig abgespielt werden, oder sie per Drag und Drop in die gewünschte Reihenfolge ziehen.
„Atomic Design“ heißt jetzt „Atomic Motion Design“, weil ich Keyframes auf der Arbeitsfläche habe. Das ist das letzte große Puzzlestück in der Welt der Interaktivität.
Kundenprofil: Adanna Onuekwusi
Für die Produktdesignerin und Illustratorin Adanna Onuekwusi war Bewegung schon immer ein Mittel, um Freude und Emotionen in ihre Arbeit zu bringen. Aber der Wechsel zwischen externen Tools, browserbasierten Plugins und Figma, um eine einzige Illustration zu animieren, bedeutete ständiges Umschalten zwischen verschiedenen Arbeitsumgebungen. Wenn die Bewegung direkt auf der Arbeitsfläche stattfindet, ändert sich das. „Alles an einem Ort zu haben, ist wirklich hilfreich“, sagt sie. „Ich kann den Bewegungsprozess systematisieren und ihn als Bibliothek veröffentlichen, sodass er sich von etwas, das eine Person macht, zu etwas entwickelt, wovon andere profitieren können.“
Baue ein Bewegungssystem für alle deine Dateien
Gute Bewegung ist nicht nur eine Ansammlung von einmaligen Animationen. Es ist ein Satz von Werten, die einmal definiert und überall angewendet werden. Aber die meisten Teams hatten nie einen Ort, um dieses System aufzubauen, sodass Bewegung in jedem Sprint von Grund auf neu erstellt wird, und das, was ausgeliefert wird, spiegelt wider, wer gerade Zeit hatte, nicht das, was entworfen wurde.
- Animierte Komponenten: Komponenten sind die grundlegende Einheit eines Designsystems. Jetzt umfassen sie auch Bewegung. Sobald du eine Animation für eine Komponente erstellt hast, wird sie – genau wie die Füllfarbe und die Typografie – mit dieser Komponente auf jeden Bildschirm und in die Datei aller Mitwirkenden übertragen.
- Bewegungsvariablen: Mit Bewegungsvariablen kannst du diese Animation individuell anpassen. Erstelle eine Easing-Variable, definiere mehrere Modi für diese Variable und wende sie auf alle deine Animationen an. Wechsle den Modus auf Seitenebene, und alle Animationen, die auf diese Variable verweisen, werden sofort aktualisiert.
Wenn es etwas ist, mit dem du jeden Tag zu tun hast, sollte Software bei dir ein Gefühl auslösen. Bewegung ist ein weiterer Weg, das zum Leben zu erwecken.
Shader-Effekte und Bewegung
Jede Eigenschaft, die ein Shader bereitstellt, kann nun auf der Bewegungszeitleiste mit Keyframes versehen werden. Traditionell waren die animierbaren Eigenschaften von Figma begrenzt. Shader ändern das – alles, was du mit einem Schieberegler oder einem Eingabefeld steuern kannst, lässt sich jetzt mithilfe von Keyframes im Zeitverlauf animieren.
3D-Transformationen bald verfügbar
Bewegung und 3D-Transformationen sind Teil derselben Designentscheidung. Wenn du darüber nachdenkst, wie sich etwas bewegt, überlegst du dir, wo es sich im Raum befindet.
Mit 3D-Transformationen kannst du Rahmen, Vektoren und Text um die Z-Achse drehen – mit integrierten Steuerelementen und einer Live-Vorschau, während du sie ziehst. Jede Transformation bleibt vollständig editierbar. Das Ergebnis wird in CSS exportiert und über MCP eingebunden, sodass das von dir erstellte räumliche Design genau dem im Code entspricht. Kombiniere 3D-Transformationen mit Bewegungen in derselben Datei, und du kannst räumliche Interaktionen prototypisieren, die in Figma bisher nicht möglich waren.
Erreiche mehr mit dem Figma Agenten
Bewegung ist technisch anspruchsvoll. Für Designer*innen, die noch nie zuvor Animationen erstellt haben, erleichtert der Figma Agent Ab heute kannst du mit einem für Figma entwickelten Agent arbeiten – direkt auf der Arbeitsfläche.Der Design-Agent von Figma ist da
Für Designer*innen, die bereits mit Animationen arbeiten, übernimmt das Programm die Routineaufgaben, sodass ihr euch darauf konzentrieren könnt, das Projekt voranzutreiben und die Details zu verfeinern. Passe die Beschleunigungskurve oder das Timing an, füge eine Eigenschaft hinzu oder reiß das Ganze wieder ab und überdenk es noch einmal. Du kannst mehrere Prompts gleichzeitig ausführen, sodass du deinen Arbeitsfluss beibehalten kannst, während der Agent mehrere Frames bearbeitet.
Die Möglichkeit, innerhalb festgelegter Grenzen zu erstellen, ist für Unternehmenssysteme unerlässlich. Das garantiert Konsistenz, Zugänglichkeit und eine hohe Umsetzungsqualität ebenso wie Schnelligkeit.
Liefere die von dir entworfene Animation
Die Bewegung in der Produktion entspricht selten genau dem, was entworfen wurde. Details, deren Feinabstimmung Stunden gedauert hat – wie zum Beispiel Übergänge und Timing –, gehen bei der Übertragung von der Datei in den Code verloren. Figma schließt diese Lücke schon, bevor es zur Übergabe kommt. Wählen Sie jeden animierten Frame aus und exportieren Sie ihn direkt aus der Datei als MP4, GIF, SVG oder WEBM, damit Sie frühzeitig Ausrichtung und Feedback einholen können.
Sobald die Datei ready for dev ist, wechsle in den Dev Mode und öffne den Reiter „Bewegung“. Die vollständige Zeitleiste ist sichtbar und inspizierbar. Jeder Zeitwert, jede Beschleunigungskurve und jeder Keyframe ist lesbar, ohne dass eine Interpretation seitens der Entwickler*innen nötig ist. Sie können Animationscode direkt aus dem Panel in CSS, JSON oder in Framework-kompatiblem React und motion.dev kopieren.
Außerdem ist Bewegung MCP-kompatibel Figma’s MCP server brings your design decisions into the tools where code gets written—so what gets built actually matches what was designed. Here’s what that unlocks for everyone who builds products.
The TL;DR on MCP: Why context matters and how to put it to work
Wenn ein Teammitglied die Animationen problemlos prüfen und in die von uns benötigten Formate konvertieren kann, verringert das die Kluft zwischen der ursprünglichen Idee und der Fertigstellung.
Animation ist nicht mehr ein abschließender Schritt oder ein Umfangsrisiko. Bewegung durchläuft jetzt den Designprozess genauso wie alles andere: vom ersten Frame bis zum endgültigen Ergebnis, an einem Ort.
Motion ist in der offenen Beta-Version. Starter-Benutzer*innen können auf Motion zugreifen, allerdings mit eingeschränkten Exportmöglichkeiten. Benutzer*innen mit einer Full-Lizenz können in allen Abos auf Bewegungsprimitive zugreifen und diese exportieren. Die vollständige Integration des Designsystems und der Figma Agent für Animationen sind in den kostenpflichtigen Abos verfügbar.
Lerne die Grundlagen für effektives Motion Design kennen und übe dich praktisch in der Erstellung von Animationen in Figma Motion. Probiere die Bewegung selbst in unserer Testumgebungsdatei aus oder beginne im Hilfe-Center. Melde dich hier an, um auf die Warteliste für 3D-Transformationen zu kommen.
Lies den Rückblick auf Config von Figma-CEO und Mitbegründer Dylan Field.
