Connecter votre prototype

Avant de commencer

Qui peut utiliser cette fonctionnalité

Disponible dans tous les forfaits.

Toute personne disposant de l'accès peut éditer au niveau d'un fichier peut créer des prototypes.

Les prototypes sont des designs avec lesquels vous pouvez interagir.

Dans Figma, tous les prototypes commencent par une seule interaction. Chaque interaction se compose de deux parties : un déclencheur (qui provoque le démarrage de l'interaction) et une action (le résultat du déclencheur).

Certaines interactions se déroulent sur un seul objet (par exemple, cliquer sur un objet pour ouvrir une URL externe ou cliquer sur une vidéo pour la lire et la mettre en pause).

D'autres interactions se produisent entre deux objets ou frames (par exemple, cliquer sur un bouton pour naviguer vers la frame suivante ou cliquer sur une icône pour ouvrir une superposition). Ces interactions sont considérées comme des connexions, qui se composent de trois parties :

1. La zone interactive : il s'agit de l'endroit où se produit l'interaction. Une zone interactive peut être la frame elle-même ou un objet intégré à la frame. Vous pouvez créer une zone interactive partout où vous le souhaitez (par exemple, sur un bouton, une icône ou un en-tête).
2. La connexion : il s'agit d'une flèche ou d'une « nouille » qui connecte la zone interactive à sa destination. L'utilisateur définit le déclencheur de l'interaction et les actions et ajuste les paramètres d'animation depuis la connexion.
3. La destination : il s'agit de l'endroit où se termine la connexion. Dans la plupart des cas, la destination doit être une frame de premier niveau. Seules les connexions utilisant l'action Faire défiler peuvent être définies sur une destination au sein de la même frame de premier niveau.

Ajouter une interaction

Vous pouvez créer une interaction en sélectionnant une zone interactive ou un point de départ.

1. Ouvrez l'onglet Prototype de la barre latérale droite.
2. Sélectionnez un calque ou un objet pour la zone interactive de l'interaction.
3. Créez votre interaction en procédant de l'une des manières suivantes :
   • Passez le curseur de votre souris sur l'objet, puis faites glisser l'icône Plus vers la frame de destination.
   • Cliquez sur Ajouter dans la section Interactions du panneau Prototype.
4. Une fois l'interaction créée, utilisez le panneau Détails de l'interaction pour définir le déclencheur, l'action et la destination de l'interaction.

Créer des interactions en masse

Vous pouvez créer des interactions depuis plusieurs objets en même temps. Cela peut vous être utile lorsque vous créez plusieurs connexions vers la même destination.

1. Sélectionnez vos objets ou zones interactives de départ, où débutent les interactions. Vous pouvez sélectionner plusieurs objets de l'une des manières suivantes :
   • Sélectionnez un premier objet, puis maintenez la touche Maj enfoncée tout en cliquant sur d'autres objets.
   • Passez votre curseur sur chaque objet que vous souhaitez sélectionner.
2. Créez vos interactions en procédant de l'une des manières suivantes :
   • Passez votre curseur sur l'un des objets sélectionnés, puis cliquez sur l'icône Plus et faites-la glisser vers la frame de destination.
   • Cliquez sur l'icône Plus de la section Interactions du panneau Prototype, puis, dans le panneau Détails de l'interaction, définissez le déclencheur, l'action et les détails d'animation.

Détails de l'interaction

Après avoir créé votre interaction, utilisez la fenêtre modale Détails de l'interaction pour configurer les éléments suivants :

1. Déclencheur : permet de définir le type d'interaction qui provoquera l'avancée du prototype (par exemple, un clic de souris ou un geste tactile).
2. Action : permet de définir le type d'événement qui se produit lorsqu'un utilisateur interagit avec la zone interactive (par exemple, en basculant sur une autre frame ou en engageant une superposition).
3. Destination : permet de définir l'endroit où se termine l'interaction. Il peut s'agir d'un autre écran du prototype ou d'une superposition qui apparaît au-dessus de l'écran actuel. Certaines interactions n'ont pas de destination : par exemple, le déclencheur Back rebascule automatiquement l'utilisateur vers la frame précédente.
4. Réglages de l'animation : détermine comment le prototype se déplace d'une frame à l'autre.
5. Gestion des états : cliquez pour réinitialiser les propriétés et les états des objets lors de la navigation dans et entre les frames.
6. Ajouter une action : ajoutez une autre action au même déclencheur.
7. Fermez la fenêtre modale Détails de l'interaction.

Un seul objet peut avoir plusieurs interactions, chacune avec son propre déclencheur. Par exemple, un objet peut être doté d'un remplissage vidéo associé à deux interactions : l'une qui lit la vidéo On click (Au clic) et l'autre qui ouvre une superposition When video ends (Lorsque la vidéo se termine). 

Un seul objet peut avoir :

• N'importe quel nombre des déclencheurs suivants :
  • Key/Gamepad
  • On drag 
  • When video hits
• Une unité de chaque déclencheur suivant :
  • On click/On tap
  • While hovering
  • While pressing
  • Mouse enter
  • Mouse leave
  • Mouse down/Touch press
  • Mouse up/Touch release
  • After delay
  • When video ends

Réglages de l'animation

Les réglages de l'animation déterminent la façon dont le prototype se déplace d'une frame à l'autre.

1. Animation : l'animation définit la façon dont le prototype passe d'une frame à l'autre (par exemple, par une poussée, un glissement ou un fondu).
2. Direction : pour certains types d'animations (notamment les actions Recouvrir ou Pousser), vous pouvez définir la direction dans laquelle vous souhaitez voir avancer la transition. Choisissez entre gauche, droite, haut et bas.
3. Animation des calques correspondants : cochez cette case pour appliquer la transition Animation automatique à tous les calques correspondants.
4. Easing et animation à ressort : l'easing détermine l'accélération de la transition entre une image de départ et sa destination.
5. Durée : permet de déterminer le temps qu'il faut, en millisecondes (ms), pour terminer la transition. Choisissez une durée comprise entre 1 et 10 000 ms (10 secondes).
6. Lancez un aperçu de l'animation.

Sélectionner et modifier des interactions

Utilisez les outils suivants pour améliorer et accélérer la modification des prototypes.

Sélectionner les interactions correspondantes

Les interactions correspondantes sont des interactions identiques qui débutent à partir d'objets correspondants dans d'autres frames.

• Les interactions identiques sont des interactions dotées de la même action et de la même destination.
• Les objets correspondants sont des objets de différentes frames, dont les noms et les niveaux de hiérarchie sont identiques.

Pour sélectionner les interactions correspondantes :

1. Sélectionnez une interaction.
2. Dans la fenêtre modale Détails de l'interaction, cliquez sur Sélectionner les interactions correspondantes.

Modifiez les détails de l'interaction pour mettre à jour toutes les interactions sélectionnées en même temps.

Mettre à jour les destinations de connexion de manière groupée

Si vous disposez de plusieurs connexions, vous pouvez modifier la destination de ces connexions en une seule fois.

1. Sélectionnez les connexions que vous souhaitez modifier. Vous pouvez sélectionner plusieurs connexions en procédant de l'une des manières suivantes :
   • Sélectionnez une première connexion, puis maintenez la touche Maj enfoncée tout en cliquant sur les autres connexions.
   • Faites glisser votre curseur sur les connexions que vous souhaitez sélectionner. Une case bleue s'affiche autour des connexions sélectionnées.
2. Maintenez enfoncées les connexions de votre choix et faites-les glisser vers une nouvelle frame de destination. Vous pouvez également sélectionner l'interaction dans la barre latérale droite et modifier la frame de destination depuis le panneau Détails de l'interaction.

Copier-coller les détails d'une interaction

Créez des prototypes plus rapidement en copiant les détails d'une interaction et en les collant sur d'autres objets.

1. Sélectionnez une interaction de prototype dans le plan de travail.
2. Appuyez sur ⌘ Commande/Contrôle + C pour copier ou sur ⌘ Commande/Contrôle + X pour couper les détails de l'interaction.
3. Sélectionnez un autre objet dans le plan de travail.
4. Appuyez sur ⌘ Commande/Contrôle + V pour coller les détails de l'interaction vers le nouvel objet.