Comment créer un design system pour votre entreprise

Qu’est-ce qu’un design system et pourquoi votre entreprise en a besoin

Un design system est un ensemble de composants réutilisables, de règles de design et de documentation qui permettent de créer des interfaces cohérentes et rapides à produire. C’est la « boîte de LEGO » de votre entreprise : au lieu de dessiner chaque bouton, chaque carte et chaque formulaire à partir de zéro, vous piochez dans une bibliothèque de pièces standardisées.

Les avantages concrets :

• Vitesse de production : un designer qui utilise un design system crée des maquettes 3 à 5 fois plus vite qu’en partant de zéro
• Cohérence visuelle : chaque page, chaque section, chaque bouton respecte les mêmes standards — votre marque est immédiatement reconnaissable
• Collaboration simplifiée : les développeurs savent exactement quoi coder car chaque composant est documenté avec ses variantes et ses états
• Moins de bugs visuels : quand un composant est corrigé dans le système, toutes les pages qui l’utilisent sont automatiquement mises à jour

Vous n’avez pas besoin d’être une grande entreprise pour bénéficier d’un design system. Dès que vous gérez 5+ pages de site ou que vous travaillez avec au moins un développeur, la standardisation vous fait gagner du temps.

Les fondations : tokens de design

Les tokens (ou variables) de design sont les valeurs fondamentales qui définissent l’apparence de votre marque. Tout le reste en découle.

Palette de couleurs

Définissez votre palette avec des noms sémantiques, pas des noms de couleur :

/* ❌ Noms de couleur — impossible à maintenir */
--blue: #2563eb;
--dark-blue: #1e40af;

/* ✅ Noms sémantiques — clair et évolutif */
--color-primary: #2563eb;
--color-primary-hover: #1e40af;
--color-secondary: #f97316;
--color-text: #1f2937;
--color-text-light: #6b7280;
--color-background: #ffffff;
--color-background-alt: #f9fafb;
--color-success: #059669;
--color-error: #dc2626;
--color-warning: #d97706;
--color-border: #e5e7eb;

Si demain vous changez de bleu, vous modifiez une seule variable et tout le site se met à jour.

Typographie

Définissez une échelle typographique cohérente :

/* Police */
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--font-mono: 'JetBrains Mono', monospace;

/* Tailles */
--text-xs: 0.75rem;    /* 12px — légendes, badges */
--text-sm: 0.875rem;   /* 14px — texte secondaire */
--text-base: 1rem;     /* 16px — corps de texte */
--text-lg: 1.125rem;   /* 18px — sous-titres */
--text-xl: 1.25rem;    /* 20px — titres de section */
--text-2xl: 1.5rem;    /* 24px — titres de page */
--text-3xl: 1.875rem;  /* 30px — titres principaux */
--text-4xl: 2.25rem;   /* 36px — hero titles */

/* Poids */
--font-normal: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;

/* Interligne */
--leading-tight: 1.25;
--leading-normal: 1.5;
--leading-relaxed: 1.75;

Espacement

Utilisez une échelle de 4px :

--space-1: 0.25rem;  /* 4px */
--space-2: 0.5rem;   /* 8px */
--space-3: 0.75rem;  /* 12px */
--space-4: 1rem;     /* 16px */
--space-5: 1.25rem;  /* 20px */
--space-6: 1.5rem;   /* 24px */
--space-8: 2rem;     /* 32px */
--space-10: 2.5rem;  /* 40px */
--space-12: 3rem;    /* 48px */
--space-16: 4rem;    /* 64px */

Coins arrondis et ombres

/* Arrondis */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-full: 9999px;  /* cercle / pill */

/* Ombres */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
--shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
--shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.15);

Les composants essentiels

Boutons

Définissez 3 variantes de bouton pour couvrir tous les cas :

/* Bouton primaire — action principale */
.btn-primary {
    background: var(--color-primary);
    color: white;
    padding: var(--space-3) var(--space-6);
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: background 0.2s ease;
}
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

/* Bouton secondaire — action secondaire */
.btn-secondary {
    background: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    /* ... mêmes padding et border-radius */
}

/* Bouton ghost — action tertiaire */
.btn-ghost {
    background: transparent;
    color: var(--color-text);
    border: none;
    text-decoration: underline;
}

Chaque bouton doit avoir 4 états documentés : default, hover, active (pressed), disabled.

Cartes

.card {
    background: var(--color-background);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

Champs de formulaire

.input {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    color: var(--color-text);
    transition: border-color 0.2s ease;
}
.input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.input.error {
    border-color: var(--color-error);
}
.input-label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-text);
}
.input-error-message {
    margin-top: var(--space-1);
    font-size: var(--text-sm);
    color: var(--color-error);
}

Documenter votre design system

Un design system non documenté est inutile. La documentation doit être consultable par les designers et les développeurs.

Pour chaque composant, documentez :

• Nom : le nom officiel du composant (Bouton primaire, Carte produit, etc.)
• Usage : quand utiliser ce composant et quand ne PAS l’utiliser
• Variantes : les différentes versions (tailles, couleurs, avec/sans icône)
• États : default, hover, active, disabled, loading, error
• Code : le HTML et le CSS à copier-coller
• Exemples : des captures d’écran montrant le composant en contexte

Outils de documentation

• Notion (gratuit) : créez une page par composant avec du texte, des images et des blocs de code. Parfait pour les petites équipes
• Storybook (gratuit, open source) : un outil dédié à la documentation de composants UI. Les composants sont interactifs — le développeur peut voir et tester chaque variante dans le navigateur. Nécessite React, Vue ou Angular
• Zeroheight : plateforme de documentation de design system connectée à Figma. Plan gratuit disponible

Implémenter dans Figma

Dans Figma, votre design system se matérialise par :

• Color Styles : vos tokens de couleur, nommés avec la convention sémantique (Primary, Secondary, Text, Background, Error…)
• Text Styles : vos styles typographiques (Heading 1, Heading 2, Body, Caption…)
• Components : vos composants réutilisables avec des variantes (Variants). Un composant Button peut avoir les variants : type=primary/secondary/ghost, size=sm/md/lg, state=default/hover/disabled
• Auto Layout : configurez chaque composant avec Auto Layout pour qu’il s’adapte automatiquement au contenu (un bouton qui s’élargit quand le texte est plus long)

Organisation recommandée dans Figma :

1. Créez un fichier dédié nommé « [Nom de l’entreprise] — Design System »
2. Page 1 : Fondations (couleurs, typo, espacement, icônes)
3. Page 2 : Composants (boutons, inputs, cartes, navigation, modals…)
4. Page 3 : Patterns (en-tête de page, footer, formulaire de contact, grille produits…)
5. Publiez ce fichier comme Team Library (gratuit sur le plan Pro) pour que tous les designers de l’équipe puissent y accéder

Les erreurs qui rendent un design system inutile

• Trop de composants dès le début : commencez avec 5-10 composants essentiels (boutons, inputs, cartes, navigation, typographie). Ajoutez les autres quand le besoin se présente. Un design system de 200 composants que personne n’utilise est du temps perdu
• Pas de propriétaire : quelqu’un doit être responsable de maintenir et faire évoluer le design system. Sans propriétaire, il devient obsolète en 3 mois
• Trop rigide : un design system n’est pas une prison. Il doit permettre des exceptions justifiées (une page marketing spéciale, un composant unique pour une campagne)
• Design et code désynchronisés : si le bouton dans Figma ne correspond pas au bouton dans le code, le design system échoue. Les designers et développeurs doivent travailler ensemble sur le système