Ausdrücke in Prototypen verwenden – Figma Learn - Hilfe-Center

Bevor du anfängst

Wer diese Funktion nutzen kann

Verfügbar in allen Abos.

Alle Personen mit Schreibzugriff auf eine Datei können Prototypen erstellen.

Alle Personen mit Lesezugriff oder Lesezugriff nur für Prototypen können Prototypen anzeigen.

Variablen ermöglichen dir, mit nur wenigen Rahmen und Interaktionen realistische Prototypen zu erstellen, die sich je nach Benutzerauswahl ändern.

Durch das Hinzufügen von Ausdrücken kannst du deine Prototypen noch effektiver gestalten, indem du dynamische Zeichenfolgen oder Zahlenwerte generierst oder sogar boolesche Ausdrücke bewertest.

Nutze Ausdrücke beim Prototyping unter anderem für folgende Zwecke:

Erstellen eines Warenkorbs, in dem der Bestellwert automatisch berechnet wird
Erstellen von in der Größe skalierbaren Objekte, wie etwa Lautstärke- oder Fortschrittsbalken
Kombinieren von Textinhalten oder Erstellen neuer Texte entsprechend der Benutzerauswahl

Du hast noch nicht viel Erfahrung mit Variablen? Hier erfährst du mehr:

Du möchtest mehr praktische Erfahrungen sammeln?

Entdecke die erweiterte Prototypen-Testumgebung →

Du möchtest mehr Beispiele sehen, wie man Variablen in Prototypen verwenden kann? Schau dir weitere Beispiele für erweitertes Prototyping an →

Anwendungsmöglichkeiten für Ausdrücke

Mithilfe von Ausdrücken kannst du die Werte von Variablen durch einfache Vorgänge ändern. Verwende sie beispielsweise für die folgenden Aktionen:

Die Prototypenaktion Set variable (Variable festlegen), wenn die ausgewählte Variable eine Zahl, eine Zeichenfolge oder ein boolescher Wert ist
Die Prototypenaktion Conditional (Bedingungen) im Rahmen einer bedingten Aussage

Du kannst Ausdrücke direkt in die folgenden Felder der Ansicht Interaction details (Interaktionsdetails) schreiben:

1: An interaction details panel, with a Set Variable action setting the itemCount variable to itemCount + 1. 2: An interaction details modal, with a Conditional action evaluating IF itemCount == 0.

Set variable (Variable festlegen): Hiermit gibst du einen Ausdruck ein, der den neuen Wert der ausgewählten Variable darstellt.
Conditional (Bedingung): Hiermit gibst du einen booleschen Ausdruck ein, der die erforderliche Bedingung für die Aktion darstellt.

Du kannst Ausdrücke in deinen Prototyp integrieren, indem du sie entweder direkt in die verfügbaren Felder schreibst (mit der unterstützten Syntax) oder im Auswahlpanel aus den vorgeschlagenen Variablen und Operatoren wählst.

1. Interaction details modal. User clicks suggested variables and operators from the dropdown to build an expression. 2. Interaction details modal. User manually types in variables and operators to build an expression.

Nachdem du den Ausdruck eingegeben hast, speichere ihn durch Drücken der Eingabetaste bzw. Enter-Taste. Nur Ausdrücke mit einer unterstützten Operation und Syntax funktionieren. Ungültige Ausdrücke werden rot markiert.

Ausdrücke schreiben

Ausdrücke bestehen aus Werten und Operatoren.

Operatoren stellen die Funktion dar, die du durchführen oder bewerten möchtest (wie etwa Addition oder Subtraktion).
Werte sind die Elemente, anhand derer Operatoren Aktionen oder Bewertungen durchführen.

Nehmen wir als Beispiel den folgenden Ausdruck:

variableName + 2

Der Operator in diesem Beispiel ist eine Addition, dargestellt durch das Pluszeichen. Die Werte sind variableName und 2.

Der Ausdruckstyp bestimmt, welche Werte und Operatoren verfügbar sind.

Numerische Ausdrücke

Numerische Ausdrücke können mit den folgenden Arten von Werten geschrieben werden:

Zahlenvariablen
Zahlenliteralen (z. B. 0,5, 1, 10)

Du kannst für numerische Ausdrücke die folgenden Operatoren verwenden:

Operation	Symbol
Addition	+
Subtraktion	–
Multiplikation	*
Division	/

An interaction on an Add to Cart button. The interaction is setting the number totalCost variable to subTotal multiplied by salesTax.

Zeichenfolgenausdrücke

Zeichenfolgenausdrücke kannst du mit den folgenden Arten von Werten schreiben:

Zeichenfolgenliterale (z. B. „Max Mustermann“, „Element 2“, „5“)
Zahlenliterale
Zeichenfolgen- und Zahlenvariablen

Zeichenfolgenliterale müssen mit Anführungszeichen geschrieben werden. Zahlenwerte können einem Zeichenfolgenwert hinzugefügt werden.

Den folgenden Operator kannst du in Zeichenfolgenausdrücken verwenden:

Operation	Symbol
Zu Zeichenfolge hinzufügen	+

An interaction on an avator selection frame. The interaction is setting the value of the string userName variable to Ernie, then setting the value of the string welcomeMessage variable to Welcome back + userName.

Boolesche Ausdrücke

Boolesche Ausdrücke kannst du mit den folgenden Arten von Werten schreiben:

Boolesche Literale (true, false)
Zahlenliterale
Zeichenfolgenliterale
Boolesche, Zeichenfolgen- und Zahlenvariablen

Die folgenden Operatoren kannst du in booleschen Ausdrücken verwenden:

Operation	Symbol
Gleich	==
Nicht gleich	!=
Und	and
Oder	or
Größer als	>
Kleiner als	<
Größer als oder gleich	>=
Kleiner als oder gleich	<=
Addition**	+
Subtraktion**	–
Multiplikation**	*
Division**	/
Zu Zeichenfolge hinzufügen**	+

** Numerische und Zeichenfolgenoperatoren werden nicht zum Bewerten boolescher Ausdrücke verwendet, können aber in komplexen Ausdrücken hilfreich sein.

A design of a cake making checklist. On the final step, there is an interaction:
Set boolean variable cakeComplete to cakeVisibility == true and frostingVisibility
== true and sprinkleVisibility == true.

Boolesche Ausdrücke müssen sich in den Wert true oder false auflösen. Wenn du eine boolesche Variable mit einem Ausdruck erstellst, wird das Ergebnis des Ausdrucks mit „true“ oder „false“ bewertet. Dadurch wird der neue Wert der booleschen Variable festgelegt.

Sieh dir als Beispiel unten die einfache Interaktion und den Ausdruck an:

Set itemCount to 0
itemCount > 5

Der Wert für itemCount ist 0 und somit nicht größer als 5. Daher ist der Wert dieses Ausdrucks false. Anders ist es jedoch im nächsten Beispiel:

Set itemCount to 6
itemCount > 5

Der Wert für itemCount ist 6 und somit größer als 5. Daher ist der Wert des Ausdrucks true.

Unten findest du Beispiele für boolesche Ausdrücke. Dabei sind die folgenden Aussagen „true“:

numberVariable1 == 1
numberVariable2 == 2
stringVariable1 == red
stringVariable2 == blue

Gibt true zurück, wenn die Werte gleich sind.
Gibt false zurück, wenn die Werte nicht gleich sind.

Beispiele:

Set booleanVariable to:
numberVariable1 == numberVariable2

Antwort: Da 1 nicht gleich 2 ist, wird booleanVariable auf false gesetzt.

Set booleanVariable to:
numberVariable1 + 1 == numberVariable2

Antwort: Da 1 + 1 gleich 2 ist, wird booleanVariable auf true gesetzt.

Gibt true zurück, wenn die Werte nicht gleich sind.
Gibt false zurück, wenn die Werte gleich sind.

Beispiele:

Set booleanVariable to:
stringVariable1 != stringVariable2

Antwort: Da red nicht gleich blue ist, wird booleanVariable auf true gesetzt.

Set booleanVariable to:
numberVariable1 + 1 != numberVariable2

Antwort: Da 2 gleich 2 ist, wird booleanVariable auf false gesetzt.

Gibt true zurück, wenn beide Werte „true“ sind.
Gibt false zurück, wenn einer oder beide Werte „false“ sind.

Beispiele:

Set booleanVariable to:
numberVariable1 == 1 and numberVariable2 == 2

Antwort: Da 1 gleich 1 und 2 gleich 2 ist, wird booleanVariable auf true gesetzt.

Set booleanVariable to:
numberVariable1 > 5 and numberVariable2 == 2

Antwort: Da 1 nicht größer als 5 ist, wird booleanVariable auf false gesetzt.

Gibt true zurück, wenn einer oder beide Werte „true“ sind.
Gibt false zurück, wenn beide Werte „false“ sind.

Beispiele:

Set booleanVariable to:
stringVariable1 == red or stringVariable2 == purple

Antwort: Da red gleich red ist, wird booleanVariable auf true gesetzt.

Set booleanVariable to:
stringVariable1 == green or stringVariable2 == orange

Antwort: Da red nicht gleich green oder orange ist, wird booleanVariable auf false gesetzt.

Hinweis: Boolesche Ausdrücke werden auch verwendet, um bedingte Aussagen zu bewerten.

Komplexe Ausdrücke und Reihenfolge der Operationen

Komplexe Ausdrücke bestehen aus mehreren Operatoren in einem einzigen Ausdruck und werden in Klammern gesetzt.

Einfache Rechenaufgaben werden in komplexen Ausdrücken in der folgenden Reihenfolge ausgeführt:

Klammern
Multiplikation/Division
Addition/Subtraktion

Boolesche Ausdrücke werden in der folgenden Reihenfolge ausgeführt:

Klammern
Vergleiche (==, !=, >, < usw.)
Und
Oder

Alle Operationen werden von links nach rechts ausgeführt.

Hier ein Beispiel für einen Ausdruck:

x + y * z

Erst y mit z multiplizieren, dann x addieren.

Hier ein Beispiel für einen booleschen Ausdruck:

x == (y > z)

Erst bewerten, ob y größer als z ist, dann bewerten, ob x gleich dem Ergebnis von y > z ist.

Konzepte in Ausdrücken

Zahlen mit negativem Vorzeichen

Du kannst Zahlen mit negativen Vorzeichen in Ausdrücken verwenden. Nutze ein Minuszeichen (-), um eine solche Zahl darzustellen.

Booleschen Werten ein negatives Vorzeichen voranstellen

Wenn du einem booleschen Wert ein negatives Vorzeichen voranstellst, änderst du seinen logischen Zustand. Indem du einen booleschen Wert, der „true“ ist, mit einem negativen Vorzeichen versiehst, wird der Wert „false“ und umgekehrt.

Einem booleschen Wert ein negatives Vorzeichen voranzustellen, kann nützlich sein, wenn du Objekte mit zwei gegensätzlichen Zuständen erstellst, wie etwa Schalter, Schaltflächen oder ähnliche Einstellungen.

Um booleschen Werten ein negatives Vorzeichen voranzustellen, gib ! oder not vor der booleschen Variable ein.

Beispiel: Betrachten wir den folgenden Audruck: ! boolVar

Ist der Wert der boolVar wahr, dann wird diese Aussage überall als falsch bewertet.
Ist der boolVar-Wert falsch, wird die Aussage überall als wahr bewertet.

···

Anwendungsmöglichkeiten für Ausdrücke

Ausdrücke schreiben

Numerische Ausdrücke

Zeichenfolgenausdrücke

Boolesche Ausdrücke

Komplexe Ausdrücke und Reihenfolge der Operationen

Konzepte in Ausdrücken

Zahlen mit negativem Vorzeichen

Booleschen Werten ein negatives Vorzeichen voranstellen