Avant de commencer
Qui peut utiliser cette fonctionnalité
Les utilisateurs dans n'importe quelle équipe, quel que soit le forfait.
Les utilisateurs disposant d'un accès en édition 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 interaction 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 (application 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 de la frame entière 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. Vous créez 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 invites à l'écran ou des changements d'état.
L'utilisateur se retrouve dans la frame 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 à la frame 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 de la manette de jeu.
Mouse enter
Ce déclencheur affiche la frame 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. Le 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).
Après avoir configuré une interaction Mouse enter, pensez à configurer un déclencheur Mouse leave 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 Mouse leave pour reproduire plus précisément le nom et la description du déclencheur.
- Les interactions Mouse move inside se déclenchent dès que vous déplacez le curseur à l'intérieur de la zone interactive.
- Les interactions Mouse enter 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 Mouse move inside.
Les interactions Mouse move inside ne peuvent plus être créées. Toutes les nouvelles interactions sont associées au déclencheur Mouse enter.
Mouse leave
Ce déclencheur affiche la frame Destination lorsque le curseur quitte la zone interactive.
Vous pouvez l'utiliser pour les invites à l'écran (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 Mouse leave pour en reproduire plus précisément le nom et la description.
- Les interactions Mouse move outside se déclenchent à chaque fois que l'utilisateur déplace le curseur hors de la zone interactive.
- Les interactions Mouse leave 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 Mouse move outside.
Les interactions Mouse move outside ne peuvent plus être créées. Toutes les nouvelles interactions sont associées au déclencheur Mouse leave.
Mouse down (touch down)
Ce déclencheur affiche la frame 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 la frame 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 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 à la frame 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 une frame donnée. Vous devez définir la durée du 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 pour des éléments tels que des pauses publicité vidéo ou déclencher un message de superposition pendant la lecture vidéo.
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éclenche à 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.