Créer des interactions

Avant de commencer

Qui peut utiliser cette fonctionnalité

Les utilisateurs de toutes les équipes et de tous les forfaits peuvent créer des prototypes.

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

Les prototypes sont des designs interactifs.

Tous les prototypes débutent par une interaction unique. Chaque interaction est associée à un déclencheur (qui permet de démarrer l'interaction) et à une action (le résultat du déclencheur).

Certaines interactions se produisent sur un seul objet. Par exemple :

• Cliquer sur un objet pour ouvrir une URL externe
• Cliquer sur une vidéo pour lancer la lecture ou la mettre en pause

D'autres interactions se produisent entre deux objets ou cadres. Ces interactions sont considérées comme des connexions. Par exemple :

• Cliquer sur un bouton pour accéder au cadre suivant
• Cliquer sur un objet pour ouvrir une superposition

Une connexion de prototype se compose de trois parties :

1. La zone interactive : il s'agit du lieu où se produit l'interaction. Une zone interactive peut être le cadre lui-même, ou un objet intégré à ce cadre. Vous pouvez créer une zone interactive partout où vous le souhaitez, 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, les actions, et règle 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, cette destination doit être un cadre de premier niveau. Seules les connexions utilisant l'action Faire défiler peuvent être définies vers une destination au sein du même cadre de premier niveau.

Créer 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 de 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 façons suivantes :
   • passez le curseur de votre souris sur l'objet, puis faites glisser l'icône Plus vers le cadre de destination ;
   • cliquez sur l'icône Plus 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 de manière groupée

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 façons suivantes :
   • sélectionnez un premier objet, puis maintenez enfoncée la touche Maj tout en cliquant sur d'autres objets ;
   • faites glisser votre curseur sur chaque objet que vous souhaitez sélectionner.
2. Créez vos interactions en suivant l'une des méthodes suivantes :
   • passez votre curseur sur l'un des objets sélectionnés, puis cliquez sur l'icône Plus pour la faire glisser vers le cadre de destination ;
   • cliquez sur l'icône Plus de la section Interactions du panneau Prototype, puis utilisez le panneau Détails de l'interaction pour définir 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 details 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 ou un mouvement tactile.
   En savoir plus sur les déclencheurs de prototype de Figma →
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 un autre cadre, ou en engageant une superposition.
   En savoir plus sur les actions de prototype de Figma→
3. Destination : permet de définir où se termine l'interaction. Il peut s'agir d'une 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 le cadre précédent.
4. Réglages de l'animation : détermine comment le prototype se déplace d'un cadre à un autre.
   En savoir plus sur les réglages de l'animation↓
5. Gestion des états : cliquez pour réinitialiser les propriétés et les états de l'objet lorsque vous naviguez dans un cadre et d'un cadre à l'autre .
   En savoir plus sur la gestion des états de prototype →
6. Ajouter une action : permet d'ajouter une action au même déclencheur.
   En savoir plus sur les actions multiples→
7. Fermez la fenêtre modale Détails de l'interaction details.

Un seul objet peut avoir différentes interactions, chacune associée à son propre déclencheur. Par exemple, vous pouvez avoir un objet 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 seule 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'un cadre à l'autre.

1. L'animation : elle définit la façon dont le prototype bascule d'un cadre à l'autre, par exemple par une poussée, un glissement ou un fondu.
   En savoir plus sur les types d'animation de Figma →
2. La 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.
   En savoir plus sur l'animation automatique →
4. Animation facilement déclenchée : cette option détermine l'accélération de la transition entre un cadre de départ et sa destination.
   En savoir plus sur les options de facilité de Figma →
5. Durée : permet de déterminer la durée, 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 modfiier 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 cadres.

• Les interactions identiques sont des interactions dotées de la même action et de la même destination
• Les objets corresopndants sont des objets de différents cadres, 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 details 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 même temps.

1. Sélectionnez les connexions que vous souhaitez modifier. Vous pouvez sélectionner plusieurs connexions à l'aide d'une des méthodes 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 l'une des connexions que vous souhaitez sélectionner. Une case bleue s'affiche autour des connexions sélectionnées.
2. Appuyez sur les connexions de votre choix et faites-les glisser vers un nouveau cadre de destination. Vous pouvez également sélectionner l'interaction dans la barre latérale droite et modifier le cadre 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électionez une interaction de prototype dans le plan de travail.
2. Appuyez sur ⌘ Command / Control + C pour copier ou sur ⌘ Command / Control + X to couper les détails de l'interaction.
3. Sélectionnez un autre objet dans le plan de travail.
4. Appuyez sur ⌘ Command / Control + V pour coller les détails de l'interaction vers le nouvel objet.