Le constat
La cohérence se perd une décision après l’autre.
Une interface ne devient pas incohérente d’un seul coup. Une nouvelle page introduit un espacement différent, un formulaire gère autrement ses erreurs, puis un bouton réagit différemment au clavier. À mesure que le produit grandit, chaque écran ajoute ses propres décisions et rend les suivants plus coûteux à concevoir et à maintenir.
J’ai commencé Udixio UI en 2024 pour réunir ces décisions dans une même bibliothèque. L’objectif n’était pas de donner la même apparence à tous les produits, mais de leur fournir des composants cohérents qu’ils puissent adapter à leur identité.
Le catalogue
20 composants couvrent les interactions essentielles.
La bibliothèque compte aujourd’hui 20 composants publiés et documentés. Ils couvrent les actions, la saisie, la navigation, la présentation de contenu et le retour d’état.
- Actions : Button, IconButton, Fab et FabMenu
- Saisie : TextField, Checkbox, Switch, Slider et DatePicker
- Navigation : Menu, NavigationRail et Tabs
- Contenu et retours : Card, Carousel, SideSheet, Snackbar, Tooltip et ProgressIndicator
Chaque composant possède une page dédiée avec son usage, ses variantes et des exemples. Le catalogue complet est consultable dans la documentation publique d’Udixio UI.
L’architecture
React et Angular partagent les mêmes règles, pas du code dupliqué.
Material 3 fournit le référentiel de conception ; Udixio UI en propose une implémentation TypeScript. Le même catalogue est disponible pour React et Angular afin qu’un produit retrouve les mêmes propriétés, les mêmes états et les mêmes comportements quel que soit son framework.
Le travail ne s’arrête pas au rendu visuel. Pour chaque composant, je dois aussi définir son API, les interactions au clavier et au toucher, la gestion du focus, les états désactivés ou chargés, puis maintenir leur documentation et leurs tests.
La personnalisation
Le thème change l’identité sans réécrire les composants.
Une bibliothèque commune ne doit pas obliger plusieurs produits à se ressembler. Udixio UI génère donc un thème Material 3 à partir d’une couleur principale, puis applique les rôles de couleur, la typographie et les états d’interaction à l’ensemble des composants.
Cette séparation permet de faire évoluer l’identité visuelle sans reprendre chaque bouton, champ ou menu. Les comportements restent stables tandis que le thème porte la personnalité du produit.
La validation
La bibliothèque évolue au contact de produits réels.
Je conçois l’architecture, les API, les composants React et Angular, le système de thèmes et la documentation. Cette responsabilité de bout en bout me permet de corriger une règle commune plutôt que ses conséquences dans chaque application.
Les besoins rencontrés ici nourrissent la bibliothèque ; les corrections apportées à la bibliothèque bénéficient ensuite à tous les écrans qui l’utilisent. Ce cycle est ce qui transforme progressivement une collection de composants en bibliothèque maintenable.