Créer un prototype avec Figma

1. Objectifs

   • Se repérer dans l'interface de Figma: onglets « Design » et « Prototype »
   • Créer des frames pour chaque écran et les nommer
   • Passer du wireframe à la maquette avec des styles de couleur et de texte
   • Utiliser des composants et l'auto layout
   • Relier les écrans par des connexions: déclencheur, action, destination, animation
   • Présenter, partager et faire tester le prototype

1. Présentation

   • Les wireframes ont validé la structure du parcours. Il est temps de lui donner son apparence finale et son comportement : c'est le rôle de Figma, outil de référence pour la maquette et le prototype.
   • Dans cette leçon, vous allez transformer les wireframes de BiblioCampus en maquette, puis relier les écrans pour obtenir un prototype cliquable que de vrais utilisateurs pourront tester sur leur téléphone. Les élèves et enseignants peuvent demander l'offre Éducation de Figma, gratuite.

• Nous continuons avec BiblioCampus, notre application fictive de réservation de livres. Pour les activités, créez le dossier 29-prototype-figma/ dans votre dépôt GitHub ui-ux-design-bts.

1. Pourquoi Figma ?

   • Figma réunit la maquette et le prototype dans le même fichier :

1. L'interface

   • L'interface de Figma comporte quatre zones :

1. Les frames

   • Dans Figma, un écran est un frame:

1. Du wireframe à la maquette

   • On reprend la structure du wireframe et on lui applique des styles:

• Vérifiez les contrastes : un texte gris clair sur fond blanc est difficile à lire, surtout sur un téléphone en extérieur.

1. Composants et auto layout

   • Les éléments répétés deviennent des composants, et l'auto layout gère leurs marges :

1. Les connexions

   • Dans l'onglet « Prototype », on relie les éléments cliquables aux écrans de destination :

1. Régler une interaction

   • Chaque connexion se règle avec quatre paramètres :

1. Overlay, retour et animation

   • Trois réglages rendent le prototype plus réaliste :

1. Présenter et partager

   • Le prototype est prêt à être testé :

1. Exemple 1 : de la maquette au prototype en 20 minutes

   • L'équipe a quatre frames : « 01-Recherche », « 02-Résultats », « 03-Fiche », « 04-Confirmation ».
   • Dans l'onglet « Prototype », Youssef relie la suggestion « UX » à 02, le premier résultat à 03 et le bouton « Réserver » à 04, avec « On click », « Navigate to » et l'animation « Slide in ».
   • Il clique sur ▷ : le parcours complet fonctionne comme une vraie application.

1. Exemple 2 : un composant corrigé partout

   • Le test montre que le bouton « Réserver » est trop petit pour être touché facilement.
   • L'équipe modifie le composant principal : hauteur de 48 px grâce à l'auto layout (marges internes de 14 px). Les 6 instances du bouton, sur 4 écrans, sont corrigées en une seule fois.

1. Exemple 3 : Smart animate sur la mise de côté

   • Sur 03-Fiche, le badge s'appelle « badge-dispo » et affiche « 2 en rayon ». Sur un frame 03b, le même calque « badge-dispo » affiche « Mis de côté pour vous · 2 h » en violet.
   • Avec l'animation « Smart animate », le badge change de texte et de couleur en douceur quand on touche le bouton : les testeurs comprennent immédiatement que l'action a réussi.

1. Aide-mémoire

   • Les étapes pour créer un prototype avec Figma :

1. Activité 1 : préparer les frames

   • Créez un fichier « CantineCampus » et les frames demandés ci-dessous, au format téléphone :

• Vérifier : les cinq frames existent, sont nommés exactement comme dans le cahier des charges et rangés dans l'ordre du parcours.

1. Activité 2 : définir les styles

   • Créez les styles de couleur et de texte du cahier des charges.
   • Vérifier : en modifiant la couleur primaire, tous les éléments qui l'utilisent changent.

1. Activité 3 : créer le composant bouton

   • Créez le composant « Bouton principal » avec auto layout et utilisez-le sur trois écrans.
   • Vérifier : le bouton s'élargit quand on allonge son texte et une modification du composant principal se répercute sur toutes les instances.

1. Activité 4 : réaliser la maquette

   • Réalisez la maquette des quatre écrans à partir de vos wireframes Balsamiq ou ioDraw.
   • Vérifier : la structure des wireframes est respectée et les contrastes texte/fond sont suffisants.

1. Activité 5 : relier les écrans

   • Créez les connexions principales du cahier des charges (Réserver, créneau, Payer).
   • Vérifier : en mode présentation, on va de l'écran 01 à l'écran 04 sans aide.

1. Activité 6 : ajouter retour et overlay

   • Ajoutez l'action « Back » sur la flèche ← des écrans 02 et 03, et le menu latéral en « Open overlay ».
   • Vérifier : le menu s'ouvre par-dessus l'écran et se ferme en cliquant à côté ; la flèche ← ramène à l'écran précédent.

1. Activité 7 : animer

   • Ajoutez une animation « Smart animate » entre le paiement et la confirmation.
   • Vérifier : deux calques portent le même nom sur les deux frames et la transition est animée.

1. Activité 8 : tester sur téléphone

   • Partagez le lien du prototype et faites-le tester par deux camarades sur leur téléphone, avec une consigne : « Réservez un repas pour demain à 12 h 15. »
   • Vérifier : vous avez noté pour chaque testeur s'il a réussi, le temps passé et ses hésitations.

1. Activité 9 : corriger

   • Corrigez au moins deux problèmes relevés pendant le test.
   • Vérifier : chaque correction est liée à une observation précise du test.

1. Activité 10 : déposer votre travail sur GitHub

   • Exportez les écrans en PNG, ajoutez le lien du prototype et vos notes de test dans un fichier README.md du dossier 29-prototype-figma/, puis envoyez le tout :

git add 29-prototype-figma
git commit -m "Ajoute la leçon sur le prototype Figma"
git push

• Vérifier : le README contient le lien du prototype, les captures s'affichent sur GitHub et les notes de test sont jointes.

1. Erreurs fréquentes

1. À retenir

   • Figma réunit maquette et prototype : onglet « Design » pour dessiner, « Prototype » pour relier.
   • Un écran = un frame, nommé et numéroté.
   • Les styles et les composants garantissent la cohérence ; l'auto layout gère les marges.
   • Une connexion se règle avec un déclencheur, une action, une destination et une animation.
   • « Open overlay », « Back » et « Smart animate » rendent le prototype réaliste.
   • On présente, on partage le lien et on fait tester sur un vrai téléphone.

Un prototype n'est pas fait pour être admiré, mais pour être testé.