Sans système de conception, chaque concepteur et développeur prend lui-même de petites décisions : un bleu légèrement différent, un nouveau style de bouton, une autre valeur d'espacement. Après un an, le produit compte des dizaines de quasi-doublons. Un système de conception remplace ces décisions répétées par des décisions partagées.
La plupart des systèmes de conception comportent trois couches. Les jetons de conception sont des valeurs nommées, telles que color.primary, space.4 ou motion.duration.short, qui stockent les décisions brutes. Les composants, tels que les boutons, les entrées, les cartes et les boîtes de dialogue, sont construits à partir de ces jetons et incluent chaque état. Les directives expliquent comment utiliser chaque composant, comment rédiger des étiquettes et des messages et quelles règles d'accessibilité s'appliquent.
Un système de conception réside à deux endroits : dans l'outil de conception, en tant que bibliothèque de composants, et dans le code, en tant que package installé par les développeurs. Garder ces deux éléments synchronisés est la partie la plus difficile. Lorsque le bouton codé ne correspond plus à celui conçu, les gens cessent de faire confiance au système.
Le mouvement fait également partie du système. Les durées, les courbes d'assouplissement et les réglages du ressort peuvent être des jetons, et les composants interactifs nécessitent un comportement défini pour le survol, la pression, le chargement et les transitions. ExodeUI, que nous créons, stocke ce comportement dans un fichier ouvert avec les états et la physique du ressort, de sorte que le même composant joue dans React, Vue, SwiftUI, Flutter et d'autres frameworks.
Des exemples publics bien connus incluent le Material Design de Google, les Human Interface Guidelines d'Apple, Carbon d'IBM et Polaris de Shopify. Leur lecture est un bon moyen de voir comment s’organise un système mature.