Zu Hauptinhalten gehen

Figma Motion

Erstelle präzise, produktionsreife Animationen direkt auf der Arbeitsfläche.

LoslegenFigma Motion ausprobieren

Bewegungsdesign, wo du gestaltest.

Egal, ob du einfach nur neugierig auf Bewegung oder ein Profi bist – deine Designs zu dehnen, zurückfedern zu lassen und zusammenzudrücken ist ganz einfach.

  • Eine Person nutzt den KI-Agenten von Figma, um eine Animation für eine App für Outdoor-Aktivitäten zu erstellen. Im Prompt-Eingabefeld wird der Agent aufgefordert, eine Animation im „Glitch“-Stil zu erstellen, bei der die Formen versetzt angeordnet sind.Eine Person nutzt den KI-Agenten von Figma, um eine Animation für eine App für Outdoor-Aktivitäten zu erstellen. Im Prompt-Eingabefeld wird der Agent aufgefordert, eine Animation im „Glitch“-Stil zu erstellen, bei der die Formen versetzt angeordnet sind.

    Polierte Bewegung mit einem Prompt

    Erstelle professionelle Animationen mit dem Figma-Agenten. Nutze ihn für sich wiederholende Bewegungen oder komplexe Erzählungen.

  • Eine animierte Titelkarte für eine App für Outdoor-Aktivitäten wird in Figma nebeneinander mit der Zeitleiste und den Keyframes angezeigt, die sie zum Bewegen bringenEine animierte Titelkarte für eine App für Outdoor-Aktivitäten wird in Figma nebeneinander mit der Zeitleiste und den Keyframes angezeigt, die sie zum Bewegen bringen

    Steuere jeden Keyframe

    Du hast die volle Kontrolle über die Zeitleiste. Stelle jedes Einzelbild und jede Eigenschaft genau so ein, wie du es möchtest, und hol dann deine Teamkollegen dazu, um die endgültige Animation zu gestalten.

Umfassende Kreativität. Präzise Steuerung.

Verleihe deiner Arbeit Klarheit und Ausdruckskraft. Animiere Ladezustände, Hover-Interaktionen, Logo-Stile und vieles mehr. Die Zeitleiste ist die einzige Grenze.

  • Schnell erstellen mit vorgefertigten Stilen

    Animationsstile sind bereits integriert – darunter „Einblenden“, „Drehen“, „Skalieren“, „Größe ändern“ und vieles mehr. Kombiniere verschiedene Stile, um deine Vision umzusetzen. Benutzerdefinierte Stile folgen in Kürze.

    Entdecke vorgefertigte Stile

  • Passe das Timing automatisch an

    Verwende „Autokey“, um deine Bewegungen zu verfolgen und aufzuzeichnen, und passe dann jeden Keyframe mit Bézier-Kurven und Federn an.

    Über Keyframes
  • Drei flache Bilder – eines von einem orangefarbenen Kuppelbau, eines von einem weißen Kuppelbau und eines von einer Daunenjacke – werden in einen Stapel von 3D-Objekten umgewandelt.Drei flache Bilder – eines von einem orangefarbenen Kuppelbau, eines von einem weißen Kuppelbau und eines von einer Daunenjacke – werden in einen Stapel von 3D-Objekten umgewandelt.

    Tritt ein in eine neue Dimension

    3D-Transformationen verleihen deinen Designs und Bildern Tiefe. Kombiniere sie mit Bewegung, damit sich Objekte so bewegen, wie sie es in der realen Welt tun. Bald verfügbar.

    Trage dich in die Warteliste ein

  • Glätte alle Übergänge

    Jeder Übergang von Bildschirm zu Bildschirm verfügt nun über eine vollständige Zeitleiste, und du kannst das Timing für jedes Element anpassen. Bald verfügbar.

Systeme einmal erstellen. Überall anwenden.

Mit Bewegungssystemen kann dein gesamtes Team überall schnell markengerechte Bewegungselemente hinzufügen.

  • Komponenten über Assets hinweg wiederverwenden

    Systematisiere häufig verwendete Funktionen – du musst nicht jedes Mal von Grund auf neu anfangen. Erstelle Modi und Komponenten, die überall funktionieren, wo sie eingesetzt werden.

    Systeme entdecken

  • Tausche Variablen aus und spare Zeit

    Wechsle mithilfe von Variablen und Platzhaltern schnell zwischen verschiedenen Bewegungswerten hin und her.

    So wendest du Variablen an

Übertrage Animationen direkt in den Code.

Alle deine Animationen basieren auf echtem, produktionsreifem Code und lassen sich direkt aus Figma exportieren.

  • Eine animierte Museumskarte wird direkt neben dem dazugehörigen Code angezeigt.Eine animierte Museumskarte wird direkt neben dem dazugehörigen Code angezeigt.

    Reibungslose Entwickler*innen-Übergaben

    Entwickler*innen können die gesamte Bewegungschronologie im Dev Mode inspizieren und dann den Animationscode direkt in CSS, JSON oder React kopieren.

    So übergibst du Code
  • Ein Popup zeigt, wie eine Animationsdatei an einen KI-Coding-Agenten übergeben wird.Ein Popup zeigt, wie eine Animationsdatei an einen KI-Coding-Agenten übergeben wird.

    Gib KI-Agenten einen vollständigen Bewegungskontext

    Sende den Animationscode über den Figma MCP-Server an deine agentischen Programmiertools. Dabei bleiben alle deine Werte, wie z. B. Ease und Timing, erhalten.

    Den Leitfaden abrufen
  • Eine Animation eines futuristischen silbernen Stuhls und einer Lampe wird als MP4-Datei exportiert.Eine Animation eines futuristischen silbernen Stuhls und einer Lampe wird als MP4-Datei exportiert.

    Direkt aus Figma exportieren

    Teile deine Animationen mit der ganzen Welt. Verwandle jedes animierte Bild in eine MP4-, GIF-, SVG- oder WebM-Datei.

    So exportierst du Dateien