Vor dem Start
Wer diese Funktion verwenden kann
Verfügbar für jedes Team und jedes Abo.
Alle Personen mit Schreibzugriff auf eine Datei können Prototypen erstellen.
Bei Prototypen sollen sich unsere Interaktionen so real wie möglich anfühlen – vor allem, wenn wir zwischen mehreren Frames hin- und hernavigieren.
Das State-Management ermöglicht es uns, die Eigenschaften und den Status eines Objekts zu bewahren, wenn wir beim Abspielen von Prototypen innerhalb und zwischen Frames navigieren.
Das State-Management kann mit interaktiven Komponenten, Scroll-Position und Videos in Prototypen auf drei Arten verwendet werden:
- State-Memorisierung: Speichere den Status eines Objekts, wenn du den Frame verlässt und zu ihm zurückkehrst
- Status teilen: Teile den Status zwischen übereinstimmenden Objekten in unterschiedlichen Frames
- Status zurücksetzen: Setze bei jeder Interaktion den Objektstatus zurück
Damit der Status frameübergreifend geteilt werden kann, müssen die Objekte übereinstimmen.
Aktualisierungen zur Einstellung „Scroll-Position beibehalten“
Wir haben die Einstellung Scroll-Position beibehalten aktualisiert. Die Scroll-Position von Frames der obersten Ebene wird jetzt automatisch beibehalten, solange die Namen der Frames der obersten Ebene identisch oder mit einem gemeinsamen Präfix versehen sind. Mehrere Ebenen umbenennen, um ein gemeinsames Präfix hinzuzufügen.
Erfahre mehr über das Beibehalten der Scroll-Position →
State-Memorisierung
Wenn du zwischen Frames hin- und hernavigierst, werden Objekte in ihrem letzten gespeicherten Status wieder geöffnet.
Interaktive Komponenten
Figma speichert die letzte gespeicherte Variante der interaktiven Komponente.
Zum Beispiel kann eine interaktive Komponente für ein Kontrollkästchen vorhanden sein. Wenn du die interaktive Komponente auf die markierte Variante einstellst, speichert Figma den Status dieser Variante. Das heißt: Wenn du aus dem Frame herausnavigierst und später zu ihm zurückkehrst, verbleibt die interaktive Komponente im markierten Status.
Scroll-Position
Figma speichert deine Scroll-Position.
Zum Beispiel kann auf einer Karte das horizontale und vertikale Scrollen aktiviert sein. Wenn du auf der Karte zu einer bestimmten Stelle scrollst, speichert Figma die Position, an die du gescrollt hast. Das heißt: Wenn du aus dem Frame herausnavigierst und später zu ihm zurückkehrst, wird deine Scroll-Position auf der Karte wiederhergestellt.
Videos
Figma speichert den Abspielstatus aller Videos, die in deinen Prototypen verwendet werden.
Zum Beispiel beginnst du die Wiedergabe eines Videos auf einem Frame. Wenn du die 5-Sekunden-Marke erreichst, navigierst du zu einem anderen Frame. Wenn du zum ursprünglichen Frame zurückkehrst, wird das Video ab der 5-Sekunden-Marke an der Stelle weiter abgespielt, an der du aufgehört hast.
Status teilen
Wenn du zwischen Frames mit übereinstimmenden Objekten navigierst, wird der Status des ersten Objekts auf das zweite Objekt übertragen.
Interaktive Komponenten
Figma teilt den Status zwischen übereinstimmenden interaktiven Komponenten. Der Status wird erst geteilt, wenn bereits eine erste Interaktion mit der Komponente stattgefunden hat.
Zum Beispiel kann eine interaktive Komponente für ein Kontrollkästchen vorhanden sein, mit einer Instanz der nicht markierten Variante auf jedem von zwei Frames. Wenn du deinen Prototyp abspielst, aktivierst du das Kontrollkästchen im ersten Frame. Wenn du dann zum zweiten Frame navigierst, wird die entsprechende Komponente im zweiten Frame ebenfalls auf die markierte Variante gesetzt.
Scroll-Position
Figma teilt Scroll-Positionen zwischen übereinstimmenden Objekten.
Zum Beispiel kann auf einer Karte das horizontale und vertikale Scrollen auf jedem von zwei Frames aktiviert sein. Wenn du zu einer bestimmten Stelle auf der Karte scrollst und dann zum zweiten Frame navigierst, wird das übereinstimmende Karten-Objekt auf dem zweiten Frame an die gleiche Stelle gescrollt.
Videos
Figma teilt den Abspielstatus von Videos zwischen übereinstimmenden Objekten.
Zum Beispiel beginnst du die Wiedergabe eines Videos auf einem Frame. Wenn du zu einem zweiten Frame mit einem übereinstimmenden Videoobjekt navigierst, wird das Video auf dem zweiten Frame an der Stelle weiter abgespielt, an der du aufgehört hast.
Status zurücksetzen
Wenn durch verschiedene Prototypen navigiert wird, kann es erforderlich sein, dass der Status eines Objekts auf spezifische Interaktionen zurückgesetzt werden muss. Der Objektstatus sollte auf die Interaktion zurückgesetzt werden, die zum nächsten Frame navigiert.
- Klicke auf eine Prototyp-Verbindung, um das Panel Interaktionsdetails zu öffnen.
- Wähle im Bereich State-Management des Panels eine der folgenden Einstellungen aus:
- Scroll-Position zurücksetzen: Auf ursprüngliche Scroll-Position zurücksetzen
- Komponentenstatus zurücksetzen: Auf ursprünglichen Komponentenstatus gemäß der Einstellung auf der Arbeitsfläche zurücksetzen
- Videostatus zurücksetzen: Das Video nochmals von Anfang an starten und auf den ursprünglichen Abspielzustand zurücksetzen
Hinweis: Die Einstellungen für das Zurücksetzen sind nur dann auf dem Panel Interaktionsdetails zu sehen, wenn sie für die aktuell ausgewählte Interaktion relevant sind. Wenn die Interaktion beispielsweise mit einem Frame ohne Video verbunden ist, ist die Einstellung Videostatus zurücksetzen nicht vorhanden.
Interaktive Komponenten
Setze den Status von interaktiven Komponenten auf ihren ursprünglichen Status gemäß den Einstellungen in der Arbeitsfläche zurück.
Beispielsweise kann eine interaktive Komponente für einen Ladebalken mit leeren und vollständigen Varianten vorhanden sein.
Wenn du möchtest, dass der Ladebalken die leere Variante neu startet, wenn auf die Reload-Schaltfläche geklickt wird, musst du die Einstellung Komponentenstatus zurücksetzen auf der Schaltflächen-Interaktion deaktivieren.
Scroll-Position
Verwende Scroll-Position zurücksetzen, um zu der ursprünglichen Scroll-Position gemäß der Einstellung auf der Arbeitsfläche zurückzukehren.
Zum Beispiel kann auf einer Karte das horizontale und vertikale Scrollen aktiviert sein. Wenn du beim Navigieren zwischen Frames zur ursprünglichen Scroll-Position zurückkehren willst, musst du die Einstellung Scroll-Position zurücksetzen auf der Interaktion deaktivieren.
Videos
Starte das Video neu und setze es auf den ursprünglichen Abspielzustand gemäß den Einstellungen auf der Arbeitsfläche zurück.
Zum Beispiel beginnst du die Wiedergabe eines Videos auf einem Frame. Wenn du die 5-Sekunden-Marke erreichst, navigierst du zu einem anderen Frame. Wenn du zum ursprünglichen Frame zurückkehrst und das Video von Anfang an erneut abspielen willst, musst du die Einstellung Videostatus zurücksetzen auf der Interaktion aktivieren.
Übereinstimmende Objekte
Um den Status frameübergreifend zu teilen, müssen die Objekte übereinstimmen.
Erfahre mehr über übereinstimmende Objekte →
Um Objekte zu identifizieren, die zwischen Frames übereinstimmen:
- Öffne den Tab Prototyp in der rechten Seitenleiste.
- Hover mit dem Mauszeiger über ein Objekt oder eine Ebene in der Arbeitsfläche.
- Figma hebt das übereinstimmende Objekt in allen anderen Frames hervor, in denen es vorkommt.
Verschachtelte Objekte
Objekte werden als übereinstimmend angesehen, wenn sie in der obersten Ebene frameübergreifend denselben Ebenen-Namen und dieselbe Parent-Gruppe aufweisen.
Tipp: Wenn du nicht willst, dass der Status über zwei Objekte hinweg geteilt wird, kannst du sie umbenennen, sodass sie nicht länger übereinstimmen.
Frames der obersten Ebene
Frames der obersten Ebene sind Frames, die direkt auf der Arbeitsfläche platziert sind. Da Frames der obersten Ebene nicht über Parent-Objekte verfügen, kannst du sie auf eine der folgenden Arten anpassen:
- Identische Ebenen-Namen verwenden
- Verwende Ebenen-Namen mit übereinstimmenden Zeichenfolgen und Schrägstrichen. Ein Frame der obersten Ebene mit dem Namen
Checkout / 1stimmt beispielsweise mit einem weiteren Frame der obersten Ebene mit dem NamenCheckout / 2überein, da die Zeichenfolge vor dem Schrägstrich identisch ist.
Tipp: Musst du Ebenen umbenennen? Erfahre, wie du Ebenen in großen Mengen umbenennst →
Aktualisierung auf neues State-Management
Figma hat am 24. Mai 2023 auf seine aktuellen State-Management-Kontrollen aktualisiert.
Für Prototyp-Interaktionen, die vor dem 24. Mai 2023 erstellt wurden, gilt:
- Interaktive Komponenten können den Status nicht frameübergreifend teilen
- Scrolling-Objekte können ihren Status nicht speichern, wenn sie erneut geöffnet werden
- Scrolling-Objekte können den Status nur dann frameübergreifend speichern, wenn die Einstellung Scroll-Position beibehalten aktiviert ist
Hinweis: Bei neuen Interaktionen wird die Scroll-Position automatisch geteilt, solange die Objektnamen über die Frames hinweg übereinstimmen.
Erfahre mehr über Scroll-Position beibehalten und den Übergang zum neuen State-Management →
So aktualisierst du ältere Interaktionen entsprechend der neuen State-Management-Kontrollen:
- Klicke auf eine Prototyp-Verbindung, um das Panel Interaktionsdetails zu öffnen.
- Klicke auf Aktualisieren.
Tipp: Nachdem du eine Interaktion aktualisiert hast, wird unten eine Erfolgsmeldung auf der Arbeitsfläche angezeigt. Klicke auf die Schaltfläche Alle aktualisieren auf dem Erfolgs-Meldungs-Banner, um alle anderen Interaktionen in der Datei zu aktualisieren.