Composants interactifs : Figma donne vie aux prototypes !

Chez Troopers, nous utilisons Figma pour designer et prototyper nos interfaces. Figma annonce régulièrement de nouvelles fonctionnalités de plus en plus impressionnantes. Après la sortie des Figjam, l’outil de design propose désormais de nouvelles fonctionnalités dont les “composants interactifs”.

C’est une fonctionnalité qui va faire plaisir aux clients et économiser pas mal de temps. Les clients souhaitent souvent utiliser le prototype comme si c’était une vraie application. On ne peut pas leur en vouloir mais ça pose un problème de taille : designer chaque interaction de chaque bouton ou menu prendrait un temps infini.

Récemment, pour la refonte d’un tunnel, nous allions envoyer le prototype aux clients lorsque nous nous sommes rendus compte que le menu mobile ne se dépliait pas sur chaque écran.

Les composants à la rescousse

Première réaction : il va falloir créer un écran pour chaque menu déplié et prototyper chaque menu pour qu’il s’ouvre au clic.

Un composant dans Figma, c’est un élément de la maquette ou de mon wireframe que je peux réutiliser à l’infini. Par exemple, au lieu de dupliquer un bouton menu sur chaque écran, je crée un composant et le place sur chaque écran. Si je dois le modifier plus tard (par exemple à la demande du client), tous les boutons seront modifiés d’un coup.

Le souci des composants, avant la dernière mise à jour, est qu’ils permettaient la duplication du design mais pas celle des actions du prototype. C’est désormais possible car les composants sont devenus interactifs ! Ouvre une nouvelle fenêtrehttps://www.figma.com/blog/prototyping-updates-and-interactive-components/

Regardons en détail comment cela fonctionne.

Une fois le composant menu créé, je lui crée un état “déplié” avec la fonctionnalité variation et j’ajoute une animation au sein même de ce composant. Une fois le composant importé dans un écran, il a deux états et une animation : je peux donc l’importer sur tous les écrans sans avoir à me soucier de son fonctionnement ! Quand je le modifie, tout le prototype est modifié d’un seul coup.

Je crée d’abord un composant “Menu” (Ctrl+Alt+K) :

Les variantes pour décliner les états d’un composant

Je veux ensuite créer une variante pour définir l’état de mon menu “ouvert”.

Sur la barre de droite cliquez sur “+” à côté de “Variants” pour ajouter une variante et saisissez le nom de la variante.

J’ai appelé la propriété “open” et les variants “On” et “Off”

Les Ouvre une nouvelle fenêtrevariantes nous permettent de regrouper et d'organiser des composants similaires dans un seul conteneur (exemple : 1 seul composant Input aura 5 état : focus, hover, disabled, error).

Une fois le composant et ses variantes créées, je peux importer ce composant dans les écrans. Je retrouve mes composants dans “Assets”. Je choisis le composant que je viens de créer, je fais un glisser-déposer dans l’écran.

Une fois importé, je peux choisir quelle variante de mon composant je dois afficher, à droite dans la section qui porte le nom du composant : ici MENU.

Comment activer les composants interactifs ?

Ce dont j’ai besoin à présent c’est de prototyper ce composant afin qu’au click il passe de l’état “Off” à l’état “On”. Puis quand je clique sur l'icône “close” il passe de l’état “On” à l’état “Off”.

Maintenant, à chaque fois que j’importe ce composant, l’action est importée avec lui ! Je n'ai plus qu’à importer ce composant sur tous les écrans et ne plus me soucier à ce que le menu puisse se déplier ou non.

Pour que cela fonctionne en lançant le prototype, il faut bien activer les composants interactifs dans l’onglet “Prototype” :

Finalement, le client a un prototype encore plus interactif entre les mains et n’a pas à consulter un écran précis pour voir comment marche le menu. Cela ne m’a pas fait trop perdre de temps. L’exemple du menu est assez courant mais vous pouvez aussi utiliser les composants interactifs avec une checkbox par exemple pour passer de “checked” à “unchecked”.