TP 15 : Réaliser la maquette finale d'une application

1. Objectifs

   • Construire un fichier Figma organisé, avec les variables et les styles de la charte
   • Créer une bibliothèque de composants avec variantes et propriétés
   • Réaliser les écrans finaux de l'application, sur mobile et sur grand écran, avec de vrais contenus
   • Prototyper les parcours principaux et les tester avec des usagers
   • Organiser une revue commentée et préparer la maquette pour les développeurs

1. Prérequis

   • Avoir suivi les leçons du chapitre « Digitaliser le produit avec les outils d'UI » : Découvrir l'interface de Figma, Créer des composants réutilisables avec Figma, Créer un prototype interactif avec Figma, Concevoir des interfaces avec Adobe XD, Partager et commenter une maquette avec InVision, Préparer la maquette pour les développeurs.
   • Avoir réalisé le TP 11 : Élaborer la charte graphique d'une application, le TP 12 : Concevoir les interactions et la mise en page responsive d'une application et le TP 13 : Concevoir l'architecture de l'information et les parcours d'une application : vous réutilisez la charte, les fiches d'interaction, la grille et l'arborescence.
   • Aucune programmation n'est demandée : vous livrez une maquette qu'un développeur peut construire sans vous poser de question.

1. Présentation du projet

   • Le directeur du restaurant a validé l'architecture de CantineCampus. Il veut maintenant voir l'application finale, et l'équipe de développement attend la maquette pour démarrer.
   • Jusqu'ici, vous avez travaillé par morceaux : la charte (TP 11), les boutons, les animations et la grille (TP 12), l'arborescence et les parcours (TP 13). Il faut les réunir dans un seul fichier, propre, testé et documenté.
   • Votre mission : réaliser la maquette finale de CantineCampus dans Figma, du design system jusqu'au passage de relais aux développeurs.
   • Téléchargez l'archive du TP. Elle contient le brief (ressources/brief-maquette-finale.md), les vrais contenus (menus, prix, messages), le logo et des illustrations de plats en SVG, les tokens de la charte (tokens/), le classeur modeles/grille-tp15.xlsx et un modèle de fiche de passage de relais.

• Les écrans de l'image sont des exemples: votre maquette reprend votre charte et votre arborescence. Deux binômes ne doivent pas rendre le même fichier.
• Les illustrations de plats fournies sont des dessins simples, libres d'usage pour ce TP. Vous pouvez les remplacer par vos propres photos, mais n'utilisez pas d'images trouvées sur Internet sans en vérifier les droits.

1. Organisation du TP

   • Le TP est découpé en dix parties. Chacune indique sa durée, ses notions, ses consignes, une aide, un point de contrôle et des questions.
   • Le classeur modeles/grille-tp15.xlsx suit l'avancement : écrans réalisés, composants, liens du prototype, résultats du test, journal de revue et liste de contrôle du passage de relais.
   • Trois règles s'appliquent : rien n'est saisi en dur (variables, styles, composants) ; tout est nommé; chaque écran a tous ses états.
   • À la fin de chaque partie, nommez une version dans Figma et enregistrez vos exports et le classeur sur GitHub : un commit par partie.

1. Partie 0 : préparer le travail

⏱ 15 min

Notions mobilisées : Découvrir l'interface de Figma

• Dans votre dépôt ui-ux-design-bts, créez le dossier de ce TP :

cd ui-ux-design-bts
git pull
mkdir -p projet-cantinecampus/09-maquette-finale/exports projet-cantinecampus/09-maquette-finale/test projet-cantinecampus/09-maquette-finale/revue projet-cantinecampus/09-maquette-finale/handoff
git add projet-cantinecampus/09-maquette-finale
git commit --allow-empty -m "Démarre le TP 15"
git push

• Copiez le classeur dans 09-maquette-finale/. Lisez le brief et les contenus réels (ressources/).
• Rassemblez vos livrables précédents : charte (TP 11), fiches d'interaction et grille (TP 12), arborescence et parcours optimisés (TP 13).
• Vérifiez votre accès au plan Éducation de Figma et installez l'application Figma sur un téléphone du binôme.

📁 Dans le dossier : la liste des livrables réutilisés et le brief annoté.

1. Partie 1 : créer le fichier et les variables

⏱ 25 min

Notions mobilisées : Découvrir l'interface de Figma · Créer et respecter une charte graphique

• Créez le fichier « CantineCampus · Maquette finale » avec les pages : Couverture, Design system, Écrans mobile, Écrans ordinateur, Prototype, Archive. Remplissez la couverture (nom, version, statut, binôme).
• Créez les variables de la charte à partir de tokens/cantinecampus-tokens.json: couleurs (primaire, secondaire, texte, fond, succès, erreur…), espacements (4, 8, 12, 16, 24, 32), rayons. Utilisez les mêmes noms que dans le fichier de tokens.
• Créez les styles de texte (titre, sous-titre, corps, légende, bouton) et les styles d'effet (ombre des cartes).
• Si vous avez un mode sombre, créez un second mode dans la collection de couleurs.

📁 Dans le dossier : une capture des variables et des styles, et l'onglet « Livraison » commencé.

1. Partie 2 : construire la bibliothèque de composants

⏱ 40 min

Notions mobilisées : Créer des composants réutilisables avec Figma

• Sur la page « Design system », créez les composants, rangés selon l'Atomic Design :
• Les composants attendus :
  • atomes: bouton (niveaux et états), bouton icône, champ, badge, puce de filtre, icônes ;
  • molécules: carte de plat (normale, épuisée), ligne du panier, carte de solde, message (succès, erreur) ;
  • organismes: en-tête, barre de navigation du bas, barre d'action fixe, feuille du bas.
• Construisez chaque composant en auto layout, avec les variables et les styles, et ajoutez les propriétés utiles (libellé, icône visible, échange d'icône).
• Reportez chaque composant dans l'onglet « Composants » du classeur : niveau, variantes, propriétés, test du texte long.

📁 Dans le dossier : la page « Design system » et l'onglet « Composants ».

1. Partie 3 : réaliser les écrans mobiles

⏱ 45 min

Notions mobilisées : Découvrir l'interface de Figma · Créer des composants réutilisables avec Figma

• Sur la page « Écrans mobile », réalisez les écrans de vos parcours optimisés (TP 13), en cadres de 390 × 844 avec la grille de 4 colonnes :
• Les écrans attendus :
  • Accueil ; Menu du jour ; Fiche d'un plat ; Panier ; Confirmation de commande ;
  • Mon solde et recharge ; Mon compte ; et au moins un écran de votre choix (favoris, allergènes, horaires).
• Utilisez uniquement des instances de vos composants et les contenus réels de ressources/contenus-reels.md (aucun « Lorem ipsum »).
• Pour le panier et la recharge, dessinez les états: vide, chargement, erreur, succès. Rangez chaque parcours dans une section.
• Notez chaque écran et ses états dans l'onglet « Écrans ».

📁 Dans le dossier : la page « Écrans mobile » et l'onglet « Écrans ».

1. Partie 4 : adapter aux écrans larges

⏱ 25 min

Notions mobilisées : La grille de mise en page · TP 12 : Concevoir les interactions et la mise en page responsive d'une application

• Sur la page « Écrans ordinateur », réalisez l'accueil et le menu avec panier en 1 280 px de large, avec la grille de 12 colonnes du TP 12.
• Appliquez vos décisions responsive : nombre de colonnes de cartes, panier révélé à droite, navigation déplacée en haut.
• Réutilisez les mêmes composants: seuls leur disposition et leur largeur changent.

📁 Dans le dossier : la page « Écrans ordinateur ».

1. Partie 5 : prototyper les parcours

⏱ 40 min

Notions mobilisées : Créer un prototype interactif avec Figma · Les animations dans une interface

• Sur la page « Prototype », créez trois flux nommés : « Commander », « Recharger son compte », et le parcours de votre écran au choix.
• Reliez les écrans : déclencheurs, actions et animations avec la durée et la courbe de vos fiches d'animation (TP 12).
• Ajoutez les chemins alternatifs: solde insuffisant (superposition avec « Ajouter 5 € »), plat épuisé.
• Utilisez un composant interactif pour le bouton « + » des cartes et le Smart Animate pour la confirmation. Fixez l'en-tête et les barres.
• Reportez chaque lien dans l'onglet « Prototype » (écran de départ, déclencheur, action, destination, animation).

📁 Dans le dossier : une courte vidéo de chaque flux et l'onglet « Prototype ».

1. Partie 6 : tester le prototype

⏱ 25 min

Notions mobilisées : Créer un prototype interactif avec Figma

• Préparez trois tâches sous forme de situations (sans donner les mots de l'interface), une par flux.
• Faites passer le test à trois personnes extérieures au binôme, sur téléphone (application Figma), sans les aider. L'un observe, l'autre note.
• Dans l'onglet « Test », notez pour chaque participant et chaque tâche : réussite, temps, hésitations, éléments touchés non reliés. Le classeur calcule le taux de réussite et le temps moyen.
• Corrigez les problèmes trouvés et nommez la version « v0.9 · après test ».

📁 Dans le dossier : l'onglet « Test » et la liste des corrections.

1. Partie 7 : organiser une revue commentée

⏱ 25 min

Notions mobilisées : Partager et commenter une maquette avec InVision

• Partagez votre fichier avec un autre binôme (droit de lecture et commentaires), avec un objectif écrit : quels écrans relire, quel type de remarques, pour quand.
• Relisez le fichier de l'autre binôme : au moins six commentaires utiles (où, quoi, pourquoi, piste), épinglés sur les éléments.
• Triez les commentaires reçus dans l'onglet « Revue » : type, priorité, décision (corriger, expliquer, reporter), réponse.
• Corrigez les commentaires prioritaires, répondez à tous, résolvez ceux qui sont traités, et nommez la version « v1.0 · après revue ».

📁 Dans le dossier : l'onglet « Revue » et les captures des commentaires.

1. Partie 8 : préparer la maquette pour les développeurs

⏱ 40 min

Notions mobilisées : Préparer la maquette pour les développeurs

• Annotez les écrans : comportements (défilement, éléments fixes, clic, chargement), responsive, accessibilité (noms accessibles des icônes seules, ordre de lecture), contenus (longueur maximale, troncature, formats des prix et des heures).
• Réglez les exports: icônes et logo en SVG, illustrations en PNG 2× et 3×, avec des noms prévisibles (ic-panier.svg, plat-couscous@2x.png). Exportez-les dans 09-maquette-finale/exports/.
• Marquez les sections validées « Prêt pour le développement » et vérifiez en Dev Mode que les variables apparaissent par leur nom.
• Rédigez la fiche de passage de relais à partir de modeles/fiche-handoff-modele.md: lien du fichier, version, liste des écrans, variables, composants, ressources, points d'attention.
• Passez la maquette à la liste de contrôle de l'onglet « Livraison » : tout doit être « OK ».

📁 Dans le dossier : la fiche de passage de relais, le dossier exports/ et l'onglet « Livraison ».

1. Partie 9 : présenter la maquette

⏱ 20 min

Notions mobilisées : Créer un prototype interactif avec Figma · Préparer la maquette pour les développeurs

• Préparez une présentation de 5 minutes pour le directeur et l'équipe de développement : le design system, une démonstration du flux « Commander » sur téléphone, les résultats du test, deux décisions issues de la revue, et ce qui est prêt pour le développement.
• Enregistrez tout sur GitHub et marquez la version :

git add projet-cantinecampus/09-maquette-finale
git commit -m "Ajoute la maquette finale et le passage de relais du TP 15"
git tag -a maquette-v1 -m "Maquette finale de CantineCampus, version 1"
git push
git push origin maquette-v1

• Ajoutez dans 09-maquette-finale/README.md le lien du fichier Figma (lecture), le lien du prototype et le nom de la version livrée.
• Variante facultative Adobe XD: si votre établissement dispose de Creative Cloud toutes applications, reproduisez l'écran « Menu du jour » dans Adobe XD avec une grille de répétition et un composant à états, puis comparez en cinq lignes avec Figma. Rappel : Adobe XD est en mode maintenance, on ne démarre pas de nouveau projet avec.
• Variantes pour les binômes en avance : ajouter le mode sombre avec les modes de variables ; prototyper le compteur du panier avec les variables du prototype ; refaire un écran dans Penpot et comparer.

📁 Dans le dossier : le support de présentation et le README.

1. Grille d'évaluation (sur 20)

1. Livrables

   • Le lien du dépôt GitHub, avec au moins un commit par partie et l'étiquette maquette-v1.
   • Le lien du fichier Figma (lecture) et du prototype, dans le README.
   • La fiche de passage de relais et le dossier exports/.
   • Le classeur grille-tp15.xlsx complété et le support de présentation.

1. Erreurs fréquentes

1. Pour aller plus loin

   • Ajouter un mode sombre grâce aux modes des variables et vérifier les contrastes.
   • Publier la bibliothèque et l'utiliser dans un second fichier (par exemple l'écran de la borne du restaurant).
   • Comparer le Dev Mode avec le code réel : intégrer l'écran « Panier » en HTML et CSS à partir des variables.

1. Bilan

   • Une maquette finale réunit la charte, les composants, les écrans, le prototype et la documentation.
   • Les variables et les composants garantissent la cohérence et accélèrent les modifications.
   • Le prototype se teste avec des usagers, la maquette se relit en revue commentée.
   • Le passage de relais est réussi quand un développeur peut construire sans deviner.
   • Les outils changent (Adobe XD, InVision) ; la démarche reste.

La maquette finale n'est pas un joli dessin : c'est une promesse précise que l'équipe de développement pourra tenir.