03 · Projets
Client confidentiel
Streaming – Plateforme par abonnement
La demande
Une plateforme de streaming par abonnement refondait entièrement son produit, sans langage visuel arrêté ni bibliothèque. La commande portait sur les maquettes haute fidélité. Mission de sept mois, en tant que seul designer, sous accord de confidentialité.
La solution
Dès les premiers écrans, j'ai proposé de construire un design system en même temps que les maquettes : primitives, couche sémantique, composants et patterns, avec les contraintes WCAG portées par les tokens. J'ai livré un kit Figma, des guidelines en PDF et un skill Claude qui relit les interfaces développées et signale les écarts aux guidelines, pour que le système tienne après la passation.
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. La même logique vaut au-delà de la couleur : typographie, espacements, rayons, épaisseurs de bordure, durées d'animation et points de rupture sont eux aussi des variables.
bg/base pointe sur color/ink/900, border/accent sur color/fuchsia/500. Changer le fond du produit revient à déplacer ce lien, pas à ouvrir les écrans.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.
Du token au composant
Les composants sont construits en auto layout, avec variants et component properties, et remplis uniquement par des tokens sémantiques. Quand on sélectionne une modale et qu'on lit bg/overlay dans son remplissage plutôt qu'un code couleur, c'est le signe que le système tient : aucune valeur n'est posée en dur dans un composant.
bg/overlay, un token et pas une couleur.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.
