Un design system de poche pour les petites équipes
Pas besoin de cent composants pour qu’un design system soit utile. Cinq composants, un fichier de tokens et beaucoup de refus suffisent souvent.
Un design system n’a pas besoin de cent composants ni d’une équipe dédiée pour être utile. Sur la plupart de mes projets, une petite base bien tenue fait plus de travail qu’une grande bibliothèque que personne n’ouvre.
J’appelle ça un design system de poche : assez petit pour tenir dans la tête, assez solide pour que chaque nouvel écran parte du bon pied.
Commencer par ce qui revient
Avant de créer quoi que ce soit, je relis les maquettes et je note ce qui revient au moins trois fois. C’est presque toujours la même liste : un bouton, un champ, une carte, une étiquette, une modale. Le reste peut attendre.
- composants pour démarrer
- 5
- répétitions avant d’abstraire
- 3
- fichier de tokens
- 1
Une seule source de vérité
Les couleurs, les espacements et les rayons vivent dans un seul fichier de tokens. Figma (nouvel onglet) les lit en variables, le code les lit en custom properties. Quand une valeur change, elle change partout, et personne n’a besoin de « mettre à jour la maquette ».
Documenter là où on travaille
La documentation la plus lue est celle qu’on croise sans la chercher. Je la mets directement dans les composants Figma (descriptions, propriétés nommées) et dans le code (types et commentaires courts), plutôt que dans un site à part.
| Où | Ce que j’y écris |
|---|---|
| Figma (nouvel onglet) | À quoi sert le composant, quand ne pas l’utiliser |
| Code | Les props, leurs valeurs, un exemple d’usage |
| Ticket | Pourquoi une variante a été ajoutée |
Savoir dire non
Un design system grossit par petites exceptions : une couleur « juste pour cette page », un bouton « un peu plus grand ». Chaque exception est raisonnable seule ; ensemble, elles rendent le système illisible.
La vraie maintenance d’un design system, c’est surtout de refuser des variantes.
Antoine PineyDirecteur artistique & développeur créatifMa checklist
- Tokens partagés entre Figma (nouvel onglet) et le code
- Cinq composants de base, tous les états dessinés
- Documentation dans les outils, pas à côté
- Revue des exceptions une fois par mois
Un design system de poche ne fera jamais la une d’un blog d’équipe produit. Mais il tient dans le temps, et c’est tout ce qu’on lui demande.
