Ce que vous saurez faire
Un design system est un référentiel cohérent de règles visuelles, de composants réutilisables et de principes d’interaction qui garantissent l’uniformité de tous les supports d’une entreprise : site web, application mobile, supports commerciaux, dashboards internes. Créer un design system pour une PME sénégalaise, c’est transformer une communication visuelle souvent hétérogène en une marque reconnaissable, qui inspire confiance et accélère les développements futurs. Quand un nouveau produit doit être lancé, l’équipe ne repart pas de zéro : elle puise dans la bibliothèque existante.
Dans ce tutoriel, vous apprendrez à structurer un design system à partir d’un audit de l’existant, à définir vos tokens de design (couleurs, typographie, espacements), à construire une bibliothèque de composants dans Figma, à documenter les règles d’usage, et à organiser la gouvernance pour que le système vive dans le temps. Le coût d’un design system pour une PME va de zéro (outil Figma gratuit + travail interne) à 5 millions FCFA en prestation agence selon l’ampleur. À la fin, vous disposerez d’un socle visuel capable de porter votre marque pendant 3 à 5 ans, adaptable à tous vos canaux digitaux.
Étape 1 : Réalisez un audit visuel de l’existant
Avant toute création, documentez ce qui existe. Créez un dossier Audit-DS-2026 sur votre ordinateur. Rassemblez dans un seul document (Figma ou Miro) des captures d’écran de votre site web, de votre application, de vos emails, de vos plaquettes PDF, de vos posts LinkedIn et Instagram. Prenez 20 à 30 captures minimum. Sur une grande toile, disposez-les par canal. Repérez les incohérences : 5 nuances de bleu différentes, 3 polices de caractères, des boutons au style radicalement différent selon le support. Cet audit devient votre point de départ.
Étape 2 : Définissez vos principes de marque directeurs
Organisez un atelier de 2 heures avec 3 à 5 décideurs de l’entreprise (direction, marketing, commercial). Posez trois questions : Quels sont les trois adjectifs qui qualifient notre marque ? (Par exemple : professionnel, accessible, résolument africain.) Quelle émotion doit ressentir un client en nous découvrant ? Quels sont nos 3 concurrents et en quoi voulons-nous nous distinguer visuellement ? Consignez les réponses dans un document Principes-de-marque.pdf. Ces principes serviront de boussole pour tous les arbitrages visuels ultérieurs.
Étape 3 : Créez votre fichier Figma de design system
Connectez-vous à figma.com avec votre compte professionnel (gratuit pour 3 fichiers Figma). Cliquez sur « + New design file ». Nommez-le DS-VotrePME-v1.0. Créez 6 pages via le panneau latéral gauche : 00-Cover, 01-Fondations, 02-Tokens, 03-Composants, 04-Patterns, 05-Exemples. La page Cover affichera le nom du design system, la version et la date de dernière mise à jour. Fondations contiendra les principes, Tokens les variables atomiques (couleurs, typographies), Composants les éléments réutilisables.
Étape 4 : Définissez votre palette de couleurs structurée
Dans la page 02-Tokens, créez la section Colors. Définissez votre couleur primaire : un bleu signature par exemple #1E40AF pour un cabinet conseil. Générez 10 déclinaisons d’intensité : primary-50 (presque blanc #EFF6FF), primary-100, primary-200, jusqu’à primary-900 (presque noir #1E3A8A). Faites de même pour une couleur secondaire (terracotta #C2410C pour une touche sénégalaise) et les couleurs système : success #10B981, warning #F59E0B, danger #DC2626, neutral en 10 nuances de gris. Documentez chaque code hexadécimal à côté du carré de couleur.
Étape 5 : Choisissez et hiérarchisez vos typographies
Sélectionnez deux familles typographiques maximum : une pour les titres, une pour le corps. Recommandation pour une PME sénégalaise : Inter pour le corps (lisible sur mobile, gratuit sur Google Fonts) et Playfair Display pour les titres si vous voulez une touche premium. Dans Figma, créez les styles de texte : heading-1 (Playfair 48px, line-height 56px, weight 700), heading-2 (40px/48px/700), heading-3 (32px/40px/600), body-large (18px/28px/400), body-regular (16px/24px/400), body-small (14px/20px/400), caption (12px/16px/400). Enregistrez chacun comme style Figma via l’icône à 4 points.
Étape 6 : Créez votre échelle d’espacements
Les espacements inconsistants sont la première source de visuels ratés. Définissez une échelle basée sur 4px : space-1 = 4px, space-2 = 8px, space-3 = 12px, space-4 = 16px, space-5 = 24px, space-6 = 32px, space-7 = 48px, space-8 = 64px, space-9 = 96px. Cette progression (4, 8, 12, 16, 24, 32, 48, 64, 96) est éprouvée sur la plupart des design systems modernes. Dans Figma, créez des rectangles étiquetés pour visualiser chaque valeur. Tous les paddings et margins de vos composants devront utiliser exclusivement ces valeurs.
Étape 7 : Définissez les élévations et les rayons de bordure
Les ombres portées (élévations) donnent de la profondeur. Créez 4 niveaux : elevation-1 (shadow 0 1px 2px rgba(0,0,0,0.05)), elevation-2 (0 4px 6px -1px rgba(0,0,0,0.1)), elevation-3 (0 10px 15px -3px rgba(0,0,0,0.1)), elevation-4 (0 20px 25px -5px rgba(0,0,0,0.1)). Pour les rayons de bordure : radius-none 0px, radius-sm 4px, radius-md 8px, radius-lg 16px, radius-full 9999px (pour les pastilles circulaires). Enregistrez chacun comme style d’effet dans Figma via l’onglet Effects.
Étape 8 : Construisez vos composants atomiques (atomic design)
Appliquez la méthode atomic design de Brad Frost. Commencez par les atomes : Button (avec variants primary, secondary, ghost, danger + tailles small/medium/large + états default/hover/disabled), Input (text, email, password, textarea), Checkbox, Radio, Tag, Avatar, Icon. Dans Figma, utilisez la fonctionnalité Component : sélectionnez votre premier bouton, cliquez sur Create component (raccourci Ctrl+Alt+K). Créez ensuite les variants via le panneau droit, en ajoutant des propriétés comme size et state. Un composant Button bien fait a 3 tailles x 4 types x 3 états = 36 variants.
Étape 9 : Assemblez vos composants moléculaires
Les molécules combinent plusieurs atomes : Card (image + titre + texte + bouton), SearchBar (icône + input + bouton), FormField (label + input + message d’erreur), NavigationItem (icône + label + indicateur actif), Breadcrumb, Pagination. Chaque molécule est créée en instance des composants atomiques. Ainsi, si vous modifiez votre Button atomique, toutes les Cards qui l’utilisent se mettent à jour automatiquement. C’est la puissance du design system : une seule source de vérité.
Étape 10 : Créez vos organismes et templates
Les organismes sont des assemblages complexes : Header complet (logo + navigation + recherche + CTA), Footer (4 colonnes + mentions légales + réseaux sociaux), HeroSection (titre + sous-titre + image + boutons), FeatureGrid (3 colonnes avec icône + titre + description). Les templates sont des compositions de page : page d’accueil, page produit, page contact. Dans Figma, une page de dashboard d’application pourrait contenir sidebar (organisme) + topbar (organisme) + 6 cards KPI (molécules).
Étape 11 : Rédigez les règles d’usage pour chaque composant
À côté de chaque composant dans Figma, ajoutez une zone de documentation. Pour le Button primary : « À utiliser pour l’action principale d’une page. Un seul bouton primary par écran. Ne jamais utiliser pour des actions destructives (préférer danger). Texte de 2 à 4 mots maximum, verbe d’action au début : Valider la commande, Envoyer le devis, Télécharger le PDF. » Ajoutez des exemples « Do » et « Don’t » visuellement. Cette documentation est plus importante que les composants eux-mêmes.
Étape 12 : Construisez une bibliothèque d’icônes cohérente
N’utilisez jamais d’icônes mélangées de sources différentes. Choisissez une bibliothèque unique : Lucide Icons (gratuite, moderne, 1 400+ icônes) ou Phosphor Icons (très complète). Téléchargez le pack depuis lucide.dev ou phosphoricons.com. Importez 30 à 50 icônes essentielles dans votre fichier Figma : home, user, search, settings, bell, mail, phone, chevron-down, check, x, plus, minus, edit, trash, download, upload. Convertissez-les en composants pour pouvoir les réutiliser partout.
Étape 13 : Publiez votre design system comme bibliothèque Figma
Pour que vos autres fichiers Figma (site web, app) puissent utiliser vos composants, publiez votre DS comme bibliothèque. Cliquez sur l’icône de livre en bas à gauche, choisissez « Publish ». Rédigez un message de version : « v1.0 – Lancement initial ». Validez. Dans un autre fichier Figma, cliquez sur l’icône livre, activez votre DS dans l’onglet « Libraries ». Désormais, tous les composants sont accessibles via le panneau Assets. Chaque mise à jour de votre DS est notifiée dans les fichiers dépendants.
Étape 14 : Mettez en place la gouvernance et le versioning
Un design system non maintenu meurt en 6 mois. Définissez un référent DS (designer lead ou CTO). Établissez un processus d’évolution : toute proposition de nouveau composant est déposée dans un board Trello ou Notion, discutée en comité mensuel, approuvée ou rejetée. Adoptez le semantic versioning : v1.0.0 (release majeure), v1.1.0 (ajout de composant), v1.0.1 (correction de bug). Tenez un changelog daté dans votre Figma. Organisez une revue semestrielle pour retirer les composants obsolètes et auditer l’usage réel.
Erreurs fréquentes
- Copier un design system existant sans l’adapter : Material Design ou Apple HIG ne reflètent pas votre marque. Inspirez-vous, mais construisez vos propres tokens.
- Multiplier les variantes d’un même composant : 12 types de boutons tuent la cohérence. Limitez-vous à 4 types maximum.
- Oublier la documentation : des composants Figma sans règles d’usage ne servent à rien. La doc représente 40 % de la valeur du DS.
- Ignorer l’accessibilité : un texte gris clair sur fond blanc échoue aux contrastes WCAG AA. Utilisez un vérificateur comme WebAIM Contrast Checker dès la définition des couleurs.
- Ne pas impliquer les développeurs : si votre DS n’est pas traduit en code (CSS variables, composants React), les designers dessinent dans le vide. Associez l’équipe tech dès l’étape 4.
- Croire que le DS est un livrable figé : c’est un produit vivant. Budgétez 2 à 4 jours-homme par trimestre pour sa maintenance.
Checklist finale
- Audit visuel réalisé avec 20+ captures analysées
- Principes de marque validés par la direction (3 adjectifs)
- Fichier Figma DS créé avec 6 pages structurées
- Palette de couleurs définie avec 10 nuances par teinte principale
- 2 typographies maximum avec 7 styles hiérarchisés
- Échelle d’espacements base 4px documentée
- 4 niveaux d’élévation et 5 rayons de bordure définis
- Composants atomiques créés avec variants (Button, Input, etc.)
- Molécules et organismes assemblés à partir des atomes
- Bibliothèque d’icônes cohérente intégrée (Lucide ou Phosphor)
- Documentation Do/Don’t rédigée pour chaque composant clé
- Design system publié comme bibliothèque Figma accessible
- Référent DS désigné et processus de gouvernance formalisé
- Contrastes WCAG AA vérifiés sur toutes les combinaisons texte/fond
- Version 1.0.0 taguée avec changelog initial
