Un socle commun aux marques du groupe SNCF : une seule bibliothèque Figma de composants, un seul jeu de tokens sémantiques avec un mode par marque, et une documentation qui relie chaque composant à son web component WCS dans le code.
SNCF Groupe, SNCF Voyageurs, SNCF Réseau, SNCF Holding : chaque marque a ses couleurs et son identité, mais leurs équipes construisent les mêmes types de produits : applications métier, formulaires, tableaux de bord, headers, recherche.
L’idée : construire ces composants une seule fois, dans une bibliothèque unique, et laisser chaque marque y appliquer son propre style.
Rendre une bibliothèque assez souple pour toutes les marques, sans la rendre plus difficile à utiliser pour les designers et développeurs qui s’en servent tous les jours.
Les valeurs sont organisées en trois niveaux de variables : les primitives (palette, tailles et graisses brutes), les tokens sémantiques (à quoi sert une valeur) et les tokens de composants. Chaque marque est un mode du niveau sémantique : passer de SNCF Groupe à SNCF Voyageurs change les valeurs, sans jamais toucher aux composants.
Chaque composant a sa page de documentation : à quoi il sert, sa structure, ses règles d’usage, et un statut qui indique s’il est déjà disponible dans WCS, la bibliothèque de web components du groupe. Toutes les variantes et tous les états sont dessinés : tailles, focus, rempli, erreur, chargement, effacement de la saisie.
En plus des composants, les librairies de logos et de pictogrammes sont partagées avec toutes les équipes : une seule recherche dans Figma donne accès à tout ce dont une marque a besoin.
