Actions multiples et logique conditionnelle
🚧Les variables sont actuellement en bêta ouverte. Nous continuerons à ajouter davantage de fonctionnalités et à affiner l'expérience durant ce délai. Découvrez les nouveautés à venir→
Avant de commencer
Qui peut utiliser cette fonctionnalité ?
Disponible avec tous les forfaits payants.
Toute personne disposant de l'accès peut éditer
pour un fichier peut créer des prototypes.
Toute personne disposant de l'accès peut voir
ou peut voir les prototypes uniquement
pour un fichier peut consulter des prototypes.
À 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
Vous découvrez les variables ? Plus d'informations ici :
Vous souhaitez réaliser des exercices pratiques ?
Découvrez le fichier d'initiation au prototypage avancé →
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.
- Créez une interaction de prototype.
- Dans le panneau Interaction details, sélectionnez n'importe quelle action dans le menu déroulant Actions.
- Pour ajouter une action supplémentaire, cliquez sur Add action.
Astuce : réduisez ou développez les détails de chaque action en cliquant sur le chevron à gauche du nom de l'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 :
- Ouvrez le panneau Interaction details.
- Cliquez sur le chevron à gauche du nom de l'action pour réduire les détails de l'action.
- Cliquez et faites glisser l'action pour la déplacer dans la liste.
Astuce : vous pouvez faire glisser n'importe quelle action vers une action Conditional (conditionnelle).
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
.
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 :
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.
- Créez une interaction de prototype.
- Dans le panneau Interaction Details, sélectionnez un déclencheur dans le menu déroulant.
- Dans le menu déroulant Actions, sélectionnez Conditional.
- Complétez la condition If :
- Dans le champ If, indiquez une expression booléenne représentant la condition à remplir.
- 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.
- Complétez la condition Else :
- 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
Exemple : création d'un compteur de clics
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.
- Ajoutez deux variables locales :
- Une variable numérique nommée
clickCount
, initialisĂ©e Ă0
- Une variable nommée
clickComplete
, initialisée surfalse
-
Set variable:
clickCount
toclickCount + 1
-
Conditional: If
clickCount == 5
, Set variableclickComplete
totrue
- Le premier doit contenir des instructions simples (« Appuyez 5 fois sur le carré. »)
- Le second calque de texte contient le message de réussite (« Bravo ! »)
clickComplete
à la visibilité du second calque de texte :- Sélectionnez le calque de texte.
- Accédez à la section Layer de la barre latérale droite et faites un clic droit sur l'icône de visibilité.
- 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 variableclickComplete
est true.