Aller au contenu principal

Outils et processus

Figma

Tout le travail de design se fait dans Figma. Nous maintenons une source unique de vérité avec des pages organisées : Composants, Patterns, Flux et Archive. Les développeurs ont un accès en lecture à tous les fichiers.

Notre bibliothèque Figma inclut tous les composants de production avec des variantes, auto-layout et des contraintes responsive. Les composants correspondent 1:1 à notre bibliothèque de composants React.

Processus de design

Comment nous abordons une nouvelle fonctionnalité ou page :

  • Comprendre : Quel problème résolvons-nous ? Pour qui ? À quoi ressemble le succès ?
  • Explorer : Esquisser plusieurs approches. Ne pas s'engager sur la première idée. Montrer les options.
  • Affiner : Choisir une direction et peaufiner. Considérer tous les états et cas limites.
  • Réviser : Obtenir des retours du design et de l'ingénierie. Itérer en fonction des commentaires.
  • Livrer : Travailler avec l'ingénierie sur l'implémentation. Contrôle qualité du résultat final.

Révision de design

Les changements de design significatifs sont examinés avant implémentation :

  • Partager le problème que vous résolvez, pas seulement la solution
  • Montrer le contexte — comment cela s'intègre-t-il dans l'expérience globale ?
  • Inclure les cas limites : états de chargement, vides, d'erreur
  • Obtenir des retours tôt quand les changements sont peu coûteux

Passation design-développement

Nous ne jetons pas les designs par-dessus le mur. Les designers et développeurs travaillent ensemble dès le début. La passation comprend :

  • Lien Figma avec mode d'inspection activé
  • Spécifications d'interaction pour les animations
  • Notes sur le comportement responsive
  • Exigences d'accessibilité
  • Texte et microcopy finalisés
  • Exports d'assets si nécessaire

Assurance qualité

Le contrôle qualité du design se fait avant et après le lancement :

  • Vérifier les fonctionnalités implémentées par rapport aux designs
  • Tester le comportement responsive sur de vrais appareils
  • Vérifier que les animations et transitions semblent correctes
  • Vérifier l'accessibilité avec les lecteurs d'écran
  • Documenter les écarts intentionnels