HTML dans les systèmes de conception

Un système de conception est une bibliothèque partagée de composants, de jetons, de modèles et de recommandations utilisée dans les produits d’une organisation. La partie HTML du système encapsule les conventions de balisage afin que chaque produit produise des structures cohérentes pour les boutons, les fenêtres modales, les formulaires et les cartes.

Les jetons sont des valeurs atomiques de conception (couleur : blue-500, espacement : 16px). Les composants sont des unités HTML+CSS+JS réutilisables (bouton, fenêtre modale, TextField). Les modèles sont des compositions de niveau supérieur (formulaire de connexion, carte de contenu avec avatar). La structure HTML est fixe au niveau du composant ; les modèles combinent les composants.

Les composants intègrent les bonnes pratiques : chaque bouton utilise l’élément <button> (et non une div) avec l’attribut type approprié. Chaque fenêtre modale capture le focus, prend en charge la touche Échap et possède les rôles ARIA appropriés. Adopter des composants évite de réimplémenter l’accessibilité pour chaque fonctionnalité du produit.

Storybook affiche chaque composant de manière isolée avec différentes propriétés et variantes. Les concepteurs et les responsables produit voient les composants disponibles sans lire le code ; les développeurs voient des exemples d’utilisation sans chercher dans le code source. C’est la référence de fait pour la documentation des systèmes de conception.

Traitez le système de conception comme un paquet publié selon le versionnage sémantique. Les modifications HTML/CSS incompatibles (renommer une classe CSS dont dépendent les utilisateurs, supprimer un emplacement de composant) font passer à la version majeure suivante. Les projets utilisateurs se mettent à jour intentionnellement, selon leur propre calendrier, et non par surprise.

Les propriétés, les emplacements et les parties exposées d’un composant constituent son interface publique. Une fois publiés auprès des projets utilisateurs, considérez ces éléments comme coûteux à modifier. Dépréciez-les progressivement : ajoutez la nouvelle interface à côté de l’ancienne, consignez des avertissements lors de l’utilisation de l’ancienne, puis supprimez-la seulement après une période mesurée.

Les jetons permettent la thématisation : remplacez la table de correspondance des couleurs, et chaque composant adopte la nouvelle palette. La marque blanche (différentes marques partageant des composants avec des visuels différents) devient triviale lorsque les jetons pilotent tout et que les composants font référence aux jetons plutôt qu’à des valeurs définies en dur.

Pour les organisations qui utilisent plusieurs cadres logiciels (React, Vue, Angular), les composants web offrent une seule implémentation qui fonctionne partout. Concevez-les avec Lit, FAST ou du JavaScript natif ; utilisez-les de la même manière dans n’importe quel cadre logiciel. La structure HTML est le contrat, pas le cadre logiciel.

Les systèmes de conception intègrent l’accessibilité une seule fois dans chaque composant : gestion du clavier, rôles ARIA, gestion du focus et contraste des couleurs. Les équipes produit qui adoptent le système bénéficient de l’accessibilité au lieu de devoir construire chaque fonctionnalité à partir de zéro, ce qui réduit de façon mesurable les problèmes d’accessibilité dans toute l’entreprise.

Suivez les produits qui utilisent chaque version du système de conception. Des outils comme le catalogue de composants de Backstage, des robots Slack personnalisés qui surveillent package.json ou de simples tableaux de bord internes révèlent où la dernière version n’a pas encore été intégrée. Les indicateurs d’adoption justifient la poursuite de l’investissement.

Décidez qui peut ajouter des composants : uniquement une équipe centrale de conception ? Des contributions fédérées des équipes produit ? Chaque modèle comporte des compromis. Les équipes centrales livrent plus lentement, mais maintiennent la qualité ; les équipes fédérées avancent rapidement, mais risquent la fragmentation. Choisissez consciemment en fonction de la taille de l’organisation.

Les systèmes de conception sont des produits vivants. Ajoutez des composants lorsque de nouveaux modèles apparaissent dans les produits, dépréciez ceux qui ne conviennent plus et remaniez le système lorsque des décisions fondamentales doivent évoluer. Traitez-le comme un logiciel doté d’une feuille de route, et non comme un artefact terminé.

Pourquoi les jetons de conception (comme couleur : blue-500, espacement : 16px) sont-ils préférés aux valeurs définies en dur dans les composants ?

Les systèmes de conception regroupent des jetons (valeurs atomiques), des composants (unités HTML réutilisables) et des modèles (compositions de niveau supérieur) dans une bibliothèque versionnée et partagée entre les produits. Utilisez Storybook pour la documentation, les composants web pour une utilisation avec plusieurs cadres logiciels et le versionnage sémantique pour la stabilité. Intégrez l’accessibilité dans chaque composant, suivez l’adoption et faites évoluer le système comme un produit vivant.