À propos de ce cours
Cette leçon montre comment transformer une maquette Figma en prototype interactif. Elle explique les connexions (déclencheur, action, animation, durée et courbe), l'organisation en flux nommés avec leurs chemins alternatifs, le Smart Animate, les composants interactifs, les superpositions et le défilement avec éléments fixes, puis la présentation et le test sur ordinateur et sur téléphone. Trois activités font prototyper le parcours « Commander » de CantineCampus.
| Durée | Niveau | Prérequis | À la fin de la leçon |
|---|---|---|---|
| 1 heure 15 (cours et 3 activités) | Débutant, chapitre « Digitaliser le produit avec les outils d'UI » | Créer des composants réutilisables avec Figma ; Les animations dans une interface | Vous savez relier vos écrans en flux, régler les interactions et les animations, et préparer un prototype pour un test |
-
Objectifs
- Comprendre ce qu'est un prototype interactif et à quoi il sert.
- Créer des connexions: déclencheur, action, animation.
- Organiser le prototype en flux.
- Utiliser le Smart Animate, les composants interactifs, les superpositions et le défilement.
- Présenter et tester le prototype sur ordinateur et sur téléphone.
-
À quoi sert un prototype interactif ?
- Un prototype interactif relie les écrans de la maquette pour simuler l'application : on touche un bouton, l'écran suivant apparaît.
- Il sert à tester les parcours avec des usagers avant d'écrire une ligne de code, à présenter le projet à un client et à montrer aux développeurs les comportements attendus.
- Ce n'est pas l'application : il n'y a ni données réelles ni calcul. On simule seulement ce qui est utile au test.
-
Une connexion : déclencheur, action, animation
- Dans l'onglet Prototype du panneau de droite, on tire une connexion (le « fil » bleu) d'un élément vers un écran.
- Le déclencheur: ce que fait l'usager. Au clic (tap), au survol, en appuyant, après un délai, au glissement, à une touche du clavier.
- L'action: ce qui se passe. Naviguer vers un écran, ouvrir une superposition, revenir en arrière, faire défiler jusqu'à un élément, changer de variante, ouvrir un lien.
- L'animation: comment ça se passe. Instantanée, fondu, Smart Animate, glisser, pousser ; avec une durée et une courbe (reprenez les valeurs de vos fiches d'animation du TP 12).
-
Organiser en flux
- Un flux (flow) est un parcours qui commence à un point de départ nommé : « Commander », « Ajouter de l'argent ».
- Créez un flux par tâche du test; les participants commencent directement au bon endroit.
- Dessinez aussi les chemins alternatifs utiles au test : solde insuffisant, plat épuisé. Un prototype qui ne prévoit que le chemin heureux bloque le participant au premier écart.
- Gardez un écran « Hors du prototype » pour les zones non cliquables : le participant voit qu'il est sorti du périmètre testé.
-
Smart Animate et composants interactifs
- Le Smart Animate anime la différence entre deux états : si un calque porte le même nom dans les deux écrans, Figma anime sa position, sa taille, son opacité.
- Les composants interactifs relient directement les variantes d'un composant : un clic sur « + » le transforme en « ✓ », dans tous les écrans, sans dupliquer les écrans.
- Utilisez-les pour les états qui reviennent partout : bouton appuyé, case cochée, carte dépliée, onglet actif.
- Les variables et les conditions du prototype permettent des simulations plus poussées (un compteur de panier, un total), utiles mais facultatives à ce niveau.
-
Superpositions et défilement
- Une superposition (overlay) affiche un élément par-dessus l'écran : message, menu, feuille du bas, alerte. On règle sa position, l'assombrissement du fond et la fermeture au clic à l'extérieur.
- Pour le défilement, rendez le cadre plus haut que l'écran (ou utilisez le défilement du contenu) : le contenu défile, et les éléments marqués fixes (en-tête, barre d'action, barre de navigation) restent en place.
- Ces deux réglages rendent le prototype crédible : le participant se comporte comme dans une vraie application.
-
Présenter et tester
- Le bouton ▶ Présenter lance le prototype ; choisissez le flux et l'appareil (cadre de téléphone).
- Sur téléphone, l'application Figma (mode miroir) affiche le prototype en plein écran : testez au doigt, dans la vraie taille.
- Partagez le lien du prototype avec le droit « lecture » pour un test à distance.
- Faites un essai complet avant chaque test : un lien manquant suffit à bloquer un participant (TP 6).
🍽 Exemple : CantineCampus
- Le flux « Commander » : accueil → menu → ajout au panier (composant interactif « + » → « ✓ », badge 1 → 2) → panier → validation (bouton en état chargement, 1 s) → confirmation (Smart Animate).
- Chemin alternatif : solde insuffisant → superposition « Il manque 1,40 € » avec « Ajouter 5 € ».
⚠ Piège : relier chaque élément de chaque écran « au cas où » produit un prototype impossible à maintenir. Reliez ce que le test demande, et faites-le bien.
-
Aide-mémoire
-
Activités
Activité 1Le flux « Commander » · ⏱ 25 min
- Reliez vos écrans du parcours « Commander » avec des connexions au clic.
- Créez le point de départ « Commander » et réglez les animations (durée et courbe de votre charte).
- Ajoutez le chemin « Plat épuisé » avec une superposition.
📁 Résultat attendu : le prototype et une courte vidéo du parcours.
Activité 2Un composant interactif · ⏱ 15 min
- Reliez les variantes « Ajouter » et « Ajouté » du bouton icône avec une interaction au clic et un Smart Animate.
- Vérifiez que toutes les cartes du menu en profitent sans dupliquer d'écran.
📁 Résultat attendu : le composant interactif et la démonstration.
Activité 3Tester sur téléphone · ⏱ 15 min
- Ouvrez le prototype dans l'application Figma de votre téléphone.
- Faites réaliser le flux à une personne extérieure, sans l'aider.
- Notez les endroits où elle a touché un élément non relié.
📁 Résultat attendu : la liste des liens manquants et leur correction.
-
Erreurs fréquentes
| Symptôme | Cause | Solution |
|---|---|---|
| Le participant reste bloqué | Chemin alternatif non prévu | Prévoir erreurs et retours |
| Toute la page défile, en-tête compris | Éléments non fixés | Marquer l'en-tête et la barre comme fixes |
| Une copie d'écran pour chaque état | Pas de composant interactif | Relier les variantes entre elles |
| Animation qui « saute » | Calques nommés différemment | Mêmes noms dans les deux états |
| Test commencé au mauvais écran | Pas de flux nommé | Un point de départ par tâche |
-
Bilan
- Un prototype interactif simule l'application pour tester, présenter et expliquer.
- Une connexion réunit un déclencheur, une action et une animation.
- Les flux nommés correspondent aux tâches du test, chemins alternatifs compris.
- Smart Animate, composants interactifs, superpositions et défilement le rendent crédible.
- On le teste soi-même, puis sur un vrai téléphone, avant chaque séance.
Un prototype n'a pas besoin de tout faire : il doit faire croire, le temps d'un test, que l'application existe.