UI Kit

Un UI kit (kit d’interface) est une bibliothèque de composants graphiques prêts à l’emploi (boutons, champs de formulaire, cartes, menus, icônes) que l’on assemble pour dessiner des écrans plus vite et avec une apparence cohérente. C’est souvent la première brique concrète d’un design system, avant sa formalisation complète.

Ce que contient un UI kit

• Les fondations : palette de couleurs, typographies, échelle d’espacements, rayons de bordure, ombres.
• Les composants de base : boutons, champs de saisie, cases à cocher, listes déroulantes, onglets, fenêtres modales, cartes, barres de navigation, alertes.
• Les états : chaque composant existe au repos, au survol, au focus clavier, actif, désactivé, en erreur. Un kit qui n’en montre qu’un seul laisse l’équipe improviser le reste.
• Les variantes : tailles, hiérarchie (bouton principal, secondaire, discret), version claire et sombre.
• Les icônes : un jeu cohérent en épaisseur de trait et en style.
• Des modèles d’écrans : certains kits proposent des gabarits de pages assemblées (connexion, tableau de bord, pricing) pour gagner du temps au démarrage.

Gratuit, payant ou sur mesure

Trois sources, trois usages :

• Les kits gratuits circulent dans la communauté de Figma et sur des sites de ressources. Les éditeurs de plateformes, comme Google avec Material Design ou Apple pour ses systèmes, publient aussi leurs propres kits pour dessiner des applications natives.
• Les kits payants se vendent sur des places de marché spécialisées. Ils sont plus complets et plus soignés, mais restent génériques.
• Le kit sur mesure est construit pour une marque et un produit précis. C’est le seul qui reprend vraiment l’identité de l’entreprise.

Un kit du commerce est un excellent point de départ pour un prototype. Il devient un problème quand on le garde tel quel : le produit finit par ressembler à tous les autres.

Comment choisir un kit

• Couverture des états. Vérifiez que focus, erreur et désactivé sont dessinés.
• Accessibilité. Contrastes suffisants, taille des zones cliquables, focus visible : réparer cela après coup coûte plus cher que de bien choisir au départ.
• Licence. Usage commercial autorisé ou non, nombre de projets, redistribution.
• Construction du fichier. Composants avec variantes, styles et variables : un kit fait d’images aplaties ne se personnalise pas.
• Compatibilité avec la production. Si le site se construit dans Webflow, mieux vaut un kit dont la logique (grille, espacements) se traduit facilement en classes et en composants.

Construire son propre UI kit

1. Faire l’inventaire de l’existant. Capturez tous les boutons, champs et cartes du site actuel : on trouve souvent bien plus de versions du même bouton qu’on ne l’imaginait.
2. Poser les fondations. Couleurs, typographies, espacements, d’abord. Les composants viennent ensuite.
3. Commencer par les composants les plus utilisés. Cinq composants bien faits valent mieux que trente à moitié finis.
4. Nommer clairement. Une convention de noms lisible (« bouton / principal / survol ») évite les doublons.
5. Tester sur deux ou trois écrans réels avant d’aller plus loin : c’est là qu’on voit ce qui manque.
6. Versionner. Une modification du kit doit se propager à tous les écrans qui l’utilisent.

Beaucoup d’équipes organisent leur kit selon la logique de l’atomic design : des éléments simples qui s’assemblent en composants, puis en blocs de page.

Un exemple : le bouton

Un simple bouton montre pourquoi un kit demande de la rigueur. Imaginez trois hiérarchies (principal, secondaire, discret), trois tailles et cinq états (repos, survol, focus, désactivé, chargement) : cela fait déjà quarante-cinq combinaisons à dessiner et à maintenir. Dans un fichier bien construit, ces combinaisons sont des variantes d’un seul composant. Modifier le rayon des angles ou la couleur du principal se fait en un endroit, et se répercute partout.

Quand un UI kit suffit

Pour un produit unique, une petite équipe ou un site vitrine, un UI kit bien tenu couvre tous les besoins. Il faut songer à un design system quand plusieurs équipes ou plusieurs produits l’utilisent et qu’il faut arbitrer, documenter et versionner. D’ici là, un kit est plus léger, plus rapide à mettre en place et plus facile à faire adopter.

Du kit au code

Le kit vit côté design. Pour qu’il serve réellement, chaque composant dessiné doit avoir son équivalent construit : un composant de site, des classes, des variables de couleur et de typographie qui reprennent les mêmes valeurs. Plus la correspondance est exacte, moins il y a d’écart entre la maquette et la page en ligne. Sur Webflow, c’est le rôle des components et des variables, que nous détaillons dans notre article sur la structuration d’un design system dans Figma pour accélérer le développement Webflow.

Les erreurs fréquentes

• Prendre un kit du commerce sans l’adapter à la marque.
• Oublier les états d’erreur et de focus, qui sont pourtant ceux que les utilisateurs rencontrent le plus.
• Multiplier les variantes jusqu’à ce que personne ne sache laquelle choisir.
• Laisser le kit vieillir : dès qu’un écran contourne le kit, il cesse d’être la référence.

Côté Mazette.co, les kits d’interface se dessinent avec les design systems et le guide typographique, au sein de l’offre UX/UI et Product design.