Actions multiples et logique conditionnelle

À mesure que vos prototypes gagnent en profondeur et en complexité, vous pouvez utiliser les actions multiples et la logique conditionnelle pour gérer des résultats multiples ou différents pour une même interaction.

• Actions multiples : empilez un nombre illimité d'actions sur le même déclencheur
• Logique conditionnelle : vérifiez si une condition est remplie avant d'effectuer une action, grâce à un instruction conditionnelle if/else

Actions multiples

Chaque interaction de prototype comporte un déclencheur et une ou plusieurs actions. Le déclencheur est l'élément qui entraîne le début de l'interaction, et l'action est la réponse.

Les actions multiples vous permettent d'ajouter un nombre illimité d'actions à un même déclencheur.

1. Créez une interaction de prototype.
2. Dans le panneau Interaction details, sélectionnez n'importe quelle action dans le menu déroulant Actions.
3. Pour ajouter une action supplémentaire, cliquez sur Add action.

Réorganiser les actions

Les actions s'exécutent dans l'ordre dans lequel elles sont répertoriées, de haut en bas.

Pour réorganiser les actions, procédez comme suit :

1. Ouvrez le panneau Interaction details.
2. Cliquez sur le chevron à gauche du nom de l'action pour réduire les détails de l'action.
3. Cliquez et faites glisser l'action pour la déplacer dans la liste.

Changer l'ordre des actions peut avoir un impact sur le résultat d'un prototype.

En guise d'exemple, voici deux échantillions d'actions de prototype. Ici, la valeur de départ de numberVar est 1.

1. Set numberVar to 2
2. Conditional: if numberVar == 2, Navigate to Frame 2

Dans la première action, la variable numérique est définie sur une valeur de 2. L'instruction conditionnelle (if numberVar == 2) est alors vraie, donc l'action (Navigate to Frame 2) s'exécute.

Changez maintenant l'ordre des actions :

1. Conditional: if numberVar == 2, Navigate to Frame 2
2. Set numberVar to 2

Dans la première action, l'instruction conditionnelle (if numberVar == 2) est évaluée comme fausse ; l'action ne s'exécute donc pas et le prototype reste sur l'image actuelle. Ensuite, la valeur de numberVar est définie sur 2.

Ordre des animations

Les animations de prototype permettent de créer des transitions fluides entre les pages et définissent le comportement d'actions telles que Navigate to, Scroll to, Open overlay etc.

Si un déclencheur comporte plusieurs animations, celles-ci s'exécutent dans l'ordre.

Logique conditionnelle

En matière de prototypage, une logique conditionnelle est une règle qui détermine si une action doit être déclenchée. Elle est écrite selon une logique if/else.

Imaginons par exemple que vous souhaitez concevoir un flux de paiement. Si la valeur totale du panier dépasse un certain montant, alors l'utilisateur bénéficie de l'expédition gratuite. Sinon (else), les frais de port intégraux s'affichent.

Dans Figma, vous pouvez utiliser l'action de prototype Conditional pour créer des prototypes avec une logique conditionnelle.

1. Créez une interaction de prototype.
2. Dans le panneau Interaction Details, sélectionnez un déclencheur dans le menu déroulant.
3. Dans le menu déroulant Actions, sélectionnez Conditional.
4. Complétez la condition If :
1. Dans le champ If, indiquez une expression booléenne représentant la condition à remplir.
2. Sélectionnez une ou plusieurs action(s) dans le menu déroulant. Ces actions sont déclenchées dès que l'instruction If est vraie.
5. Complétez la condition Else :
1. Sélectionnez une ou plusieurs action(s) dans le menu déroulant. Ces actions sont déclenchées si l'instruction If n'est pas vraie. L'action Else n'est pas obligatoire.

Seules les conditions indiquées avec des opérations et dans un format pris en charge fonctionnent. Les instructions conditionnelles non valides sont soulignées en rouge.

Évaluer les instructions conditionnelles

Les instructions conditionnelles, comme les expressions booléennes, sont évaluées avec une valeur true ou false. Si l'instruction a la valeur true, l'action if est déclenchée. Si sa valeur est false, l'action else est déclenchée.

En savoir plus sur le formatage et l'évaluation des expressions booléennes →

Essayez

Entraînons-nous à utiliser plusieurs actions et logiques conditionnelles. Nous allons créer un prototype avec un objectif simple: cliquer cinq fois pour faire apparaître un message de réussite.

1. Ajoutez deux variables locales :

• Une variable numérique nommée clickCount, initialisée à 0
• Une variable nommée clickComplete, initialisée sur false

Ajoutez un objet rectangulaire à un cadre

Sur cet objet, ajoutez une interaction de prototype avec un déclencheur On click/On tap. Ajoutez les deux actions suivantes, dans cet ordre :

1. Set variable: clickCount to clickCount + 1
2. Conditional: If clickCount == 5, Set variable clickComplete to true

Ajoutez deux calques de texte au cadre :

1. Le premier doit contenir des instructions simples (« Appuyez 5 fois sur le carré. »)
2. Le second calque de texte contient le message de réussite (« Bravo ! »)

Appliquez la variable clickComplete à la visibilité du second calque de texte :

1. Sélectionnez le calque de texte.
2. Accédez à la section Layer de la barre latérale droite et faites un clic droit sur l'icône de visibilité.
3. Cliquez sur la variable clickComplete dans le panneau de sélection de variable. Le calque ne sera désormais visible que si la valeur de la variable clickComplete est true.

Exécutez le prototype pour tester l'interaction.