Actions multiples et logique conditionnelle – Figma Learn - Centre d'aide

Avant de commencer

Qui peut utiliser cette fonctionnalité ?

Disponible dans 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é →

Vous souhaitez en savoir plus sur la façon dont vous pouvez utiliser des variables dans des prototypes ? Découvrez d'autres exemples de 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.

An prototype Interaction Details modal. There are two actions listed, and the mouse is hovering over the plus icon at the top of the modal.

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.

An interaction details modal with two actions. The user clicks to collapse the details of the second action, then clicks and drags it to the top of the modal so it becomes the first listed action.

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.

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.

An interaction with two actions. The first action navigates to frame 2 and has a slide in animation, the second action opens an overlay with a move in animation.

The prototype from the previous image plays. First, it navigates to the next frame with a slide in animation. Then, an overlay opens on the second frame with a move in animation.

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.

A checkout cart design with a prototype interaction on the checkout button. The conditional states: if cartTotal > 30, set freeShipping to true. Else, set freeShipping to false.

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 →