Déclencheurs de prototype
Avant de commencer
Qui peut utiliser cette fonctionnalité
Les utilisateurs de toutes les équipes et de tous les forfaits.
Les utilisateurs disposant d'un accès pour éditer peuvent créer des prototypes.
Vous débutez dans le prototypage ? Consultez notre guide Se lancer dans le prototypage.
Tous les prototypes débutent par une interaction unique. Chaque interation possède un déclencheur et une action.
Le déclencheur détermine le type d'interaction avec la zone interactive susceptible de faire avancer le prototype. Il peut s'agir d'une interaction avec le curseur de la souris ou une interaction tactile, par exemple un tapotement, un glisser-déplacer ou encore un clic.
Cet article présente davantage de détails sur nos déclencheurs de prototype.
Astuce : découvrez comment créer une interaction de prototype, ou consultez les actions de prototype disponibles →
On click/On tap
Déclenche l'action lorsque l'utilisateur clique (application de bureau) ou appuie (appication mobile) sur une zone interactive de votre prototype. Vous pouvez ajouter des déclencheurs avec interaction par clic ou tapotement à beaucoup d'éléments qui s'affichent à l'écran.
Vous pouvez les utiliser pour la navigation, notamment pour ouvrir des liens, consulter des menus ou parcourir des sites Web. Ils peuvent être également utilisés lorsqu'un utilisateur doit cliquer sur un bouton, remplir un formulaire, ou encore confirmer ou masquer des alertes.
On drag
Ce déclencheur vous permet d'effectuer une action lorsque vous faites glisser un élément sur l'écran. Il peut s'agir du cadre entier ou d'un élément isolé tel qu'un bouton curseur.
Vous pouvez utiliser la fonctionnalité On Drag dans n'importe quelle direction : vers la gauche, la droite, le haut ou le bas. Une fonctionnalité idéale pour de simples mouvements de glissement, ou pour des animations plus complexes telles qu'une action de glisser pour réactualiser une page.
Faire glisser un élément vous permet de reculer ou d'avancer au moment de la transition. Il crée une action continue, au lieu de devoir réaliser une action après un mouvement de glissement.
While hovering
Déclenche l'action lorsque vous passez le curseur de la souris sur la zone interactive. Vous pouvez utiliser ce déclencheur pour répliquer des info-bulles, des fenêtres pop-up ou des changements d'état.
L'utilisateur se retrouve dans le cadre d'origine après avoir déplacé le curseur hors de la zone interactive. Une interaction idéale si vous ne souhaitez pas éloigner les utilisateurs de l'écran en cours.
While pressing
Déclenche l'action lorsque vous cliquez et maintenez enfoncé le curseur ou le pavé tactile sur un appareil de bureau, ou lorsque vous appuyez de façon prolongée sur un appareil mobile.
Vous pouvez utiliser ce déclencheur pour parcourir des menus déroulants, ou répliquer des interactions à pression longue telles que l'affichage d'un aperçu à l'aide de 3D Touch sur iOS.
Une fois le déclencheur relâché, l'utilisateur revient au cadre d'origine. Une interaction idéale pour les Une fois le déclencheur relâché, l'utilisateur revient au cadre d'origine. Une interaction idéale pour les Superpositions qui capturent des interactions ou des changements d'état temporaires.
Keyboard/Gamepad
Le déclencheur Keyboard / Gamepad vous permet de répliquer des interactions à l'aide d'un raccourci clavier. Il peut s'agir d'entrées utilisateurs depuis des claviers, des manettes de jeu ou des gamepads.
Le déclencheur peut être simplement une touche ou un bouton, ou une combinaison de touches.
Par exemple : le déclencheur peut être activé par l'utilisateur en appuyant sur la touche Entrée ou le bouton ✕ sur une manette de jeu, ou à l'aide d'un raccourci clavier tel que Maj – K.
Remarque : nous prenons officiellement en charge les manettes des consoles Xbox One, PS4 et Nintendo Switch Pro. Les autres manettes peuvent fonctionner, mais les boutons affichés dans Figma peuvent ne pas reproduire précisément ceux la manette de jeu.
Mouse enter
Ce déclencheur affiche le cadre Destination lorsque le curseur pénètre dans la zone interactive. Il peut s'agir d'un petite zone telle qu'un bouton, ou d'une section entière de l'écran.
Vous pouvez utiliser ce déclencheur pour révéler les options d'un menu déroulant au moment où le curseur pénètre dans le champ. Ce menu reste ouvert jusqu'à ce que l'utilisateur effectue Vous pouvez utiliser ce déclencheur pour révéler les options d'un menu déroulant au moment où le curseur pénètre dans le champ. Ce menu reste ouvert jusqu'à ce que l'utilisateur effectue une autre interaction, par exemple la sélection d'un élément ou un clic hors du champ. une autre interaction, par exemple la sélection d'un élément ou un clic hors du champ.
Après avoir configuré une interaction Entrée du curseur, pensez à configurer un déclencheur Sortie du curseur pour annuler l'action au moment de quitter la zone interactive.
Remarque : le 16 novembre 2023, Figma a mis à jour le comportement du déclencheur Entrée du curseur pour reproduire plus précisément le nom et la description du déclencheur.
- Les interactions Déplacement intérieur du curseur se déclenchent dès que vous déplacez le curseur l'intérieur de la zone interactive.
- Les interactions Entrée du curseur se déclenchent uniquement au moment où le curseur pénètre dans la zone interactive.
Afin de préserver les prototypes existants, les interactions créées avant le 16 novembre 2023 sont désormais appelées Déplacement intérieur du curseur.
Les interactions Déplacement intérieur du curseur ne peuvent plus être créées. Toutes les nouvelles interactions sont associées au déclencheur Entrée du curseur .
Mouse leave
Ce déclencheur affiche le cadre Destination lorsque le curseur quitte la zone interactive.
Vous pouvez l'utiliser pour les fenêtres pop-up, par exemple une alerte indiquant que vous n'avez pas rempli un champ ou coché une case.
Remarque : le 16 novembre 2023, Figma a mis à jour le comportement du déclencheur Sortie du curseur pour reproduire plus précisément le nom et la description du déclencheur.
- Les interactions Déplacement extérieur du curseur se déclenchent à chaque fois que l'utilisateur déplace le curseur hors de la zone interactive.
- Les interactions Sortie du curseur se déclenchent uniquement au moment précis où le curseur quitte la zone interactive.
Pour préserver les prototypes existants, les interactions créées avant le 16 novembre 2023 sont désormais appelées Déplacement extérieur du curseur.
Les interactions Déplacement extérieur du curseur ne peuvent plus être créées. Toutes les nouvelles interactions sont associées au déclencheur Sortie du curseur.
Mouse down (touch down)
Ce déclencheur affiche le cadre Destination lorsque vous appuyez pour la première fois sur le curseur ou le pavé tactile. Sur les appareils mobiles, il se déclenche lorsque l'utilisateur pose son doigt la première fois sur la zone interactive.
Mouse up (touch up)
Ce déclencheur affiche le cadre Destination lorsque l'utilisateur relâche le curseur ou le pavé tactile. Sur les appareils mobiles, il se déclenche lorsque l'utilisateur ne pose plus le doigt sur la zone interactive.
- Vous pouvez par exemple appliquer le déclencheur Mouse Down à l'en-tête d'un menu pour ouvrir une Superposition.
- Vous pouvez par exemple appliquer l'interaction Mouse Up à l'élément d'un menu dans la Superposition.
- Une fois que l'utilisateur relâche le curseur, il revient au cadre d'origine.
Astuce : utilisez les déclencheurs Mouse Down et Mouse Up en même temps pour répliquer l'action d'un utilisateur parcourant un menu déroulant.
After delay
Le déclencheur After delay vous permet de déclencher une action une fois que l'utilisateur a passé un certain temps sur un cadre spécifique. Vous devrez définir la durée de ce délai en millisecondes (ms).
When video hits
Le déclencheur When video hits est réservé à toutes les connexions qui débutent sur un fichier vidéo.
Il vous permet de définir une action lorsque la vidéo atteint un horodatage précis. Il peut s'avérer utile pour créer des prototypes Il vous permet de définir une action lorsque la vidéo atteint un horodotage précis.
Lorsque vous sélectionnez le déclencheur When video hits vous devez saisir un champ dans l'horodatage en question.
Remarque : si vous saisissez un horodatage qui dépasse la durée totale de la vidéo, l'action se délenche à la fin de la vidéo.
En savoir plus sur les prototypes et les vidéos →
When video ends
Le déclencheur When video ends est réservé à toutes les connexions qui débutent sur un fichier vidéo.
Il vous permet de définir une action lorsque la vidéo se termine. Il peut s'avérer utile pour le séquençage de vidéos ou la création d'une expérience de lecture de vidéo interactive.