···

    AusdrĂĽcke in Prototypen verwenden

    🚧 „Variables“ (Variablen) befindet sich derzeit in der offenen Beta-Phase. Wir fügen kontinuierlich neue Funktionen hinzu und verbessern die Benutzererfahrung. Mehr über die zukünftigen Funktionen erfahren→

    Bevor du anfängst

    Wer diese Funktion nutzen kann

    In jedem kostenpflichtigen Abo verfĂĽgbar.

    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 →

    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.

    1. Set variable (Variable festlegen): Hiermit gibst du einen Ausdruck ein, der den neuen Wert der ausgewählten Variable darstellt.
    2. 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:

    1. Klammern
    2. Multiplikation/Division
    3. Addition/Subtraktion

    Boolesche AusdrĂĽcke werden in der folgenden Reihenfolge ausgefĂĽhrt:

    1. Klammern
    2. Vergleiche (==, !=, >, < usw.)
    3. Und
    4. 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

    Um einem positiven Zahlenwert ein negatives Vorzeichen voranzustellen, subtrahiere den Zahlenwert von 0.

    Beispiel: Du kannst eine Zahlenvariable (numVar) mit einem positiven Wert mit dem folgenden Ausdruck in einen Wert mit einem negativen Vorzeichen ändern:

    0 - numVar

    Um einen Zahlenwert mit einem negativen Vorzeichen in einen positiven Zahlenwert zu ändern, multipliziere die Zahl mit 1.

    Beispiel: Du kannst eine Zahlenvariable (numVar) mit einem negativen Vorzeichen mit dem folgenden Ausdruck in einen positiven Wert ändern:

    (0 - 1) * numVar

    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.

    Mit dem folgenden Ausdruck kannst du einem booleschen Wert ein negatives Vorzeichen voranstellen:

    boolVar != true

    Der Operator != gibt „true“ zurück, wenn die Werte nicht gleich sind. Wenn die Werte gleich sind, gibt er „false“ zurück. Dies bedeutet:

    • Wenn der Wert boolVar als Ergebnis true zurĂĽckgibt, ist true gleich true. Die Aussage gilt somit als false.
    • Wenn der Wert boolVar als Ergebnis false zurĂĽckgibt, ist false nicht gleich true. Die Aussage gilt somit als true.

    Probiere es selbst

    Beispiel: Erstelle einen Balken zur Lautstärkeregelung.

    Erstelle zunächst mit ein paar einfachen Formen den Rahmen mit dem Lautstärkebalken und den Steuerelementen:
    • FĂĽge ein Rechteck fĂĽr das Lautstärkefeld hinzu. Das hier dargestellte hat eine Breite von 260 und eine Höhe von 100.
    • FĂĽge ein zweites Rechteck fĂĽr den Lautstärkepegel hinzu. Platziere dieses Rechteck auf dem ersten und richte beide auf der linken Seite bĂĽndig aus. Das zweite Rechteck sollte schmaler als das erste sein. In unserem Beispiel hat es zunächst eine Höhe von 100 und eine Breite von 14.
    • Erstelle mithilfe von Linien Objekte fĂĽr das Plus- und Minuszeichen, und platziere diese unter dem Lautstärkefeld.

    A frame with a design of a volume control bar, consisting of two rectangle objects, a plus sign, and a minus sign.

    Als nächstes erstellen wir eine Variable. Erstelle in einer neuen Collection eine Zahlenvariable. Nenne sie volumeLevel und weise ihr einen Anfangswert von 14 zu.

    Binde jetzt die Variable volumeLevel an den Wert für die Breite des Rechtecks, das den Lautstärkepegel darstellt.

    1. Klicke auf das kleinere Rechteck, um es auszuwählen.
    2. Gehe in der rechten Seitenleiste auf dem Design-Tab zum Wert fĂĽr die Breite.
    3. Bewege den Mauszeiger über das Feld mit dem Wert für die Breite und wähle dann Apply variable (Variable anwenden) aus.
    4. Wähle im Auswahlpanel der Variable die Variable volumeLevel aus.With the smaller rectangle selected, navigate to the Width property and click Apply variable.

    Nachdem du jetzt den Rahmen und die Variablen eingerichtet hast, kannst du die Prototyping-Interaktionen erstellen.

    1. Klicke im Rahmen auf das Pluszeichen-Objekt.
    2. Klicke im Tab Prototype (Prototyp) in der rechten Seitenleiste auf das Plus-Symbol, um eine neue Interaktion hinzuzufĂĽgen.
    3. Setze den Auslöser auf On tap/On click (Beim Antippen/Beim Anklicken) und die Aktion auf Set variable (Variable festlegen). Wähle als Variable volumeLevel aus.
    4. Lege den neuen Wert mithilfe eines Ausdrucks fest. Das Objekt, das den Lautstärkepegel darstellt, soll bei jedem Antippen/Anklicken des Plussymbols um 5 breiter werden. Dies erreichst du mit dem Ausdruck:
      volumeLevel + 5
    5. Wiederhole die Schritte 1–4 für das Minus-Symbol und lege diesmal den neuen Variablenwert mit dem folgenden Ausdruck fest:
      volumeLevel - 5The plus sign is selected, and has the following interaction: Set volumeLevel to volumeLevel + 5

    Spiele deinen Prototypen ab, um die Interaktionen zu testen.The prototype plays. When the plus sign is clicked, volume level increases in width. When minus button is clicked, volume level decreases in width.

    War dieser Beitrag hilfreich?

    Your feedback helps us improve Figma’s Help Center. To get help from support, submit a request through our contact form.

    Your feedback helps us improve Figma’s Help Center. To get help from support, submit a request through our contact form.

    Thank you for helping us improve Figma’s Help Center!

    ZurĂĽck an den Anfang