Design System : le Starter Pack de 4SH

Dans le monde du développement logiciel et de l’agence, la mise en place d’un Design System est souvent perçue comme une tâche titanesque : « Ça coûte cher », « Ça prend trop de temps », « C’est trop rigide pour nos clients variés ».

Pourtant, l’absence de processus standardisé coûte encore plus cher. Chez 4SH, nous avons fait face à ces défis : incohérences visuelles, redondance des tâches et un fossé persistant entre les maquettes Figma et le code. Pour y remédier, nous avons conçu une solution flexible et structurée : un Starter Pack.

Voici comment nous avons transformé notre approche pour garantir cohérence, gain de temps et autonomie des équipes.

Le constat : Pourquoi changer nos méthodes ?

Avant la mise en place de notre solution, nous avons identifié plusieurs problématiques classiques dans la gestion de projet sans Design System unifié :

Incohérences visuelles et fonctionnelles : Des marges aléatoires, des couleurs approximatives ou des interactions qui diffèrent d’un écran à l’autre.
Perte de temps : Les designers recréaient sans cesse les mêmes boutons ou variantes, tandis que les Product Owners perdaient du temps à s’adapter aux fichiers de chaque nouveau projet.
Le fossé Figma / Code : Le fameux « ping-pong » chronophage entre le design et le développement pour ajuster des détails qui devraient être standardisés.

Notre objectif était clair : définir un langage partagé (PO, Designer, Dev) et créer un socle commun capable d’encaisser les évolutions tout en restant souple pour s’adapter à l’identité de chaque client.

La solution : Architecture de notre « Starter Pack »

Nous avons conçu un livrable Figma prêt à l’emploi (un Starter Pack) que nous dupliquons pour chaque nouveau projet. L’architecture repose sur la séparation des responsabilités en trois fichiers distincts.

Le fichier « Composants Métier » (Source de Vérité)

C’est le cœur du système. Il contient tout ce qui définit l’identité et les règles du projet :

Les Variables de base : Espacements, radius, typographie et gestion du responsive (desktop/mobile).
Les Primitives : Les palettes de couleurs brutes (de 50 à 900).
Les Tokens Sémantiques : C’est la clé de voûte de notre système. Au lieu d’appliquer une couleur brute (Primary-500) à un bouton, nous utilisons un token qui donne du contexte (Component-Action-High-Surface-Default). Cela permet de changer l’apparence sans casser la logique.
Les composants métier :
1. On importe un composant neutre (ex: UI-Select) du fichier UI Kit.
2. On l’encapsule dans un Composant Métier (ex: Projet-RoleSelect).
3. On y ajoute la logique métier (labels, items de liste spécifiques).
4. C’est ce composant métier qui est utilisé dans les maquettes.

Le fichier « UI Kit » (Librairie Neutre)

Ce fichier contient des composants d’interface génériques (boutons, champs de saisie, dropdowns) dénués de logique métier. Ils sont pré-branchés sur les tokens sémantiques mais restent neutres.

Avantage : Si un client impose une librairie spécifique (Material Design, Prime, Android), nous pouvons remplacer cet UI Kit tout en gardant notre structure de tokens.

Le fichier « Conception Écran »

C’est ici que le designer assemble les pages finales. La règle d’or est la suivante : on n’utilise jamais directement un composant de l’UI Kit dans un écran.

L’alignement Design et Code

Pour combler le fossé entre Figma et l’intégration, nous ne nous sommes pas arrêtés au design. Étant une agence technique, nous avons créé un package de code synchronisé.

Les développeurs disposent d’une librairie (basée sur PrimeNG ou autre) où les composants sont déjà pré-branchés sur les mêmes tokens que dans Figma.

Si le designer change le radius d’un bouton dans les variables Figma, la modification se répercute logiquement côté code via les tokens.
L’intégration se limite à de la configuration de valeurs plutôt qu’à de la recréation de CSS from scratch.

La méthodologie de mise en place

Ce résultat est le fruit d’un an de travail en temps « hors-production » par une équipe de trois designers experts. Nous avons suivi un processus rigoureux :

Exploration & Audit : État des lieux de l’existant et des outils du marché.
Conception collaborative : Co-construction avec la communauté design de l’agence.
Test & Itération : Déploiement sur des projets fictifs, puis sur de petits projets internes pour recueillir les feedbacks des développeurs avant le grand saut.

Les bénéfices observés

Après plusieurs mois d’utilisation sur des refontes et nouveaux projets, le bilan est très positif :

Gain de temps et maintenance simplifiée : La structure permet des itérations rapides. Si une couleur change, elle se propage partout via les tokens sémantiques.
Autonomie des équipes : Le Starter Pack permet de démarrer un projet immédiatement avec des bases saines.
Synergie renforcée : Le vocabulaire commun et l’alignement des outils ont drastiquement réduit les réunions de calage entre design et tech.
Souplesse créative : Contrairement aux idées reçues, ce cadre ne bride pas la créativité. Il libère le designer des tâches répétitives pour se concentrer sur l’expérience utilisateur, tout en permettant de gérer du multi-marque ou du Dark Mode sans effort.

Pour aller plus loin, sur les bénéfices du Design System, vous pouvez également consulter notre article sur Les avantages d’un Design System dans la conception produit.

Conclusion

Le Design System n’est pas un livrable figé, c’est un organisme vivant. Notre Starter Pack continue d’évoluer (notamment avec les nouveautés de Figma).

Si la mise en place demande un effort initial d’évangélisation et de formation, le retour sur investissement est indiscutable : des projets lancés plus vite, mieux construits, et des équipes plus sereines.

Pour aller plus loin : Visionnez la conférence en replay

Cet article est une synthèse de notre retour d’expérience. Si vous souhaitez voir concrètement comment nous naviguons entre les fichiers Composants Métier et UI Kit, ou observer en direct la manipulation des tokens sémantiques dans Figma, nous vous invitons à regarder la vidéo complète.

Vous y découvrirez les démos techniques, les schémas d’architecture détaillés et les questions-réponses avec le public pour approfondir votre compréhension de notre « Starter Pack ».

👉 https://youtu.be/GYoGdFLpq0A?si=_lkUDOobe8MFDVqE