Retour au Blog
Retour au Blog

Construire des Design Systems Scalables avec React et Tailwind

December 1, 2024

Les design systems sont le pilier des interfaces utilisateur cohérentes. Voici comment en construire un qui évolue.

Pourquoi les Design Systems sont importants

Un design system bien conçu offre :

  • Cohérence sur tous les produits
  • Développement plus rapide avec des composants réutilisables
  • Meilleure collaboration entre designers et développeurs
  • Dette technique réduite sur le long terme

Principes fondamentaux

1. Commencez par les Tokens

Les tokens de design sont les valeurs atomiques de votre système :

export const tokens = {
  colors: {
    primary: {
      50: '#eff6ff',
      500: '#3b82f6',
      900: '#1e3a8a',
    },
    neutral: {
      0: '#ffffff',
      100: '#f5f5f5',
      900: '#171717',
    },
  },
  spacing: {
    xs: '0.25rem',
    sm: '0.5rem',
    md: '1rem',
    lg: '1.5rem',
    xl: '2rem',
  },
  radii: {
    sm: '0.25rem',
    md: '0.5rem',
    lg: '1rem',
    full: '9999px',
  },
} as const;

2. Construisez des Composants Primitifs

Commencez par les bases :

import { cva, type VariantProps } from "class-variance-authority";

const buttonVariants = cva(
  "inline-flex items-center justify-center rounded-md font-medium transition-colors",
  {
    variants: {
      variant: {
        primary: "bg-primary text-white hover:bg-primary/90",
        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
      },
      size: {
        sm: "h-8 px-3 text-sm",
        md: "h-10 px-4",
        lg: "h-12 px-6 text-lg",
      },
    },
    defaultVariants: {
      variant: "primary",
      size: "md",
    },
  }
);

interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {}

export function Button({ variant, size, className, ...props }: ButtonProps) {
  return (
    <button className={buttonVariants({ variant, size, className })} {...props} />
  );
}

Composition de Composants

Construisez des composants complexes à partir des primitives :

NiveauExemplesRôle
TokensCouleurs, espacement, typographieFondation
PrimitivesButton, Input, BadgeBlocs de base
PatternsCard, Modal, DropdownPatterns UI courants
TemplatesPageHeader, SidebarStructures de mise en page

La Documentation est Clé

"Un design system sans documentation n'est qu'une bibliothèque de composants."

Chaque composant devrait inclure :

  1. Exemples d'utilisation — Montrez les cas d'usage courants
  2. Documentation des props — Expliquez toutes les options
  3. Notes d'accessibilité — Labels ARIA, navigation clavier
  4. À faire et à éviter — Guidez vers une utilisation correcte

Stratégie de Versioning

{
  "name": "@company/design-system",
  "version": "2.1.0",
  "peerDependencies": {
    "react": "^18.0.0",
    "tailwindcss": "^3.0.0"
  }
}

Utilisez le versioning sémantique :

  • Major : Changements cassants
  • Minor : Nouvelles fonctionnalités (rétrocompatibles)
  • Patch : Corrections de bugs

Conclusion

Construire un design system est un investissement qui rapporte en :

  • Productivité des développeurs
  • Cohérence du design
  • Expérience utilisateur
  • Collaboration d'équipe

Commencez petit, itérez souvent, et documentez tout.

GitHub
LinkedIn