La règle empirique dans les équipes design : un design system sans documentation est utilisé uniquement par les personnes qui l’ont créé. Les développeurs ne savent pas quels composants existent, les nouveaux designers ne comprennent pas les conventions, et les règles d’usage ne sont documentées nulle part. Zeroheight résout ce problème en permettant de créer des sites de documentation en quelques heures, sans compétences en développement web.
5 000 équipes utilisent Zeroheight en 2026, des startups aux grandes organisations comme Spotify, Pinterest et Deliveroo. L’outil est devenu la référence du secteur pour la documentation de design systems parce qu’il combine facilité de création pour les designers et intégration avec les outils de développement.
Ce que Zeroheight permet de construire
Zeroheight génère un site web statique (hébergé sur leur infrastructure ou exportable) qui sert de référence centrale pour le design system. Les sections types d’un design system documenté :
- Fondations : couleurs, typographie, espacements, icônes, grilles. Affichées dynamiquement depuis Figma ou les tokens.
- Composants : pour chaque composant, une page avec la preview visuelle (depuis Figma ou Storybook), les variantes, les règles d’usage (do/don’t), et les spécifications pour les développeurs.
- Patterns : workflows et patterns d’interface récurrents (formulaires de connexion, navigation, onboarding) documentés avec des exemples et des recommandations contextuelles.
- Principes : les principes de design qui guident les décisions, le ton de voix, l’accessibilité.
Synchronisation avec Figma et le code
La fonctionnalité la plus importante de Zeroheight est la synchronisation bidirectionnelle avec Figma. Quand un composant Figma est mis à jour, la documentation dans Zeroheight peut être mise à jour en quelques clics, sans copier-coller les images manuellement.
Les intégrations côté code :
- Storybook : intégrer des composants Storybook directement dans les pages Zeroheight. Les développeurs voient le composant interactif dans le code en regard de la documentation design.
- GitHub : lier des repositories pour référencer les composants et faciliter les contributions des développeurs à la documentation.
- Design tokens : afficher les valeurs des tokens (couleurs, espacement, typographie) directement depuis les fichiers de tokens JSON ou depuis Token Studio.
La vraie valeur de Zeroheight n’est pas la beauté du site de documentation. C’est l’élimination du décalage entre les maquettes Figma et la référence que les développeurs consultent. Quand les deux sont synchronisés, les questions « c’est quelle couleur exactement ? » cessent.
Tarifs et alternatives
| Plan | Prix | Pour qui |
|---|---|---|
| Starter | Gratuit (1 styleguide, 3 collaborateurs) | Petites équipes, premiers pas |
| Growth | 149$/mois | Équipes design de 5-20 personnes |
| Enterprise | Sur devis | Grandes organisations |
Les alternatives à Zeroheight : Supernova (concurrent direct, plus cher, meilleure intégration token), Storybook seul (pour les équipes très techniques, sans interface design), Notion (beaucoup plus simple mais sans synchronisation Figma). Zeroheight occupe le meilleur rapport entre accessibilité pour les designers et profondeur technique.
Démarrer avec Zeroheight
La résistance la plus fréquente dans les équipes : « on n’a pas le temps de documenter ». Le plan de démarrage le plus efficace pour éviter ce blocage :
- Commencer par les 10 composants les plus utilisés, pas par tout le design system
- Une page de fondations (couleurs, typographie) synchronisée avec Figma en 2 heures
- Un template de page composant réutilisable pour la cohérence (preview, variantes, do/don’t, spec)
- Partager le lien Zeroheight lors de chaque livraison Figma pour habituer les développeurs à le consulter
La documentation s’améliore en continu, pas en une fois. Le premier site Zeroheight incomplet mais accessible vaut mieux que la documentation parfaite qui n’existe que dans les têtes de l’équipe.
