Füge deinen Prototypen Videos hinzu, um das Erlebnis nachzuempfinden, das deine Nutzer auf einer Website oder in einer App mit einem Video-Playback oder einer Vorschau haben würden.
Hinweis: Videos können nur in einem kostenpflichtigen Education-, Professional und Organization-Team zu Dateien hinzugefügt werden. Mitarbeitende in kostenlosen Starter-Teams können bestehende Videos in einer Datei bearbeiten, jedoch keine Videos hochladen. Personen in Starter-Teams können animierte GIFs zu Prototypen hinzufügen →
Figma hat keinen bestimmten Ebenentyp für Videos. Stattdessen sind Videos eine Art Füllung. Dadurch kannst du sie zu jeder Form und zu jedem Vektornetzwerk hinzufügen.
Im Bereich Fill (Füllung) in der reichten Seitenleiste kannst du Videofüllungen anzeigen und aktualisieren. Figma zeigt im Muster eine Miniaturansicht des Videos und das Video-Label an.
Du kannst Ebenen mit Videofüllungen auch in der linken Seitenleiste im Ebenen-Tab identifizieren.
Wenn du ein Video direkt in die Arbeitsfläche einfügst, erstellt Figma dort ein Rechteck in der Größe der ursprünglichen Datei und mit dem Video-Symbol sowie mit dem Video-Label.
Wenn du ein Video als Füllung zu einem bestehenden Objekt hinzufügst, verwendet Figma das Ebenen-Symbol und die Beschreibung der ursprünglichen Ebene.
Videos zu Dateien hinzufügen
Da Videos Füllungen sind, kannst du sie zu jedem Vektor und zu jeder Form hinzufügen.
Dadurch erhältst du mehr Flexibilit und Kontrolle. Du hast unterschiedliche Möglichkeiten, Videos zu Designdateien hinzuzufügen:
AFüge eine Videodatei per Drag & Drop in die Arbeitsfläche ein. Figma erstellt ein neues Rechteck mit den Abmessungen des Videos und verwendet das Video als Füllung.
C Kopiere ein Video aus einer anderen Ebene in der aktuellen Datei oder aus einer anderen Datei.
D Füge ein beliebiges Video aus der Zwischenablage in die Arbeitsfläche ein.
Du kannst auch animierte GIFs zu deinen Prototypen hinzufügen. GIFs werden nur wiedergegeben, wenn Designs und Prototypen in der Präsentationsansicht angezeigt werden.Animierte GIFs zu Prototypen hinzufügen →
Videos bearbeiten
Videos können auf viele verschiedene Weisen bearbeitet oder angepasst werden:
Skalieren, drehen und die Abmessungen von Ebenen mit Videos anpassen.
Auf Ebenen angewendete Videos zuschneiden und sie neu positionieren.
Videooptionen anpassen, einschließlich Füll-, Rotations- und Mischmodus.
Masken anwenden, um nur einen Teil des Videos anzuzeigen.
Videos anpassen, indem du beispielsweise den Farbton, die Sättigung oder den Kontrast änderst.
Prototyping mit Videos
Nachdem du ein Video zu einem Rahmen hinzugefügt hast, kannst du in der rechten Seitenleiste zum Prototypen wechseln. Von dort aus kannst du Interaktionen zwischen Rahmen und Videos erstellen.
Videoeigenschaften
Im Bereich Video im Prototyp-Tab kannst du das Verhalten eines Videos festlegen, wenn es sich in einem Prototypen zu seinem Rahmen bewegt.
Aktiviere das Kontrollkästchen, um das Video automatisch abzuspielen.
Klicke auf , um das Video in Schleife abzuspielen.
Klicke auf , um den Ton des Videos ein- und auszuschalten.
Im Bereich State Management (Modusverwaltung) im Bedienfeld Interaction Details (Interaktionsdetails) kannst du die Videoposition zurücksetzen, wenn eine Aktion ausgelöst wird. Auf diese Weise kannst du das Video zwischen Rahmen erneut abspielen.
Videointeraktionen
In deinem Prototypen kannst du Interaktionen erstellen, um Videos in deinem Design abzuspielen und anzuhalten.
Video abspielen
Video anhalten
Video abspielen/anhalten
Videos und Smart-Animationen
Du kannst die Funktion Smart-Animation nutzen, um bei der Navigation zwischen verschiedenen Rahmen den Fortschritt eines Videos beizubehalten. Wenn du beispielsweise einen Prototypen erstellen möchtest, bei dem ein Video beim Eintreten in einen Rahmen automatisch abgespielt wird, gelangst du durch Klicken auf das Video in einen neuen Rahmen mit einer größeren Ansicht.
Du kannst eine Verbindung zwischen zwei Rahmen mit demselben Videotitel herstellen. Achte darauf, dass die Titel der Videoebenen ebenfalls übereinstimmen.
Stelle die Animationseinstellung auf Smart-Animation.
Deaktiviere im Bedienfeld Interaction Details (Interaktionsdetails) die Option Reset video position (Videoposition zurücksetzen).
Videos und interaktive Komponenten
Du kannst interaktive Komponenten nutzen, um Prototypen für Videointeraktionen in einem einzigen Rahmen zu erstellen. So kannst du beispielsweise eine Vorschau abspielen lassen, wenn der Cursor über das Video hovert.
Im Standardmodus sollte die automatische Wiedergabe aus- und im Hovermodus eingeschaltet sein.
Stelle eine Verbindung her, durch die der Standardardmodus in den Hovermodus wechselt, und deaktiviere die Option Reset video position (Videoposition zurücksetzen).
Erstelle einen Rahmen mit verschiedenen Komponenteninstanzen und ersetze das Video, um eine Komponente wiederzuverwenden.
Nutzer*innen mit Schreibzugriff können Prototypen erstellen.
Nutzer*innen mit Lesezugriff können Prototypen in der Präsentationsansicht wiedergeben.
Mithilfe der Prototypenfunktion von Figma kannst du verschiedene interaktive Flows erstellen, mit denen du ausprobieren kannst, wie Nutzer*innen mit deinen Designs interagieren könnten.
Prototoypen sind eine fantastische Möglichkeit, um
Tipp! Um deinen Workflow weiter zu optimieren, kannst du mit der Tastenkombination UmschaltE schnell zwischen den Reitern Design und Prototype wechseln.
Flows und Startpunkte
Du kannst in Figma mehrere Flows für deinen Prototypen auf einer Seite erstellen, um eine Vorschau auf das gesamte Erlebnis der Nutzer*innen durch deine Designs zu erhalten.
Ein Flow ist das Netzwerk von Rahmen (Frames) und Verbindungen auf einer einzelnen Seite. Ein Prototyp kann den gesamten Pfad von Nutzer*innen durch deine App oder Website abbilden oder sich auf einen bestimmten Abschnitt davon konzentrieren. Beispiel: Der Prototyp deckt alle möglichen Interaktionen auf einer E-Commerce-Website ab. Innerhalb des Prototyps gibt es Flows zum Erstellen eines Kontos, zum Hinzufügen von Artikeln in einen Warenkorb und zum Bezahlen.
Figma erstellt einen Flow-Startpunkt, wenn du die erste Verbindung zwischen zwei Rahmen hinzufügst. Es gibt noch weitere Möglichkeiten, um dem Prototyp einen Flow-Startpunkt hinzuzufügen:
Wähle einen Rahmen aus, und klicke in der rechten Seitenleiste im Abschnitt Flow starting point (Flow-Startpunkt) auf .
Klicke mit der rechten Maustaste auf den Rahmen, und klicke dann auf Add starting point (Startpunkt hinzufügen).
Dupliziere einen Rahmen mit einem vorhandenen Startpunkt.
Hinweis: Ein Rahmen der obersten Ebene kann Teil mehrerer Flows sein, aber nur einen Startpunkt haben. Rahmen, die in einen Startrahmen der obersten Ebene eingebettet sind, können Verbindungen haben, die Nutzer*innen durch mehrere Flows navigieren. Die Schaltflächen Log in (Anmelden) und Sign up (Registrieren) können beispielsweise in denselben Startpunktrahmen eingebettet und dann für jede Erfahrung mit Rahmen verschiedener Flows verbunden sein.
Verbindungen erstellen
Wähle den Hotspot für die Verbindung aus.
Klicke auf , um die Verbindung zu erstellen.
Ziehe sie zum Ziel.
Wenn keine Verbindungen vorhanden sind, macht Figma den ersten Rahmen zum Startpunkt.
Interaktionen und Animationen erstellen
Öffne in der rechten Seitenleiste den Prototyp-Tab.
Füge Interactions hinzu.
Lege Interaktionsdetails fest.
Wende eine Animation an.
Zeige eine Vorschau der Animation an.
Prototyp-Einstellungen anpassen
Wähle ein Device und ein Model aus.
Zeige eine Vorschau des Prototyps an.
Wähle eine Background color (Hintergrundfarbe) aus.
Ein Hotspot ist der Ort, an dem die Interaktion stattfindet. Ein Hotspot kann ein beliebiges Objekt innerhalb des ursprünglichen Rahmens sein, z. B. ein Link, eine Schaltfläche, ein Bild, ein Icon usw.
Verbindungen sind die blauen Pfeile oder Spaghetti, die den Hotspot mit dem Ziel verbinden. Die Interaktions- und Animationseinstellungen werden über die Verbindung angewendet.
Ein Flow ist das Netzwerk der verbundenen Rahmen, die einen Weg durch einen Prototyp bilden. Jeder Flow hat seinen eigenen Startpunkt. Du kannst in einem Prototyp mehrere Flows haben.
Der Startpunkt ist der erste Rahmen eines Flows. Lege mehrere Ausgangspunkte fest, um in der Präsentationsansicht verschiedene Flows des Prototyps zu zeigen.
Der Auslöser bestimmt, welche Art von Interaktion mit dem Hotspot den Prototyp voranbringen wird. Dies kann eine Interaktion mit der Maus oder eine Berührung sein, wie etwa Tippen, Ziehen, Klicken, Hover usw.
Das Ziel ist der Punkt, an dem der Übergang endet. Dies muss ein Rahmen der obersten Ebene sein, d. h. ein Rahmen, der direkt der Arbeitsfläche hinzugefügt wird, Objekte in einem Rahmen werden nicht unterstützt. Wenn der Flow von A nach B verläuft, ist A der Hotspot und B das Ziel.
Die Aktion definiert die Art des Fortschritts im Prototypen. Die Aktion könnte beispielsweise sein, zu einem anderen Rahmen zu navigieren oder eine externe URL zu öffnen.
Die Einstellungen für die Animation bestimmen, wie sich der Prototyp von einem Rahmen zum nächsten bewegt. du kannst die Art der Animation, die Geschwindigkeit und die Richtung steuern.
Der Übergang ist die Art der Animation. Damit wird festgelegt, wie sich die Aktion zum Ziel bewegt.
Die Richtung legt fest, aus welcher Richtung der Übergang kommt. Wähle zwischen links, rechts, oben oder unten.
Die Dauer legt fest, wie lange es dauert, die Animation abzuschließen. Je kürzer die Dauer, desto schneller der Übergang. Wähle eine Dauer zwischen 1 ms und 10.000 ms (10 Sekunden).
Das Easing beeinflusst die Beschleunigung der Animation, d. h. ob sie langsam oder schnell startet. Auf diese Weise kannst du Animationen erstellen, die sich natürlicher anfühlen.
Overlays sind Rahmen, die über dem aktuellen Screen oder Rahmen erscheinen. Mithilfe von Overlays kannst du Tool-Tipps, interaktive Menüs, Warnmeldungen oder Bestätigungen erstellen.
Mit dem Overflow-Verhalten definierst du, wie dein Prototyp auf Scrollen reagiert. Auf diese Weise kannst du erweiterte Interaktionen für Nutzer*innen erstellen, z. B. Karussells, Galerien oder interaktive Karten.
Wähle aus, welches Device bei der Präsentation des Prototyps angezeigt wird. Definiere sowohl das Gerät als auch das Modell.
Mit der Hintergrundfarbe kannst du die Farbe im Hintergrund des Prototyps definieren.
Wenn du einen Prototyp mit Rahmen im Hoch- und Querformat hast, kannst du eine Ausrichtung auswählen. Die Ausrichtung wird für den gesamten Prototyp festgelegt. Innerhalb eines Prototyps kann nicht zwischen Hoch- und Querformatansicht gewechselt werden.
In der Vorschau siehst du, wie etwas im Prototyp aussehen oder funktionieren wird. Du kannst Vorschauen für Animationen und die Einstellungen des Geräts anzeigen, auf dem der Prototyp ausgeführt wird.
Nutzer*innen mit Schreibzugriff auf eine Datei können Prototypen erstellen und bearbeiten.
Das Overflow-Verhaltensteuert, wie Nutzer*innen mit Inhalten interagieren können, die über die Bildschirmabmessungen hinausgehen. Das betrifft beispielsweise:
Auf langen Seiten auf- und abscrollen.
In einem Karussell horizontal scrollen, um die verschiedenen Elemente anzuzeigen.
In Bibliotheken und Galerien zwischen Bildern, Artikeln oder Beiträgen navigieren.
In beliebiger Richtung scrollen, etwa um sich über eine Karte zu bewegen.
Overflow-Verhalten
Du kannst das Overflow-Verhalten nur auf Rahmen (Frames) anwenden. Dies gilt für Rahmen, die sich direkt auf der Arbeitsfläche befinden (Rahmen der obersten Ebene), sowie für Rahmen, die in andere Rahmen oder Ebenen eingebettet sind.
Um das Overflow-Verhalten anzuwenden, muss der Rahmen über Inhalte verfügen, die über seine Grenzen hinausgehen. Wenn du die Grenzen des Rahmens so änderst, dass der gesamte Inhalt in den Rahmen passt, wird der Bereich regulär gescrollt.
Figma unterstützt drei verschiedene Overflow-Verhalten: vertikal, horizontal und vertikal und horizontal.
Vertikales Scrollen
Vertikales Scrollen ermöglicht es Nutzer*innen, innerhalb eines Rahmens auf und ab zu wischen oder zu scrollen. Verwende dieses Verhalten, um das Scrollen langer Websites oder Inhaltsseiten einer App zu imitieren.
Hinweis: Du musst nicht immer das Overflow-Verhalten anwenden, um vertikales Scrollen zu imitieren. In einem Prototyp können alle die gesamte Länge (oder Breite) eines Rahmens scrollen.
Horizontales Scrollen
Horizontales Scrollen ermöglicht es Nutzer*innen, innerhalb eines Rahmens nach links und rechts zu wischen oder zu scrollen, während die vertikale Position beibehalten wird. Verwende diese Option, um Karussells etwa für Produkte, Galerien und Bibliotheken zu erstellen.
Horizontales und vertikales Scrollen
Durch horizontales und vertikales Scrollen können Nutzer*innen innerhalb eines Rahmens in alle vier Richtungen navigieren: nach links, rechts, oben oder unten. Verwende dieses Verhalten beispielsweise zum Scrollen in Karten oder vergrößert angezeigten Bildern.
Overflow-Verhalten anwenden
Um das Overflow-Verhalten auf einen Rahmen anzuwenden, müssen untergeordnete Objekte vorhanden sein, die über ihre Grenzen hinausgehen. Du kannst pro Rahmen nur ein Overflow-Verhalten anwenden.
Die folgenden Schritte gelten auch für Komponenten. Wähle die Instanz in der Arbeitsfläche aus, klicke in der rechten Seitenleiste auf Go to main Component (Gehe zu Hauptkomponente) und passe dann die Grenzen der ursprünglichen Komponente an.
Wähle in der Arbeitsfläche den Rahmen aus.
Öffne den Prototyp-Tab in der rechten Seitenleiste.
Wenn kein Inhalt über den Rahmen hinausgeht, wird eine Fehlermeldung angezeigt, wenn du versuchst, das Overflow-Verhalten anzuwenden. Passe die Rahmengrenzen an, um das Overflow-Verhalten anzuwenden.
So passt du die Rahmengrenzen an:
Wähle den gewünschten Rahmen aus.
Öffne in der rechten Seitenleiste den Design-Tab.
Hover mit dem Mauszeiger in der Arbeitsfläche über der Grenze des Rahmens, bis der Cursor angezeigt wird.
Ziehe den Begrenzungsrahmen, um die Größe des Rahmens zu ändern. Halte die Zusatztaste gedrückt, um Einschränkungen zu ignorieren:
Mac: ⌘ Command
Windows: Strg
Wenn du Inhalte abschneiden möchtest, die über den Rahmen hinausgehen, aktiviere das Kontrollkästchen Clip Content (Inhalte abschneiden).
Einschränkungen definieren, wie sich ein Objekt verhält, wenn du die Größe änderst. Um Einschränkungen vorübergehend zu ignorieren, halte die Zusatztaste gedrückt, während du die Größe des Rahmens änderst:
Mac: ⌘ Command
Windows: Strg
Feste Objekte in einem Prototyp erstellen
Es kann Elemente in einem Prototyp geben, die beim Scrollen nicht mit bewegt werden sollen. Du kannst mit Einschränkungen beispielsweise eine Statusleiste oder ein Menü am oberen oder unteren Bildschirmrand fixieren.
Mit Einschränkungen kannst du die Position eines Objekts in einem scrollenden Prototyp fixieren. Wähle beispielsweise die Einschränkung Fix position while scrolling (Position beim Scrollen fixieren). Damit kannst du ein Objekt an einer bestimmten Position fixieren, sodass es auch während des Scrollens an dieser Stelle bleibt.
Hinweis: Ebenen mit fixierten Objekten werden über die anderen Designebenen gelegt. Es ist nicht möglich, scrollbare Objekte über fixierte Ebenen zu legen.
So fixierst du ein Objekt:
Wähle in der Arbeitsfläche das Objekt, die Gruppe oder die Komponente aus.
Öffne in der rechten Seitenleiste den Design-Tab.
Wähle im Abschnitt Constraints (Einschränkungen) vertikale und horizontale Einschränkungen aus.
Aktiviere das Kontrollkästchen Fix position when scrolling (Position beim Scrollen fixieren).
Figma verschiebt die Objekte über die anderen Ebenen. Im Ebenen-Tab werden sie daraufhin im Bereich Fixed (Fixiert) angezeigt.
Scroll-Position beibehalten
Die Interaktionen in Prototypen sollen sich möglichst real anfühlen. Bei einigen Interaktionen müssen wir die Illusion erzeugen, dass unsere Designs wirklich dynamisch sind.
Mit Preserve scroll position (Scroll-Position beibehalten) kannst du die Scroll-Position beibehalten, wenn du zwischen zwei Bildschirmen wechselst. Dies gilt sowohl für die Scroll-Tiefe bei einem vertikalen Scroll, als auch für die Position bei einem horizontalen Scroll.
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.
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 1 aus einem Rahmen kopierst, wird die Form in den nächsten Rahmen als Rectangle 1 eingefü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.
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.
