Créer un design system sur Figma : le guide pratique

Un design system est une bibliothèque de composants réutilisables, de styles et de règles qui garantissent la cohérence d'un produit digital. Voici comment en créer un efficacement sur Figma — de la définition des tokens aux composants avancés, en passant par le handoff avec les développeurs.

Qu'est-ce qu'un design system ?

Un design system est bien plus qu'une simple bibliothèque de composants. C'est un langage commun entre designers et développeurs qui comprend : - Des tokens de design : couleurs, typographies, espacements, ombres, border-radius - Des composants : boutons, inputs, cartes, modals, navigation - Des patterns : formulaires, tableaux, pages types récurrents - Une documentation : règles d'usage, do's and don'ts, exemples d'application

Pourquoi créer un design system ?

• ▸Cohérence : toutes les pages et fonctionnalités partagent le même langage visuel
• ▸Rapidité : les designers assemblent des composants au lieu de tout redessiner from scratch
• ▸Collaboration : les développeurs comprennent exactement quoi implémenter et avec quels tokens
• ▸Scalabilité : le produit peut évoluer et s'enrichir sans perdre en cohérence

Étape 1 : Les fondations (Design Tokens)

Couleurs

Structurez votre palette en niveaux sémantiques :

Primary: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900
Secondary: même logique
Neutral: grays du blanc au noir
Semantic: success (vert), warning (orange), error (rouge), info (bleu)

Sur Figma, utilisez les Variables pour définir chaque couleur avec son nom sémantique (color/primary/500, color/background/default). Cela facilite les modes clair/sombre et le handoff avec les développeurs.

Typographie

Définissez une échelle typographique cohérente :

• ▸Display : 48-72px — titres de landing page
• ▸H1 : 36-48px — titres de page
• ▸H2 : 24-36px — titres de section
• ▸H3 : 20-24px — sous-titres
• ▸Body : 16px — texte courant
• ▸Small : 14px — labels, captions
• ▸Tiny : 12px — badges, tags

Espacements

Utilisez une échelle de 4px ou 8px pour tous vos espacements : 4 — 8 — 12 — 16 — 24 — 32 — 48 — 64 — 96 — 128

Autres tokens

• ▸Border radius : 0 — 4 — 8 — 12 — 16 — 24 — full
• ▸Shadows : sm — md — lg — xl
• ▸Z-index : 10 — 20 — 30 — 40 — 50 (navbar, modal, tooltip…)

Étape 2 : Les composants de base

Commencez par les composants les plus utilisés, dans cet ordre :

• ▸Boutons : primary, secondary, ghost, danger — en 3 tailles (sm, md, lg) avec états (default, hover, active, disabled, loading)
• ▸Inputs : text, email, password, textarea, select — avec labels, placeholders, messages d'erreur et de succès
• ▸Badges/Tags : pour les statuts, catégories, filtres
• ▸Cards : structures réutilisables pour afficher du contenu de manière cohérente
• ▸Navigation : navbar, sidebar, breadcrumb, tabs, pagination

Bonnes pratiques sur Figma

• ▸Utilisez Auto Layout sur tous vos composants sans exception
• ▸Créez des variants pour chaque état et chaque taille
• ▸Nommez vos composants avec une convention claire : Button/Primary/Large/Default
• ▸Documentez chaque composant avec une description et des exemples d'usage

Étape 3 : Les patterns

Les patterns sont des assemblages de composants pour des cas d'usage récurrents dans votre produit : - Formulaire de connexion : inputs + bouton + liens + gestion des erreurs - Card produit : image + texte + prix + CTA + badge de statut - Header : logo + navigation + actions utilisateur (panier, profil) - Footer : colonnes de liens + réseaux sociaux + mentions légales

Étape 4 : Documentation et handoff

Un design system sans documentation est inutile — et sans handoff propre, les développeurs ne peuvent pas l'utiliser correctement. Pour chaque composant, précisez :

• ▸Quand l'utiliser (et quand ne pas l'utiliser)
• ▸Les variants disponibles et leur usage précis
• ▸Les règles d'accessibilité (contraste minimum, taille de clic, navigation clavier)
• ▸Les specs pour les développeurs : spacing exact, comportement responsive, animations

Le handoff aux développeurs

Figma Dev Mode permet aux développeurs d'inspecter les composants avec toutes les specs (tailles, couleurs, espacements, CSS généré). Pour maximiser l'efficacité du handoff :

• ▸Nommez vos tokens de la même façon dans Figma et dans le code (color-primary-500 dans les deux)
• ▸Annotez les comportements qui ne sont pas visibles dans la maquette statique (animations, états au clic)
• ▸Créez une page "Handoff" dans Figma avec les specs techniques spécifiques

Faire évoluer son design system

Un design system n'est jamais terminé — il évolue avec le produit. Quelques règles pour le maintenir :

• ▸Versionner : annotez les changements majeurs avec un numéro de version
• ▸Communiquer : informez toute l'équipe (designers et développeurs) de chaque modification
• ▸Auditer : régulièrement, vérifiez que le produit réel est bien aligné avec le design system
• ▸Documenter les dépréciations : si un composant est remplacé, ne le supprimez pas immédiatement — marquez-le comme déprécié et donnez le composant de remplacement

FAQ

Quand faut-il créer un design system ? Dès que votre produit dépasse 5-10 écrans ou que plusieurs personnes travaillent sur le design. Plus vous commencez tôt, plus vous gagnez du temps à long terme.

Design system vs UI Kit : quelle différence ? Un UI Kit est une collection de composants visuels. Un design system inclut en plus les tokens, les patterns, la documentation et les principes de design. C'est un écosystème complet, pas juste une bibliothèque.

Combien de temps pour créer un design system ? Un design system de base (tokens + 10-15 composants) peut se créer en 1-2 semaines. Un système complet et documenté demande 1-3 mois selon la complexité du produit et de l'équipe.