Modi für Variablen in Prototypen
Bevor du anfängst
Wer diese Funktion nutzen kann
Nutze Variablen bei Prototypen mit jedem zahlungspflichtigen Abo. Die Anzahl der Variablenmodi, die für jede Sammlung verfügbar sind, ist von deinem Abo abhängig.
Alle Personen mit Schreibzugriff
auf eine Datei können Prototypen erstellen.
Alle Personen mit Lesezugriff
oder Lesezugriff nur für Prototypen
können sich Prototypen anzeigen lassen.
Jede Variable in deiner Sammlung kann mehrere Modi aufweisen. Du kannst die Werte für spezifische Modi in deinen Prototypaktionen und -ausdrücken auswählen und verwenden.
Es gibt verschiedene Möglichkeiten, wie du die Variablenmodi nutzen kannst, um deine Arbeit mit Prototypen zu optimieren:
- Moduswerte basierend auf dem Kontext festlegen: Verwende mehrere Moduswerte derselben Variable in deinem Design und ändere ihre Werte unabhängig voneinander in derselben Interaktion.
- Moduswerte in Ausdrücken verwenden: Nutze die Werte spezifischer Modusdefinitionen, um Interaktionen zu erstellen und Berechnungen durchzuführen.
Noch nicht viel Erfahrung mit Variablen? Hier kannst du mehr erfahren:
Du möchtest mehr praktische Erfahrungen sammeln?
Entdecke die erweiterte Prototypen-Testumgebung →
Moduswerte basierend auf Kontext festlegen
Wenn eine Variable mehrere Modusdefinitionen aufweist, nutze die Aktion Set variable (Variable festlegen) und den Moduskontext, um den Wert einer spezifischen Modusdefinition zu ändern.
Dies kann hilfreich für die Verarbeitung von nur einer Modusdefinition einer Variable sein. Wenn mehrere Modi derselben Variable in einem Design angezeigt oder verwendet werden, kannst du die Werte unabhängig voneinander anpassen.
Sieh dir beispielsweise das folgende Design an:
Jedes Produktelement weist einen Zähler auf, mit dessen Hilfe die Anzahl der Elemente angepasst werden kann, die dem Warenkorb hinzugefügt werden.
Wenn eine Nummernvariable mit nur einem einzigen Modus verwendet wird, um den Elementzähler darzustellen, wäre für jeden Produkteintrag eine eindeutige Variable und Interaktion erforderlich.
Stattdessen kannst du eine Nummernvariable mit zwei Modi verwenden – für jedes eindeutige Produktelement eine.
Durch die Verwendung mehrerer Modi können die Elementzähler getrennt voneinander aktualisiert werden.
- Lege den Modus auf den übergeordneten Ebenen oder Objekten fest.
- Wähle die Ebene, Gruppe oder das Objekt aus, das die angewendete Variable enthält. (Wähle beispielsweise den Rahmen aus, der das Produktbild und die Informationen zur Melone enthält.)
- Klicke im Bereich Layer (Ebene) in der rechten Seitenleiste auf Change variable mode (Variablenmodus ändern).
- Fahre mit dem Mauszeiger über eine Variablensammlung und wähle einen Modus aus. (Wähle den Modus „Melone“.)
- Wiederhole diesen Vorgang für sämtliche anderen Objekte oder Ebenen, die nur für einen bestimmten Modus gelten. (Wende den Modus „Shiitake“ auf den Rahmen an, der das Produktbild und die Informationen zu den Shiitake-Pilzen enthält.)
- Ändere den Wert der angewendeten Variable mit der Prototypaktion Set variable (Variable festlegen). (Beispielsweise kannst du eine Interaktion Set variable (Variable festlegen) über das +-Symbol für die einzelnen Produktzähler erstellen. Setze die Variable
itemCount
aufitemCount + 1
.)
Sämtliche in einer Ebene mit einem festgelegten Modus enthaltenen Variablen aktualisieren nur den Wert dieser spezifischen Modusdefinition.
Tipp: Nutze Komponenten, um beim Erstellen von Prototypen mit Modi noch mehr Zeit zu sparen. Mit Komponenten musst du die Interaktion nur einmal erstellen. Dann platzierst du mehrere Instanzen auf dem Rahmen und änderst den angewendeten Modus für jede Instanz.
Moduswerte in Ausdrücken verwenden
Modusdefinitionen in Prototypenaktionen auswählen
So wählst du spezifische Variablenmodi in Prototypen aus:
- Erstelle oder klicke auf eine bestehende Prototypenverbindung, um die Ansicht Interaction Details (Interaktionsdetails) zu öffnen.
- Klicke auf einen beliebigen Variablennamen, den du in der Interaktion verwendet hast.
- Wähle im Dropdown-Menü Modes (Modi) einen spezifischen Modus dieser Variable aus.
Wenn du einen Modus ausgewählt hast, wird die Variable sowohl mit dem Variablennamen als auch dem Modusnamen angezeigt:
variableName:modeName
Tipp: Du kannst auch mit der Tastatur Ausdrücke erstellen. Um einen spezifischen Modus im Ausdruck-Generator auszuwählen, gib eine Variable ein. Drücke dann ←, um den Variablennamen zu markieren, und wähle mithilfe der Pfeile nach oben ↑ und nach unten ↓ den Modus aus. Drücke zur Bestätigung die Eingabetaste.
Ausdrücke mit Moduswerten erstellen
Nutze Ausdrücke mit Variablenmodi, um Werte für eine einzelne Variable zu berechnen.
Dies kann beim Schreiben von Ausdrücken hilfreich sein, die mehrere Modusdefinitionen einer Variable nutzen.
Wir betrachten noch einmal das Design oben. Diesmal gibt es Felder zur Berechnung der Zwischensumme der einzelnen Produktelemente sowie der Gesamtsumme zur Berechnung des Gesamtpreises der gesamten Bestellung.
Tipp: Um verschiedene Modi derselben Variable in einem Design anzuwenden, nutze einen Variablenmodus für den Rahmen oder die Komponentenebene.
Sehen wir uns nun die Variablensammlung an:
Wenn du Ausdrücke verwendest, wirst du gelegentlich die Werte für jeden Variablenmodus trennen müssen. Um den Wert itemSubtotal
(Zwischensumme) für jeden Produkttyp zu berechnen, kannst du beispielsweise einen Ausdruck verwenden, der den itemPrice
(Artikelpreis) mit dem itemCount
(Anzahl Artikel) multipliziert.
In anderen Fällen muss ein einzelner Variablenwert die Gesamtheit der verschiedenen Modi darstellen. Um die Gesamtsumme der Bestellung zu berechnen, kannst du zum Beispiel eine neue Variablensammlung für die Variable cartTotal
(Gesamtsumme) mit nur einem Modus erstellen.
Du möchtest etwas über die Best Practices für die Erstellung von Prototypen mit Variablen erfahren? Abonniere den YouTube-Kanal von Figma.