07 — Projets
Client confidentiel
Un design system livré avec son contrôle qualité
Refonte complète d'une plateforme de streaming par abonnement : maquettes haute fidélité, design system de zéro, et passation au développeur web. Sept mois, seul designer sur le projet.
La mission
Le client refondait sa plateforme et n'avait ni langage visuel arrêté, ni bibliothèque. La commande portait sur les maquettes ; le design system s'est imposé dès les premiers écrans, parce que reprendre chaque bouton à la main sur un produit de cette taille se paie plus tard, au moment où le développeur pose la question « et dans ce cas-là, ça donne quoi ? ».
Deux niveaux de tokens, pas un
Les valeurs brutes — couleurs, espacements, rayons — vivent dans une collection de primitives. Une seconde collection, sémantique, nomme les intentions : surface, bordure, texte, état. Les composants ne consultent que cette seconde couche. C'est ce qui permet de changer une couleur de marque sans ouvrir un seul composant, et de discuter avec le client en termes de rôles plutôt que de codes hexadécimaux.
Un token sémantique donne un nom à une intention. C'est ce nom, et non la couleur, que le développeur retrouve dans le code.
Ce qui a été livré
- un kit Figma — les tokens sous forme de variables, les composants et les patterns publiés en bibliothèque d'assets ;
- des guidelines en PDF — anatomie, états, règles d'usage, contraintes d'accessibilité ;
- un skill Claude de contrôle — il relit les interfaces développées et signale les écarts aux guidelines.
Le contrôle qualité fait partie de la livraison
Un design system se dégrade au moment où il quitte Figma : le développeur interprète, les cas non documentés s'inventent, et six mois plus tard le produit ne ressemble plus à la bibliothèque. Le troisième livrable répond à ça. Le skill relit les interfaces produites, les confronte aux guidelines et renvoie les écarts — le contrôle devient une étape du développement au lieu d'une revue de design qu'on repousse.
Accessibilité
Les contraintes WCAG sont portées par les tokens sémantiques : un couple texte/surface est validé une fois, au niveau du système, et tout composant qui l'emploie hérite du contraste. Vérifier un écran revient alors à vérifier qu'il n'a pas contourné le système.