Cours 10 | Le cours #10¶

Exercices¶

Séance de création dirigée

Système de design¶

Un design system (ou système de design), est un ensemble de règles, de composants réutilisables et de décisions de design documentées qui permettent à une équipe de créer des interfaces cohérentes, rapidement et à grande échelle.

Ce que contient un design system¶

Un design system complet est composé de 4 couches :

Couche	Contenu
Fondations	Couleurs, typographie, espacements, icônes, grilles
Composants	Boutons, champs, cartes, menus, modals
Patterns	Formulaires, navigation, listes, états d'erreur
Documentation	Règles d'usage, do/don't, principes

Exemples

Plusieurs entreprises publient leur design system :

Google : Material Design
Apple : Human Interface Guidelines
Microsoft : Fluent Design
Shopify : Polaris
Atlassian : Atlassian Design System (Jira)

Palette de couleurs¶

D'abord on définit l'ensemble des couleurs de notre système : rouge, bleu, vert, etc.

Ensuite on décline chacune de ces couleurs en plusieurs teintes (tints / shades), de très pâle à très foncé. Traditionnellement, on les nomme par bond de 100 (entre 0 et 1000).

Notez qu'aux extrémités, on y va plus granulairement. En effet, les couleurs pâles et foncées demandent souvent plus de subtilités.

Exemple

:root {
  --blue-500: #3b82f6;
  --blue-700: #1d4ed8;
  --red-500: #ef4444;
  --gray-100: #f3f4f6;
  --gray-900: #111827;

  /* On appelle ce type de variable des « design tokens », « tokens primitifs » ou « global tokens » */
}

Sémantique¶

Séparer le sens (intention) de l’apparence. Un exemple qui le fait bien : daisyui.

Nom	Signification
primary	Couleur principale de la marque (Boutons, liens, éléments actifs)
secondaire	Couleur d'appui ou de contraste
success	confirmation
danger	erreur
warning	attention
info	neutre informatif

Exemple

:root {
    /* ... */

    /* Rôles (sémantique) */
    --primary: var(--blue-500);
    --danger: var(--red-500);

    /* L'usage (composants) */
    --primary-bg: var(--primary);
    --primary-text: #fff;
    --primary-border: var(--blue-700);

    --btn-bg: #ffffff;
    --btn-text: #1a1a1a;
}

Version foncée (darkmode)¶

On pourrait croire qu'en mode foncé, on a juste besoin d'inverser les déclinaisons pour s'adapter à un mode foncé, mais ce serait une erreur.

Si le fond est blanc, il n'est pas nécessairement noir dans le darkmode. On met souvent du gris foncé pour que ce soit moins fatigant pour les yeux. Les couleurs doivent alors aussi s'ajuster en conséquence.

L'accessibilité doit toujours faire partie du processus de décision des couleurs

En code, ça pourrait ressembler à ceci :

Exemple complet

/* 1. Mode clair */

:root {
    /* Tokens (valeurs brutes) */
    --blue-500: #3b82f6;
    --blue-700: #1d4ed8;
    --red-500: #ef4444;

    /* Rôles (sémantique) */
    --primary: var(--blue-500);
    --danger: var(--red-500);

    /* L'usage (composants) */
    --primary-bg: var(--primary);
    --primary-text: #fff;
    --primary-border: var(--blue-700);

    --btn-bg: #ffffff;
    --btn-text: #1a1a1a;
}

/* 2. Mode Sombre (Automatique + Manuel) */

@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
        --blue-500: #60a5fa;
        --btn-bg: #111827;
        --btn-text: #f9fafb;
    }
}

[data-theme='dark'] {
    --blue-500: #60a5fa;
    --btn-bg: #111827;
    --btn-text: #f9fafb;
}

Darkmode dans Figma¶

Pour activer la notion de darkmode, assurez-vous de mettre 2 valeurs (colonnes) à une même variable.

Dans la configuration du frame, on peut spécifier quelle version utiliser (clair ou sombre).

Ainsi, toutes les couleurs s'ajusteront en fonction du contexte de la maquette !

Design system de la communauté¶

Plus souvent qu'autrement, les Design system contemporains viennent avec une version sombre.

Pour ajouter ce type de système dans votre document, passez par l'onglet Ressources :

Pour l'activer, sélectionnez une de ses instances de composante et activez sa variation sombre dans la section Apparence.

Typographie¶

La typographie dans un design system définit toutes les combinaisons de police, taille, graisse et interlignage utilisées dans l'interface :

Exemple de css

:root {
    /* 1. Font Family */
    --font-family: 'Inter', system-ui, -apple-system, sans-serif;

    /* 2. Font sizes */
    --font-size-sm: 0.875rem;    /* 14px */
    --font-size-base: 1rem;      /* 16px - Par défaut */
    --font-size-lg: 1.125rem;    /* 18px */

    /* 3. Font weights */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-bold: 700;

    /* 4. Line heights */
    --line-height-none: 1;
    --line-height-tight: 1.25;
    --line-height-snug: 1.375;
    --line-height-normal: 1.5;
}

Généralement, pas plus de 2 polices dans un système de design

De nos jours ...

En vérité, les typescale contemporains ne sont plus fixes. La tendance actuelle est d'utiliser clamp() en css.

:root {
    /* La police va varier de 1rem à 1.5rem selon la largeur de l'écran à cause du 2vw */
    --font-size-xyz: clamp(1rem, 2vw + 0.5rem, 1.5rem);
}

Dimensions¶

Un design system cherche à encadrer le plus de cas de figure possible. Pour ce faire, il se doit d'être assez flexible. Ainsi, il faut réfléchir à plusieurs cas de figure qu'on pourrait catégoriser : XS, S, M, L, XL

Ainsi, on peut baser nos composantes sur ce principe. Par exemple, les boutons :

Variations¶

Icônes¶

Selon les usages, on va catégoriser les groupes d'icônes selon leurs fonctions : alertes, fichiers, formulaire, etc.

Quelques exemples

Material Symbols (Google)
Heroicons (Tailwind)
Feather

Applicabilité d'un design system¶

L'intégration d'un design system en développement Web reste exigeante.

Chaque composante doit être codée, testée et documentée, ce qui demande beaucoup de temps.

De plus, même de petits changements peuvent entraîner des effets en cascade et nécessiter de nouveaux tests et déploiements.

Figma¶

Figma facilite la transition vers le code grâce au Dev Mode, qui expose directement les propriétés CSS.

Toutefois, le code généré n’est pas prêt pour la production : la logique, l’accessibilité et la réutilisabilité doivent encore être prises en charge par le développeur.

IA¶

L’IA générative réduit cet écart en produisant rapidement du code de base à partir de designs.

Le développeur agit alors davantage comme architecte que comme exécutant.

Connexion émotionnelle

Stitch (Google)¶

Stitch vise à automatiser les design systems via les Design Tokens, assurant une cohérence entre design et code sans avoir à gérer chaque variation manuellement.

Interface de Stitch — stitch.withgoogle.com

Devoir¶

Devoir - Figma
Refonte d'un site Web