Agence design system : du fichier Figma au composant React en production
VOID propose aux banques, aux assureurs et aux grands comptes, au Maroc et en France, de concevoir, construire et maintenir leur design system. L'offre couvre la bibliothèque Figma, les composants React documentés dans Storybook, les tokens et leur maintenance en TMA. Design et développement front avancent dans les mêmes sprints, de l'audit au run.
Pour les entreprises françaises, nous intervenons en nearshore depuis le Maroc, en français.
Pour qui
À qui s'adresse cette offre
Directeur digital d'un grand compte français
Plusieurs produits, une charte qui dérive d'une application à l'autre : vous cherchez une équipe design et front en nearshore, dans la durée.
DSI ou CDO d'une banque ou d'un assureur marocain
Site, espaces clients, application, filiales : vous voulez une cohérence de groupe et l'accessibilité intégrée.
CTO ou lead front
Votre bibliothèque React a grandi sans règles : vous voulez des tokens propres, des composants testés et une documentation que lisent aussi vos assistants de code.
Diagnostic
Les signes qu'il vous faut un design system
- Chaque nouvel écran relance les mêmes débats sur les boutons, les couleurs et les espacements.
- Les maquettes Figma et le code en production ne se ressemblent plus.
- Plusieurs marques, filiales ou applications ont chacune leur propre style.
- L'accessibilité se corrige page par page, après la mise en ligne.
- Les outils d'IA de l'équipe génèrent des écrans qui ne respectent pas votre charte.
Si vous n'avez qu'un seul produit et une petite équipe, un kit de composants suffit souvent. Nous le disons dès l'audit.
Livrables
Ce que nous livrons
L'audit du design system
Inventaire des écrans en production (variantes de boutons, de couleurs, de typographies), audit des fichiers Figma et du code front (doublons, styles détachés), contrôle d'accessibilité des composants et entretiens avec les équipes. Vous recevez un rapport, un backlog priorisé et une feuille de route. Durée : [À FOURNIR : durée type de l'audit de l'existant, en semaines].
Les design tokens
Les tokens sont les décisions de design écrites sous forme de variables : couleurs, typographies, espacements. Trois niveaux (primitifs, sémantiques, composants), modes clair et sombre, variantes par marque ou par filiale.
Ils suivent le format du Design Tokens Community Group, un groupe communautaire hébergé par le W3C, dont la première version stable (2025.10) date du 28 octobre 2025. Ce n'est pas un standard du W3C, mais Figma, Tokens Studio et Style Dictionary le prennent en charge. Les tokens deviennent ensuite variables CSS, thème Tailwind et, si besoin, ressources iOS et Android.
La bibliothèque de composants Figma et React
Dans Figma : composants avec variantes, variables et auto layout. Dans le code : composants React et TypeScript documentés dans Storybook, testés (interactions, rendu visuel) et publiés en paquet versionné, intégrés dans vos applications Next.js ou vos sites Drupal. Voir notre expertise React et Next.js.
L'accessibilité dans chaque composant
Les critères des WCAG 2.2 niveau AA se traitent dans le composant : focus visible, contrastes, navigation au clavier, taille des cibles, ARIA. Une correction profite à toutes les pages qui l'utilisent. Nous ne parlons de conformité qu'après un audit des pages : voir notre guide pratique WCAG.
Niveau appliqué : [À FOURNIR : niveau WCAG appliqué aux composants livrés et certifications accessibilité de l'équipe (RGAA, IAAP)].
La documentation et la gouvernance
Site de documentation, règles d'usage (à faire, à éviter), processus de contribution, versioning sémantique, politique de dépréciation et indicateurs d'adoption.
IA
Un design system que vos agents IA savent utiliser
Des tokens et une documentation lisibles par une machine
Sans règles lisibles par une machine, les assistants de code inventent couleurs et composants. Avec des tokens au format DTCG, des noms sémantiques et des règles écrites en phrases, l'agent sait quel composant utiliser, avec quelles valeurs, et quand ne pas l'utiliser.
Figma et Storybook reliés aux assistants de code
Le serveur MCP de Figma transmet aux agents les variables, les composants et la mise en page ; Code Connect relie chaque composant Figma à son code. Le serveur MCP de Storybook, en préversion, leur ouvre la documentation et les tests. La compatibilité avec votre framework se vérifie au démarrage.
Les composants propres aux interfaces IA
États de génération, réponse de secours, passage de relais à un humain, indicateurs de confiance. Et la mention qui signale à l'utilisateur qu'il échange avec une IA, sauf si c'est évident : l'article 50 du règlement européen sur l'IA l'impose depuis le 2 août 2026, selon la Commission européenne. La conception de ces parcours relève de notre offre Harnessed UX.
L'agent propose, l'équipe valide
Les contributions générées passent par les mêmes revues et tests que celles des humains. C'est le principe du harness engineering, que nous appliquons à notre agent de reporting de TMA : aucun rapport ne part chez un client sans validation humaine.
Projet VOID : [À FOURNIR : projet ou POC où un agent IA consomme un design system (MCP Figma ou Storybook, fichier de règles) et ce qui a été mesuré].
Méthode
Notre démarche, de l'audit au run
Audit de l'existant
Inventaire d'interface, fichiers Figma, code front, entretiens avec les équipes.Cadrage
Périmètre de la première version, composants priorisés selon leur usage réel.Fondations
Tokens et premiers composants, dans Figma et en React, documentés dans Storybook.Produit pilote
Déploiement sur un premier produit, mesure de l'adoption, ajustements.Extension et run
Les autres produits suivent, puis la maintenance continue.
Sprints de deux semaines, avec des démonstrations régulières.
Run
Après la livraison : le run en mode TMA
Sans responsable, un design system se dégrade vite. Nous le maintenons comme une application : backlog partagé, releases régulières, corrections, nouveaux composants, montées de version.
Le run s'inscrit dans notre offre de tierce maintenance applicative, avec des SLA définis par niveau de criticité, mesurés et reportés. La bibliothèque est garantie 30 jours contre les vices majeurs après la livraison (CGV). Engagements propres au design system : [À FOURNIR : cadence de release, délais de prise en charge et de correction par criticité].
France
Vous êtes en France : travailler avec notre équipe en nearshore
VOID existe depuis 2005. Nos équipes de production sont à Casablanca et à Agadir, et nous avons un bureau de représentation à Paris. Les échanges se font en français. Le décalage avec Paris est de 1 h en hiver et de 2 h en été : le Maroc est revenu à l'heure GMT le 20 septembre 2026 (décret n° 2.26.530), tandis que la France applique l'heure d'été européenne.
Ateliers sur site : [À FOURNIR : conditions et fréquence des ateliers sur site en France]. Protection des données : [À FOURNIR : clauses du contrat (RGPD, loi 09-08, clauses contractuelles types) validées par le juridique]. Taux journaliers : [À FOURNIR : TJM HT en euros (UI designer, développeur React, lead design system)]. Équipe : [À FOURNIR : effectif, séniorité et lieu des designers et développeurs front].
Pour le cadre général, voir notre offre nearshore au Maroc.
Référence
Référence : le hub digital d'Attijariwafa bank
VOID est partenaire d'Attijariwafa bank depuis 2014. Nous avons conçu et réalisé le hub digital du groupe, que nous faisons évoluer et maintenons depuis 2018 : approche Design Thinking, navigation organisée par besoins, accès aux filiales, aux marchés régionaux et aux services du groupe.
Périmètre : [À FOURNIR : périmètre du design system du hub (composants, tokens, thèmes, sites couverts, outils), rôle de VOID, années, accord de citation, visuel anonymisé]. Deuxième référence : [À FOURNIR : autre design system livré (client citable, année, périmètre), idéalement français]. Résultat mesuré : [À FOURNIR : résultat mesuré sur un design system livré (temps de production d'un écran, variantes supprimées ou taux d'adoption)].
Toutes nos références : réalisations.
Budget
Formats d'engagement et budget
Audit au forfait
Inventaire, audit Figma et code, contrôle d'accessibilité, feuille de route.
Prix : [À FOURNIR : prix HT de l'audit du design system, en euros et en dirhams].
Construction
Au forfait sur un périmètre défini, ou en squad dédiée design et front.
Prix : [À FOURNIR : fourchette au forfait et coût mensuel d'une squad, en euros et en dirhams].
Run
En abonnement ou dans un contrat de TMA existant.
Prix : [À FOURNIR : forfait mensuel de run, en euros et en dirhams].
Nous chiffrons précisément après l'audit. Pour un premier avis sur une bibliothèque existante, une session Validation Expert de 2 heures coûte 2 800 MAD au prix web (prix normal 3 500 MAD), soit environ 250 €, avec une restitution sous 5 jours ouvrés. Nous revendons aussi les licences Figma Organization, payables en dirhams.
FAQ
Questions fréquentes
Qu'est-ce qu'un design system et en quoi diffère-t-il d'une charte graphique ou d'un UI kit ?
Une charte graphique fixe l'identité : logo, couleurs, typographies. Un UI kit rassemble des maquettes, souvent dans Figma seulement. Un design system va jusqu'au code : tokens, composants testés, règles d'usage, documentation et gouvernance.
Combien de temps faut-il pour créer un design system ?
Cela dépend du nombre de produits, de l'existant et des plateformes ; le calendrier ferme est donné après l'audit. Repères : [À FOURNIR : durées types d'un audit et d'une première version sur un produit pilote, en semaines].
Combien coûte un design system ?
Le budget dépend du nombre de produits et de marques, de l'existant, des plateformes, de la documentation et du run. Fourchettes : [À FOURNIR : prix HT de l'audit, de la construction et du run mensuel, en euros et en dirhams].
Peut-on partir de nos fichiers Figma et de nos composants React actuels ?
Oui, c'est le cas le plus courant : l'audit recense l'existant et les écarts entre Figma et le code, puis nous gardons ce qui fonctionne.
Un design system peut-il servir plusieurs marques ou filiales ?
Oui. Chaque marque ou filiale a son jeu de tokens et les composants restent communs : un changement de couleur se fait à un seul endroit.
Quels outils utilisez-vous : Figma, Storybook, React, Drupal ?
Figma pour la bibliothèque de design, des tokens au format DTCG, React et TypeScript pour les composants, Storybook pour la documentation et les tests. Sous Drupal, les mêmes tokens alimentent le thème.
Comment rendre un design system utilisable par des agents IA ?
Des tokens au format DTCG avec des noms explicites, une documentation qui dit quand utiliser chaque composant, et un accès via les serveurs MCP de Figma et de Storybook. Les propositions de l'agent passent ensuite par les mêmes revues et tests que le code de l'équipe.
Qui maintient le design system après la livraison ?
Votre équipe, après une passation, ou VOID dans un contrat de TMA : corrections, nouveaux composants, montées de version. Engagements : [À FOURNIR : cadence de release et délais de correction par criticité].
Un design system aide-t-il à respecter l'accessibilité (RGAA, WCAG 2.2, European Accessibility Act) ?
Oui : focus, contrastes, clavier et ARIA se traitent une fois, dans le composant. La conformité se prouve toutefois page par page, par un audit : WCAG 2.2 AA comme cible, EN 301 549 pour l'European Accessibility Act, RGAA en France pour les organismes publics et les entreprises dont le chiffre d'affaires réalisé en France dépasse 250 millions d'euros.
Travaillez-vous avec des entreprises françaises, et comment se passe la collaboration à distance ?
Oui. Nos équipes de production, à Casablanca et à Agadir, travaillent en français, avec 1 h de décalage avec Paris en hiver et 2 h en été ; VOID a un bureau de représentation à Paris. Ateliers sur site : [À FOURNIR : conditions des ateliers sur site en France].
Sources
Sources et lectures
À lire aussi : notre guide complet du design system, notre agence UX/UI et notre guide Drupal comme serveur MCP.
Sources officielles citées
- Design Tokens Community Group : Design Tokens Format Module 2025.10 (hors processus de standardisation du W3C, en anglais)
- Design Tokens Community Group : première version stable (28 octobre 2025)
- W3C : Web Content Accessibility Guidelines (WCAG) 2.2 (version du 12 décembre 2024)
- EUR-Lex : directive (UE) 2019/882, European Accessibility Act
- DINUM : champ d'application des obligations d'accessibilité (RGAA)
- EUR-Lex : règlement (UE) 2024/1689 sur l'intelligence artificielle
- Commission européenne : obligations de transparence de l'article 50 (en anglais)
- Bulletin officiel n° 7521 : décret n° 2.26.530 sur l'heure légale (PDF, en arabe)
- EUR-Lex : directive 2000/84/CE sur l'heure d'été
Parlons de votre design system
Décrivez vos produits, vos marques et l'état de vos fichiers Figma et de votre code. Nous vous répondons sous 24 heures ouvrées.