🔧 Outils pour l’UX/UI et les Design Systems

🎯 Objectifs du chapitre

• 🧰 Découvrir les outils essentiels pour améliorer l’UX/UI d’un projet
• 🧩 Comprendre comment mettre en œuvre un Design System avec les bons outils
• �� Connaître les ressources pour les couleurs, la typographie et l’accessibilité
• 💻 Savoir intégrer ces outils dans un workflow de développement ReactReact
  Bibliothèque JavaScript créée par Meta pour construire des interfaces utilisateur à base de composants. / Next.jsNext.js
  Framework React créé par Vercel, offrant SSR, SSG, routage et optimisations intégrées.

⚡ TLDR : Utilisez Figma pour le design, Storybook pour documenter vos composants, Tailwind CSS ou Shadcn/ui pour implémenter votre Design System en code. Vérifiez l’accessibilité avec Lighthouse et axe. Choisissez vos couleurs avec Coolors et vos polices avec Google Fonts. Voir aussi : Principes UI et Processus de conception.

🎨 Outils de design et prototypage

📌 Pourquoi utiliser un outil de design ? Un outil de design permet de concevoir, prototyper et tester des interfaces avant de coder, réduisant ainsi les allers-retours coûteux entre design et développement.

💡 Recommandation : Figma est aujourd’hui le standard de l’industrie pour le design UI/UX. Penpot est une excellente alternative open source.

🧩 Outils pour créer un Design System

📌 Qu’est-ce qu’un Design System ? Un Design System est un ensemble de composants réutilisables, de règles de design et de tokens (couleurs, espacements, typographies) qui garantissent la cohérence d’un produit. Voir Principes UI — Systèmes de design.

📚 Bibliothèques de composants UI

💡 Pour un projet Next.js : la combinaison Shadcn/ui + Tailwind CSS + Radix UI est aujourd’hui très populaire car elle offre une personnalisation totale tout en fournissant des composants accessibles.

🏗️ Documentation et développement de composants

Exemple — Lancer Storybook dans un projet Next.js :

npx storybook@latest init
npm run storybook

🎨 Outils pour les couleurs

📌 Choisir une palette de couleurs cohérente est essentiel pour transmettre l’identité visuelle et garantir l’accessibilité.

📌 Rappel : le ratio de contraste minimum est de 4.5:1 pour le texte normal et 3:1 pour le texte large (WCAG 2.1 niveau AA). Voir Principes UX — Accessibilité.

💻 Implémenter des tokens de couleurs avec Tailwind CSS

// tailwind.config.js — Tokens de couleurs
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#eff6ff',
          500: '#3b82f6',
          700: '#1d4ed8',
          900: '#1e3a5f',
        },
        accent: '#f59e0b',
        success: '#10b981',
        error: '#ef4444',
      },
    },
  },
}

Utilisation dans un composant :

<button className="bg-primary-500 hover:bg-primary-700 text-white px-4 py-2 rounded">
  Action principale
</button>

🔤 Outils pour la typographie

💡 Bonne pratique : limitez-vous à 2 polices maximum — une pour les titres, une pour le texte courant. Utilisez une échelle typographique (ratio 1.25 ou 1.333) pour des tailles harmonieuses.

♿ Outils d’accessibilité (a11y)

📌 L’accessibilité n’est pas optionnelle — c’est une obligation légale dans de nombreux pays et un pilier de l’UX Design.

Exemple — Ajouter le linting accessibilité à un projet React :

npm install eslint-plugin-jsx-a11y --save-dev

// eslint.config.js — Activer les règles a11y
import jsxA11y from 'eslint-plugin-jsx-a11y'
 
export default [
  jsxA11y.flatConfigs.recommended,
  // ... autres configurations
]

🖼️ Icônes et ressources visuelles

💡 Conseil : choisissez une seule bibliothèque d’icônes par projet pour garantir la cohérence visuelle. Ce projet utilise Lucide .

🧪 Outils de test UX et feedback

💻 Mettre en œuvre un Design System en code

📌 Un Design System n’est pas seulement un fichier Figma — il doit être implémenté en code pour être réellement utile aux développeurs.

🧱 Les briques essentielles

💻 Exemple — Structure d’un Design System dans un projet Next.js

components/
├── ui/                    # Composants de base du Design System
│   ├── button.tsx
│   ├── card.tsx
│   ├── input.tsx
│   ├── label.tsx
│   └── index.ts           # Export centralisé
├── styles/
│   └── tokens.css         # Tokens CSS (couleurs, espacements)
└── stories/               # Stories Storybook (optionnel)
    ├── button.stories.tsx
    └── card.stories.tsx

💻 Exemple — Définir des tokens CSS et les utiliser

/* components/styles/tokens.css */
:root {
  /* Couleurs */
  --color-primary: #3b82f6;
  --color-primary-hover: #1d4ed8;
  --color-accent: #f59e0b;
  --color-error: #ef4444;
  --color-success: #10b981;
 
  /* Espacements */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
 
  /* Typographie */
  --font-sans: 'Inter', sans-serif;
  --font-mono: 'Fira Code', monospace;
 
  /* Rayons de bordure */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 1rem;
}

// components/ui/button.tsx — Composant utilisant les tokens
import { cn } from "@/lib/utils";
 
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: "primary" | "outline" | "ghost";
  size?: "sm" | "md" | "lg";
}
 
export function Button({ variant = "primary", size = "md", ...props }: ButtonProps) {
  return (
    <button
      className={cn(
        "rounded font-medium transition-colors",
        variant === "primary" && "bg-primary-500 hover:bg-primary-700 text-white",
        variant === "outline" && "border border-primary-500 text-primary-500 hover:bg-primary-50",
        variant === "ghost" && "text-primary-500 hover:bg-primary-50",
        size === "sm" && "px-3 py-1.5 text-sm",
        size === "md" && "px-4 py-2 text-base",
        size === "lg" && "px-6 py-3 text-lg",
      )}
      {...props}
    />
  );
}

✅ Checklist — Choisir ses outils UX/UI

Voici une checklist pour sélectionner les bons outils selon votre projet :

• 🎨 Design : Figma ou Penpot pour le prototypage
• 🧩 Composants : une bibliothèque UI adaptée (Shadcn/ui, MUI, HeroUI…)
• 🎨 Couleurs : une palette validée avec un contrast checker
• 🔤 Typographie : 2 polices max avec une échelle cohérente
• ♿ Accessibilité : Lighthouse + axe DevTools dans le workflow
• 🖼️ Icônes : une seule bibliothèque cohérente
• 📚 Documentation : Storybook pour les composants partagés
• 🧪 Tests : tests visuels et tests utilisateurs réguliers

📚 Ressources complémentaires