Design
Qu’est-ce qu’un design system, quand en avoir besoin et quel prix prévoir ?
Un design system réunit des fondations, des composants réutilisables et des règles d’usage. Les prix publiés vont d’environ 7 100 € pour 50 à 80 composants (une agence de design) à plus de 88 500 € avec gouvernance (un studio norvégien). Il devient utile quand deux personnes ou plus conçoivent l’interface en même temps. VITON13 : dès 113 $.
Qu’est-ce qu’un design system, et en quoi diffère-t-il d’un UI kit ?
Pour le Nielsen Norman Group, c’est un ensemble de standards qui gère le design à grande échelle, réduit les redondances et crée un langage commun : un dépôt (guide de style, bibliothèque de composants, souvent de patterns) et les personnes qui le font vivre. Un UI kit n’en est que la partie visuelle.
| Niveau | Contenu | Il convient quand |
|---|---|---|
| 1. UI kit avec tokens | Couleurs, typographie, espacements en styles nommés et quelques composants, dans Figma | Un seul designer et un produit qui change chaque semaine |
| 2. Composants dans Figma | Une bibliothèque partagée de 20 à 40 composants documentés, avec variantes et états | Deux designers ou plus travaillent sur le même produit |
| 3. Code et documentation | Les mêmes composants en code (React ou Next.js sur le web), tokens en variables, site de documentation ou Storybook | Les développeurs recréent le même formulaire à plusieurs endroits |
| 4. Gouvernance et versions | Un responsable, des règles pour valider les changements, des numéros de version, un plan de retrait | Plusieurs équipes ou produits en dépendent |
Combien coûte un design system ?
Pas de prix unique : « design system » peut désigner un fichier Figma de styles de couleur comme une bibliothèque de code versionnée portée par une équipe. Les chiffres viennent de quatre structures, chacune avec son marché et son périmètre. Lisez le périmètre d’abord.
| Source et périmètre | Prix | Délai indiqué |
|---|---|---|
| Luft (Norvège), février 2026 : base, 20–30 composants, tokens, Figma et code | 15 000–25 000 $ (≈ 13 300–22 100 €) | 3–4 semaines |
| Luft : production, 50–70 composants, consignes WCAG AA | 40 000–80 000 $ (≈ 35 400–70 800 €) | 6–10 semaines |
| Luft : entreprise, gouvernance, équipe dédiée, plusieurs marques | 100 000–200 000 $ et plus (≈ 88 500–177 000 €) | 12–20 semaines, puis entretien |
| BAMN, mai 2026 : 50–80 composants, un produit | 8 000–15 000 $ (≈ 7 100–13 300 €) | Non indiqué |
| Homem Máquina (Brésil), septembre 2026 : 35–60 composants, Figma, code, gouvernance | 50 000–180 000 R$ (≈ 8 500–30 700 €) | 3–6 mois |
| VITON13 : fondations, bibliothèque de composants, documentation de gouvernance | 113 $ assisté par IA ou 173 $ piloté par un spécialiste | 10–18 jours ouvrés |
La conversion change la devise, pas le taux horaire : demandez le détail des heures. Autentika (Pologne) arrive à environ 255 000 € avec 40 composants à 100–120 heures chacun, tests et documentation compris : un plafond, pas un devis.
Quand une startup a-t-elle besoin d’un design system ?
Pas au début, puis assez vite. Luft relie le choix au stade : jusqu’à trois personnes, un kit open source adapté ; une fondation documentée dès qu’il y a des clients payants et des recrutements. Les sources citent les mêmes moments :
- Un deuxième designer arrive, ou deux personnes conçoivent en même temps : BAMN et Luft y voient le seuil d’une source de vérité.
- Les développeurs demandent quelle marge ou quel bleu utiliser, ou le même formulaire existe en trois versions.
- Les revues de design portent sur les tailles de police plutôt que sur le produit (BAMN).
- Trois designers ou plus, plusieurs zones produit, accessibilité en hausse, intégration pénible (Luft, système de production).
- Test de Homem Máquina : comptez les boutons différents ; au-delà de cinq, vous avez la réponse.
Qu’est-ce qui fait monter le prix d’un design system ?
- Les composants et leurs états. Autentika compte 100 à 120 heures par composant, tests et documentation compris ; un champ de saisie et un tableau ne sont pas le même chantier.
- Les plateformes. Le web seul est un périmètre ; web, iOS et Android en sont un autre (niveau haut de Homem Máquina).
- Les thèmes. Mode sombre ou plusieurs marques : chaque token a plus d’une valeur et chaque composant se vérifie dans chaque thème.
- L’accessibilité. Luft ajoute des consignes WCAG AA au niveau production ; seuls 59 % des systèmes de l’enquête zeroheight incluent des consignes d’accessibilité.
- Le code. Pour le bouton d’Autentika, développeur et designer passent 24 heures chacun ; une bibliothèque Figma seule évite la part du développeur.
- La migration. Reporter les écrans existants sur les composants peut coûter plus que le système ; Luft cite 50 000 $ pour le système et 150 000 $ pour migrer.
Faut-il le construire ou adopter shadcn/ui, le DSFR ou un autre ?
| Option | Ce que c’est | Le piège |
|---|---|---|
| shadcn/ui | Composants accessibles dont vous copiez le code dans votre projet ; gratuit | Sa documentation y voit la façon de bâtir votre bibliothèque, pas une bibliothèque ; selon Homem Máquina, il ne donne ni règles, ni responsable, ni marque |
| Système de design de l’État (DSFR) | Composants web HTML, CSS et JavaScript pour les sites publics | Selon le dépôt officiel, usage par une administration sur demande d’agrément ; interdit hors administration et hors domaine .gouv.fr |
| Un système sur mesure | Fondations, composants et règles adaptés à votre produit et à votre marque | La voie la plus lente et la plus chère ; elle paie quand beaucoup de monde le réutilise |
Chemin courant : adopter un kit, puis consacrer quelques semaines à la marque. Luft l’estime à 5 000–8 000 $ pour deux à trois semaines de designer ; Homem Máquina prévient que des réglages par défaut intacts rendent le produit banal.
Combien coûte l’entretien d’un design system ?
Un système est un produit avec des utilisateurs et se dégrade sans responsable. Homem Máquina réserve chaque année 20 à 30 % de l’investissement initial, soit une demi-personne à trois dans les grandes équipes ; ses chiffres annuels vont de 3 000–12 000 R$ pour une base adaptée à 15 000–45 000 R$ pour un système de produit. Autentika juge l’entretien souvent le poste le plus cher ; le NN/g rappelle qu’il faut former les gens même avec un système existant.
Le point clé est le responsable : 83 % des équipes de l’enquête zeroheight 2026 ont une équipe dédiée, 71 % même sous 100 personnes.
Un design system s’amortit-il, et qui l’a mesuré ?
Traitez chaque chiffre de ROI comme une affirmation signée. Trois types circulent.
- Les modèles. La formule de Smashing (2022), de deux designers de BestSecret Group, suppose environ dix designers et trente développeurs, douze mois de montée en charge à 20 % de leur temps et des gains de 38 % (design) et 31 % (développement) moyennés sur cinq études. Les auteurs admettent que le gain ne se connaît pas d’avance.
- Les hypothèses. Autentika relaie un retour de 7,5 pour 1 pour une entreprise fictive de 1 000 designers et développeurs ; l’amortissement en quatre à six mois de Luft suppose 15 à 25 heures gagnées par semaine à 75–85 $ l’heure.
- Les enquêtes. Dans le rapport zeroheight 2026, seuls 5 % des 147 praticiens mesurent le ROI. Un éditeur d’outils de documentation la mène, et ont répondu ceux qui l’ont voulu.
Votre test : les heures perdues chaque semaine en questions d’interface et reprises, fois un taux horaire moyen, fois 52, face au prix de construction plus un an d’entretien. Si le premier chiffre vous échappe, comptez les boutons.
Quand ne faut-il pas encore créer un design system ?
- Les écrans changent chaque semaine et le produit n’a pas trouvé son marché. Le NN/g note qu’un système demande du temps et des personnes ; Luft conseille alors un kit open source adapté.
- Personne ne peut le porter. Chez zeroheight, le manque de moyens se retrouve dans les trois modèles de travail, le flou de responsabilité dans deux.
- La douleur est imaginaire : peu de variantes de boutons, pas de recrues, pas de seconde plateforme.
- Vous pouvez payer la construction mais pas la migration. Prévoyez les deux ou attendez.
Que coûteraient un design system et ses écrans chez VITON13 ?
On commande souvent un système avec les écrans qu’il sert. Les totaux additionnent les prix de départ de VITON13 dans les deux modes de production.
Calculateur de coût
Composez votre design system
Cochez ce qu’il vous faut ; les totaux se mettent à jour.
Votre estimation
- Assisté par IA
- dès 113 $
- Piloté par un spécialiste
- dès 173 $
- Délai
- 10–18 jours ouvrés
les étapes peuvent se chevaucher ; le devis écrit fixe les dates
Recevoir un devis écrit en 1 jour ouvréPrix de départ des forfaits VITON13 ; le devis écrit confirme périmètre et prix après le brief.
Délais : design system 10–18 jours ouvrés, forfait SaaS 15–30 jours ouvrés, forfait dashboard 6–10 jours ouvrés.
Comment VITON13 construit un design system
Nous commençons par rechercher ce que votre équipe livre : écrans, fichiers Figma, éléments en plusieurs versions. Nous fixons la direction visuelle et les fondations, construisons la bibliothèque de composants et rédigeons la documentation de gouvernance (comment le système s’utilise et se modifie), puis nous remettons le tout à vos designers et développeurs. Nombre de composants et plateformes sont inscrits au devis avant le travail. Assisté par IA : l’IA accélère la recherche et les premiers brouillons, et un designer vérifie chaque décision. Piloté par un spécialiste : un designer mène et l’IA assiste, d’où le second prix, plus élevé.
Développement de design system
- Prix
- 113 $ assisté par IA ou 173 $ piloté par un spécialiste
- Délai
- 10–18 jours ouvrés
Design de produit SaaS
- Prix
- 213 $ assisté par IA ou 313 $ piloté par un spécialiste
- Délai
- 15–30 jours ouvrés
Design d'interface de tableau de bord
- Prix
- 93 $ assisté par IA ou 113 $ piloté par un spécialiste
- Délai
- 6–10 jours ouvrés
Assisté par IA : l’IA prépare des brouillons dans des étapes définies, une personne dirige et vérifie chaque résultat. Piloté par un spécialiste : un spécialiste fait le travail, l’IA l’assiste.
Ce qui est inclus
- Fondations du système de design
- Une bibliothèque de composants
- Documentation de gouvernance
- Remise à vos designers et développeurs
- Délai : 10–18 jours ouvrés après validation du brief
Non inclus
- Frais de tiers : licences de polices, licences Figma, plateformes de documentation, hébergement
- Travail d’ingénierie dans votre code, sauf si le périmètre écrit le nomme
- Conseil juridique, ou déclaration que votre produit respecte une loi sur l’accessibilité
- L’entretien quotidien du système après la remise
Révisions: 2 tours de révisions sur les livrables
Recevoir un devis sous 1 jour ouvréDevis écrit sous 1 jour ouvré
Exemple
PILOTEPilote en cours
Pas encore de cas publié sur un design system
VITON13 n’a pas encore publié de design system réalisé pour un client : ce guide ne montre ni écrans avant-après ni heures gagnées. Les premiers systèmes se font dans le programme pilote et ne seront montrés qu’avec l’accord du client.
Ce que cela ne prouve pas
- Les fourchettes de prix viennent des structures citées dans les sources et les seuils de leurs propres conseils ; rien de cela ne mesure le travail de VITON13.
Questions et réponses
Quelle différence entre un design system, un UI kit et une bibliothèque de composants ?
Le NN/g décrit un design system comme un dépôt (guide de style, bibliothèque de composants, souvent de patterns) plus les personnes qui le gèrent. L’UI kit en est la partie visuelle : couleurs, typographie, icônes et composants. Sans code, règles d’usage et responsable, c’est un kit, pas un système.
Combien de temps faut-il pour créer un design system ?
Luft donne trois à quatre semaines pour une base de 20 à 30 composants et six à dix pour un système de production ; Homem Máquina, trois à six mois pour un système de produit. VITON13 livre son forfait en 10–18 jours ouvrés.
Peut-on commencer avec shadcn/ui et ajouter un design system plus tard ?
Oui, c’est le conseil habituel pour une petite équipe. Gardez couleurs, espacements et rayons en variables dès le premier jour et notez chaque changement fait à un composant. Quand plusieurs personnes ont besoin des mêmes règles, documentez-les : c’est ce qui transforme une bibliothèque en système.
Une entreprise privée peut-elle utiliser le design system de l’État ?
D’après le dépôt officiel du DSFR, son usage par les administrations est soumis à une demande d’agrément, et il ne doit pas être employé par des entités extérieures à l’administration ni hors d’un domaine en .gouv.fr. Une entreprise privée doit donc choisir un autre système. Pas un avis juridique : vérifiez les modalités d’utilisation.
Que demander à un prestataire avant d’accepter un devis ?
Combien de composants et d’états ; quelles plateformes et quels thèmes ; Figma seul ou aussi code ; niveau d’accessibilité ; qui est responsable après la remise ; migration des écrans existants comprise ou non. Deux devis ne se comparent que si ces réponses coïncident.
L’IA rend-elle un design system moins cher à construire ?
En partie. Dans l’enquête zeroheight 2026, 46 % des équipes expérimentaient l’IA dans leur système et 10 % l’avaient intégrée à leur processus ; documentation et code sont les usages les plus cités. VITON13 affiche les deux modes, assisté par IA (prix bas) et piloté par un spécialiste (prix haut), et un designer vérifie les décisions dans les deux.
Sources
- GouvernementFR, Système de Design de l’État (DSFR), README —
- Luft, Do startups need a design system? (anglais) —
- BAMN, Design systems for growing companies (anglais) —
- Homem Máquina, Quanto custa criar um design system (portugais) —
- Autentika, How much is a design system? (anglais) —
- Smashing Magazine, The ROI of a design system (anglais) —
- zeroheight, Design Systems Report 2026 (anglais) —
- Nielsen Norman Group, Design Systems 101 (anglais) —
- shadcn/ui, Introduction (anglais) —
- Banque centrale européenne, taux de change de référence de l’euro —