Ce que vous saurez faire
Un design system est à votre marque ce que la cuisine centrale est à une chaîne de restaurants : un référentiel unique qui garantit la cohérence, accélère la production et réduit les erreurs. Pour une PME sénégalaise qui jongle entre un site web, une application mobile, des supports print, des publications réseaux sociaux et parfois une plateforme e-commerce, maintenir une identité visuelle cohérente devient un casse-tête. Chaque nouveau prestataire réinvente les couleurs, les boutons, les typographies. Au terme de ce tutoriel, vous saurez construire un design system minimal mais robuste, le documenter, le partager avec vos équipes internes et vos prestataires freelance à Dakar ou Thiès, et le faire vivre dans le temps. Vous passerez d’un design artisanal à une production industrielle, sans perdre votre âme créative.
Étape 1 — Comprendre les bénéfices concrets
Un design system permet de produire un nouvel écran en 2 heures au lieu de 2 jours. Il réduit les incohérences : fini le bouton bleu sur le site et violet sur l’appli. Il facilite l’onboarding d’un nouveau designer ou développeur : il consulte la documentation et devient productif en quelques heures. Pour une PME qui fait appel à des freelances ponctuels, c’est un gain énorme. Il préserve aussi la valeur de votre marque : chaque point de contact renforce votre identité au lieu de la diluer. Sur 3 ans, une étude Forrester estime le retour sur investissement à 300 % pour les entreprises qui adoptent un design system mature.
Étape 2 — Réaliser l’inventaire visuel
Avant de construire, mesurez l’existant. Prenez des captures de tous vos supports : page d’accueil du site, 5 pages internes, application mobile, flyer, post Facebook, signature email, facture. Collez tout sur un grand tableau (Figma ou Miro). Vous constaterez probablement 8 bleus différents, 4 familles typographiques, 15 styles de boutons. Cet audit est souvent douloureux mais nécessaire. Il justifie l’investissement dans un design system auprès de votre direction.
Étape 3 — Définir les fondations : couleurs
Commencez par la palette. Distinguez trois catégories : couleurs primaires (votre identité, 1 à 2 teintes), couleurs secondaires (accents, 2 à 3 teintes), couleurs fonctionnelles (succès vert, alerte orange, erreur rouge, information bleu). Pour chaque couleur, définissez 5 à 9 variantes de luminosité (ex : Orange-50, Orange-100, Orange-500, Orange-900). Notez les codes hexadécimaux, RGB, CMJN et Pantone. Indiquez les usages : Orange-500 pour les boutons d’action principaux, Orange-100 pour les fonds d’alerte.
Étape 4 — Définir les fondations : typographie
Choisissez une ou deux familles maximum. Une police pour les titres (souvent avec du caractère, ex : Poppins, Montserrat), une pour le corps de texte (lisible, ex : Inter, Source Sans). Définissez une échelle typographique : H1 à 48px, H2 à 32px, H3 à 24px, corps à 16px, caption à 14px, small à 12px. Précisez les graisses autorisées (Regular, Medium, Bold) et les hauteurs de ligne (1,5 pour le corps, 1,2 pour les titres). Pour le Sénégal, vérifiez que vos polices supportent bien les caractères accentués et les diacritiques wolof si vous publiez dans cette langue.
Étape 5 — Définir les espacements
Un système d’espacement cohérent repose sur une unité de base (souvent 4 ou 8 pixels). Tous vos espacements sont des multiples : 4, 8, 12, 16, 24, 32, 48, 64, 96. Nommez-les : xs, s, m, l, xl, 2xl. Utilisez ces valeurs partout : marges, paddings, gaps entre éléments. Cela donne un rythme visuel harmonieux. Interdisez à votre équipe d’utiliser des valeurs « exotiques » comme 13px ou 27px. La rigueur paie.
Étape 6 — Créer la grille et les breakpoints
Définissez votre grille responsive. Classiquement : 4 colonnes sur mobile (moins de 768px), 8 sur tablette (768-1024px), 12 sur desktop (au-delà). Précisez les largeurs maximales (ex : 1200px pour le contenu principal) et les marges latérales (16px sur mobile, 32px sur desktop). Au Sénégal, 80 % du trafic web vient du mobile : votre design system doit être mobile-first.
Étape 7 — Construire les composants de base
Les atomes de votre interface : boutons, champs de saisie, icônes, badges, avatars. Pour les boutons, définissez 3 variantes (primaire, secondaire, tertiaire) et 3 tailles (small, medium, large), avec 4 états chacun (normal, hover, focus, disabled). Pour les champs de saisie, prévoyez les états : vide, rempli, en erreur, désactivé. Documentez chaque composant avec un exemple visuel, son code (HTML/CSS ou React), ses règles d’usage.
Étape 8 — Construire les composants composés
Les molécules et organismes : cartes produit, formulaires complets, barres de navigation, menus, modals, toasts. Assemblez-les à partir de vos atomes. Par exemple, une carte produit contient une image, un titre (H3), un prix, un bouton primaire. Standardisez : toutes les cartes produit de votre site e-commerce doivent suivre le même patron. Pour un marchand de pagnes à Dakar, cela signifie que toutes ses fiches produit auront la même structure, que ce soit pour un bogolan du Mali ou un tissu seigne seigne du Sénégal.
Étape 9 — Documenter les règles d’usage
Un composant sans règles d’usage est un composant mal utilisé. Pour chaque élément, précisez : quand l’utiliser, quand ne pas l’utiliser, les combinaisons interdites, les variantes selon le contexte. Exemple : « Le bouton primaire sert à l’action principale de la page. Un seul par écran. Ne jamais placer deux boutons primaires côte à côte. » Ajoutez des exemples « à faire » et « à ne pas faire » avec des captures annotées.
Étape 10 — Choisir l’outil de diffusion
Figma est aujourd’hui le standard : créez une bibliothèque partagée, publiez vos composants en tant que « components » réutilisables. Pour la documentation, utilisez Zeroheight, Notion, ou un site statique type Docusaurus. L’important : un point d’entrée unique, accessible par URL, que vos équipes et prestataires peuvent consulter 24/7. Évitez les PDF figés : un design system vit, il doit évoluer. Budget type pour une PME : Figma Professional à environ 9 000 FCFA par utilisateur et par mois, Notion gratuit pour les petits volumes.
Étape 11 — Former les utilisateurs
Un design system non compris reste lettre morte. Organisez une session de lancement de 2 heures avec tous les concernés : designers, développeurs, chef de projet, marketing, éventuellement la direction. Présentez la philosophie, les principes, les composants clés. Faites un atelier pratique : chacun doit recréer une page de votre site en utilisant uniquement les composants du système. Filmez la session pour les futurs nouveaux arrivants.
Étape 12 — Mettre en place la gouvernance
Qui peut modifier le design system ? Qui valide l’ajout d’un nouveau composant ? Un design system sans gouvernance dérive en 6 mois. Nommez un « design system manager » (souvent le lead designer). Mettez en place un processus : toute demande d’ajout ou de modification passe par un formulaire, est discutée en comité mensuel, validée ou refusée avec motivation. Versionnez votre système (v1.0, v1.1, v2.0) et communiquez les changements via un changelog.
Étape 13 — Mesurer l’adoption
Définissez des indicateurs : taux de couverture (pourcentage des écrans construits à partir des composants du système), temps moyen de production d’une nouvelle page, nombre de tickets « incohérence visuelle » remontés par le support. Analysez ces chiffres tous les trimestres. Si l’adoption stagne, identifiez les freins : manque de composants ? documentation obscure ? résistance au changement ? Agissez en conséquence.
Étape 14 — Faire vivre et enrichir
Un design system n’est jamais terminé. Il évolue avec votre produit, votre marque, les tendances. Prévoyez une revue trimestrielle : quels composants manquent ? lesquels sont obsolètes ? les retours utilisateurs remontent-ils des problèmes récurrents ? Investissez régulièrement (5 à 10 % du temps de votre équipe design) dans la maintenance. Célébrez les succès : « grâce au nouveau composant Formulaire, nous avons gagné 30 % de temps sur le dernier projet ». Cela motive les équipes et justifie l’investissement continu auprès de la direction.
Erreurs à éviter
Vouloir tout construire d’un coup. Un design system « big bang » de 200 composants est rarement terminé et jamais adopté. Commencez par 10 composants critiques, livrez-les, apprenez, puis enrichissez.
Copier-coller un design system existant. Material Design (Google) ou Ant Design sont d’excellentes références, mais ne correspondent pas à votre marque. Inspirez-vous de la méthode, pas du résultat.
Négliger la documentation. Un composant sans documentation est un composant qui sera mal utilisé ou réinventé. La règle : si ce n’est pas documenté, ça n’existe pas.
Ignorer les développeurs. Un design system qui ne se traduit pas en code exploitable reste un joli document Figma. Impliquez les développeurs dès le jour 1.
Figer le système. Un design system rigide devient un frein. Prévoyez des mécanismes d’évolution, de demande d’exception justifiée, de dérogation encadrée.
Ne pas adapter au contexte local. Vos composants doivent gérer les nombres en FCFA (pas de décimales, séparateur espace), les numéros de téléphone au format +221, les adresses avec mention de quartier typique du Sénégal.
Oublier l’accessibilité. Chaque composant doit être conforme aux critères WCAG. Un design system qui produit des interfaces inaccessibles amplifie le problème au lieu de le résoudre.
Checklist finale
- Inventaire visuel complet de l’existant réalisé
- Palette de couleurs définie (primaires, secondaires, fonctionnelles) avec variantes
- Échelle typographique documentée (polices, tailles, graisses, hauteurs de ligne)
- Système d’espacement cohérent (unité de base, multiples nommés)
- Grille responsive et breakpoints spécifiés
- Composants atomiques construits (boutons, inputs, icônes, badges)
- Composants composés construits (cartes, formulaires, navigation)
- Règles d’usage documentées pour chaque composant
- Bibliothèque Figma publiée et partagée
- Site de documentation accessible via une URL unique
- Session de formation équipe réalisée, replay disponible
- Gouvernance mise en place (manager, comité, processus)
- Indicateurs d’adoption définis et mesurés trimestriellement
- Revue trimestrielle planifiée dans les calendriers
- Changelog tenu à jour, versions communiquées aux utilisateurs
