FigmaPROTOTYPE PARCOURS E-COMMERCE
Prérequis
- Parcours critiques listés (découverte → achat, compte invité, retour stock)
- Composants e-commerce de base (CardProduct, CartLine, CheckoutStep)
- Convention de nommage des frames par étape du tunnel
- Template Notion ou doc pour compte-rendu de tests
Coder un tunnel e-commerce avant validation des parcours expose le projet aux retours tardifs sur la friction, le copy et les enchaînements. Un prototype Figma interactif permet de tester le happy path et les cas d'erreur avec le client — avant Shopify, headless ou intégration custom. Vous allez structurer les flows, les interactions et la traçabilité des décisions.
Cartographier les flows e-commerce
Listez les parcours : happy path achat, abandon panier, erreur stock, paiement échoué, création compte optionnelle. Chaque flow devient une section Figma avec un frame de départ nommé.
Réutilisez les composants du design system (voir figma-composants-design-system) : même CardProduct en PLP et en cross-sell checkout.
Définissez les points de décision : invité vs connecté, retrait magasin vs livraison. Chaque branche reçoit des interactions prototype explicites.
Configurer interactions et micro-états
Liez les hotspots : clic « Ajouter au panier » → overlay panier ou page panier selon le pattern retenu. Transitions cohérentes (smart animate, dissolve).
Prototypage des overlays : mini-cart, modal taille, lightbox image. Précisez le comportement scroll et fermeture (clic extérieur, ESC) en annotation.
Ajoutez les états vides : panier vide, recherche sans résultat, liste de souhaits vide. Ils conditionnent copy et CTA de repli.
Tester et valider avant développement
Publiez un lien prototype Figma en mode présentation. Préparez 3–5 tâches scénarisées pour tests modérés ou envoi async au client.
Consignez les observations dans Notion : friction, libellés confus, étapes superflues. Priorisez les corrections sur le prototype — pas en tickets dev prématurés.
Après validation client signée, passez le statut des frames en « Ready for dev » et liez au handoff Dev Mode.
Erreurs fréquentes
Prototype uniquement desktop alors que la majorité du trafic e-commerce est mobile.
Oublier le retour arrière checkout (modifier adresse, changer quantité).
Interactions vers des frames hors périmètre (lien mort) : casse la crédibilité en démo client.
Lancer l'intégration sans validation des états erreur paiement.
Ce qu'il faut retenir
Happy path + erreurs prototypés avant code.
Composants réutilisés ; pas de frames jetables.
Tests utilisateur ou client tracés dans Notion.
Validation figée avant sprint d'intégration e-commerce.
FAQ
Suffisant sur le parcours et les interactions pour la V1. Le polish visuel peut itérer en parallèle une fois le flux validé.
Achat invité complet + un cas d'erreur stock ou paiement. Étendez selon la complexité métier (B2B, devis, configurateur).
Figma pour les décisions rapides en amont. Un staging partiel intervient après validation flux, pour les tests de perf et paiement réel.
Cursor