Créer un design system quand on est seul

Quand on parle de design systems, on pense immédiatement à des équipes massives : des dizaines de designers, des ingénieurs dédiés, des mois de travail, une documentation exhaustive. On pense à Material Design chez Google, au Carbon Design System chez IBM, ou au Primer chez GitHub. Des projets titanesques.

Et pourtant, les freelances et les petites équipes ont autant, sinon plus, besoin de structure dans leur processus de design. La différence, c'est qu'ils n'ont pas le luxe d'y consacrer des mois. Il faut une approche pragmatique, minimaliste et évolutive.

Pourquoi vous avez besoin d'un design system

Même en solo, un design system vous fait gagner un temps considérable. Voici pourquoi :

Cohérence automatique : plus besoin de se demander "quel bleu j'ai utilisé sur la page précédente ?" Les décisions sont prises une fois et appliquées partout.
Vitesse d'exécution : quand les composants de base existent déjà, concevoir une nouvelle page devient un exercice d'assemblage plutôt que de création.
Scalabilité : quand un client demande "ajoutez une page de FAQ", vous ne partez pas de zéro.
Professionnalisme : un design system témoigne d'une approche méthodique qui inspire confiance aux clients.

L'approche "minimum viable design system"

Oubliez la perfection. Votre premier design system ne sera pas complet, et c'est très bien comme ça. L'objectif est de couvrir 80% de vos besoins avec 20% de l'effort. Voici les couches essentielles, par ordre de priorité.

1. Les design tokens

Commencez par les fondations : les valeurs primitives qui définissent l'identité visuelle. En CSS, ce sont des custom properties :

:root {
  /* Couleurs */
  --color-primary: #6366f1;
  --color-primary-light: #818cf8;
  --color-primary-dark: #4f46e5;
  --color-text: #0f172a;
  --color-text-muted: #64748b;
  --color-bg: #ffffff;
  --color-bg-subtle: #f8fafc;
  --color-border: #e2e8f0;

  /* Typographie */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-serif: 'Lora', Georgia, serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Échelle typographique (modular scale 1.25) */
  --text-xs: 0.8rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.563rem;
  --text-3xl: 1.953rem;
  --text-4xl: 2.441rem;

  /* Espacement (base 4px) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;

  /* Border radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 9999px;
}

Ces tokens sont le socle de tout. Chaque composant, chaque page, chaque élément d'interface les utilise. Modifier une valeur ici la propage automatiquement partout.

2. Les composants de base

Ne cherchez pas à couvrir tous les cas. Identifiez les composants que vous utilisez dans 90% de vos projets :

Boutons : primary, secondary, ghost. Trois variantes suffisent.
Champs de formulaire : input, textarea, select. Avec les états focus, error et disabled.
Cartes : un conteneur avec border, padding et radius. Le composant le plus réutilisé du web.
Navigation : header avec logo, liens et CTA mobile-responsive.
Typographie : les styles pour h1-h6, paragraphes, listes et liens.

Un bon design system solo ne contient pas plus de 15 à 20 composants. Au-delà, vous passez plus de temps à le maintenir qu'à l'utiliser.

3. Les patterns de mise en page

Définissez quelques layouts réutilisables. Pas besoin d'un système de grille complexe :

/* Container */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

/* Stack : éléments empilés verticalement */
.stack { display: flex; flex-direction: column; }
.stack-sm { gap: var(--space-2); }
.stack-md { gap: var(--space-4); }
.stack-lg { gap: var(--space-8); }

/* Grid auto-responsive */
.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-6);
}

Où héberger votre design system

En tant que solo, vous n'avez pas besoin d'une infrastructure complexe. Voici des options pragmatiques :

Un fichier CSS unique : un fichier design-system.css que vous importez dans chaque projet. Simple, efficace, versionné avec Git.
Un template Figma : un fichier Figma avec vos tokens, composants et layouts. Dupliquez-le pour chaque nouveau projet.
Un dépôt npm privé : si vous travaillez avec des frameworks JavaScript, publiez vos composants en package npm. Plus de travail initial, mais une intégration propre.

Pour la plupart des freelances, la combinaison "fichier CSS + template Figma" est largement suffisante. Ne sur-ingénierez pas. Des outils comme Figma permettent de gérer vos tokens visuels directement dans le design, tandis que les custom properties CSS assurent la cohérence côté code.

Certains prestataires l'ont bien compris et intègrent un design system cohérent dès la phase de conception. C'est le cas par exemple de cette agence web en Suisse romande qui livre des sites sur mesure avec des tokens et composants réutilisables inclus dès le départ. Ce type d'approche professionnelle devrait être la norme, pas l'exception.

Faire évoluer le système

Votre design system doit grandir avec vos projets, pas en avance. La règle est simple :

Quand vous créez un composant pour un projet client, demandez-vous : "est-ce que je réutiliserai ce composant ?"
Si la réponse est oui, ajoutez-le au design system après le projet, pas pendant.
Si un composant n'a pas été réutilisé après 3 projets, retirez-le.

Cette approche "extract, don't abstract" évite de créer des composants inutilement génériques. Vous construisez à partir du concret, pas de l'abstrait.

La documentation : l'essentiel et rien de plus

En solo, la documentation n'a pas besoin d'être exhaustive. Un fichier README avec les points suivants suffit :

La palette de couleurs avec les noms des tokens.
L'échelle typographique avec des exemples visuels.
La liste des composants avec un exemple d'utilisation pour chacun.
Les conventions de nommage CSS.

Si vous travaillez avec Figma, la documentation vit directement dans le fichier Figma, à côté des composants. Pas besoin d'un site de documentation dédié.

Les erreurs à éviter

Trop de variations : 5 tailles de boutons et 8 couleurs, c'est trop. Limitez les choix pour accélérer les décisions.
Trop d'abstraction : un composant Box qui accepte 40 props est un anti-pattern. Gardez les composants concrets et spécifiques.
Tout prévoir d'avance : un design system est un jardin, pas un bâtiment. Il évolue, il change, il s'adapte. Ne tentez pas de tout planifier dès le départ.
Copier les grands : les design systems de Google ou Salesforce répondent à des problèmes que vous n'avez pas. Inspirez-vous, mais ne copiez pas leur structure.

Conclusion

Un design system solo n'est pas un petit design system d'entreprise. C'est un outil différent, avec des contraintes différentes et des objectifs différents. Il doit être léger, pragmatique et au service de votre productivité, pas un projet en soi.

Commencez par les tokens, ajoutez les composants que vous utilisez vraiment, documentez le minimum, et faites-le évoluer projet après projet. En quelques mois, vous aurez un outil sur mesure qui accélèrera considérablement votre workflow. Et ça, aucun design system prêt à l'emploi ne peut vous l'offrir.