Skip to content

À propos

Structurer pour accélérer : la refonte du workflow Design-to-Code de Solution Digitale

Comment faire évoluer un environnement Figma fonctionnel vers un système de composants plus flexible, mieux aligné avec le builder WordPress de l’agence, et réduire concrètement le temps passé sur chaque projet.

 

Thèmes
Figma
Design system

Entreprise
Solution Digitale SA

Période
septembre 2025 – avril 2026

Type de contrat
CDD 8 mois

Le contexte

Un workflow qui fonctionnait, mais qui pouvait aller plus loin

Solution Digitale est une agence digitale qui accompagne ses clients sur un builder WordPress propriétaire. La template Figma existante permettait de livrer des maquettes claires et de travailler efficacement au quotidien. Mais à mesure que le volume de projets augmentait, certaines limites structurelles se faisaient sentir : les modifications répétées d’un même élément sur plusieurs pages, les ajustements nécessaires entre la maquette et le rendu final, ou encore le temps de configuration à chaque nouveau projet.

Le challenge n’était pas de repartir de zéro, mais d’introduire une couche de logique systémique avec des variables, des composants flexibles et du responsive natif, pour que Figma accompagne le builder plutôt que de le subir.

« L’enjeu n’était pas de changer ce qui marchait, mais de donner à l’équipe des outils qui s’adaptent à eux plutôt que l’inverse. »

La solution technique

Quatre axes pour gagner en fluidité et en cohérence

Variables & Tokens

Les couleurs, espacements et typographies sont définis une seule fois, puis référencés partout. Changer la couleur principale d'un site se fait en un seul endroit et la mise à jour se propage automatiquement. L'architecture anticipe également un éventuel mode sombre.

Composants intelligents

Grâce aux propriétés de composants et aux Instance Swaps, un même composant peut générer de nombreuses variations visuelles. Le designer explore des options rapidement, sans dupliquer ni reconstruire à chaque fois.

Responsive natif avec Auto Layout

Chaque module est conçu avec l'auto Layout : les composants s'adaptent à la largeur de leur conteneur. Chaque section est déclinée explicitement pour desktop et mobile, ce qui réduit les allers-retours lors de l'intégration.

Design structuré et exploitable

Les composants sont organisés pour être facilement réutilisables d'un projet à l'autre. Designers et développeurs s'appuient sur la même base, ce qui réduit les décisions au cas par cas et les interprétations divergentes.

Les modules peuvent être modifié grace au propriétés déclaré dans dans les composants
Les styles et les couleurs sont des variables qui peuvent être modifiés de façon centralisé

Avant / Après

Ce que le système a changé concrètement

Couleurs et styles

Avant
Valeurs renseignées composant par composant, sans lien entre elles.

Après
Tokens partagés : une seule modification suffit pour tout mettre à jour.

Retours clients

Avant
Ajustements répétés sur chaque écran concerné.

Après
Changement propagé automatiquement via les composants et variables.

Création d'écrans

Avant
Construction manuelle à chaque nouvelle page et ajustement des espaces des sections à la main.

Après
Assemblage avec des composants prêts à l'emploi avec l'alignement et l'espacement automatique.

Setup technique

Avant
Configuration des styles globaux à reprendre à chaque projet.

Après
Configuration par défaut des style calquée sur le template Figma lors du setup d'un nouveau site.

Responsive

Avant
Versions mobile traitées lors de l'intégration sur wordpress.

Après
Auto Layout natif : desktop et mobile pensés ensemble dès la conception.

Relation dev

Avant
Quelques ajustements d'interprétation nécessaires à l'intégration.

Après
Les modules sont designés dans Figma avant d'être intégrés dans le builder wordpress, ce qui réduit les allers-retours.

L'Impact Business

Des gains qui se cumulent à chaque projet

L’effet le plus intéressant d’un design system structuré n’est pas immédiat, il est cumulatif. Chaque projet bénéficie des décisions prises sur le précédent. Les gains s’amplifient à mesure que la bibliothèque mûrit et que les équipes s’approprient les composants.

-40%

Temps de création initiale
Le designer assemble, il ne reconstruit plus.

−70%

Temps sur les retours clients Modifications globales propagées automatiquement.

+30min

Économisées par an
Sur 50 sites/an, −30 min de setup par site.

Sur le plan de la qualité, l’alignement plus étroit entre Figma et le builder réduit la dérive visuelle d’un projet à l’autre. Les espacements et les couleurs suivent les mêmes variables et la cohérence devient un résultat du système plutôt qu’un effort constant.

Pour les designers, le gain est aussi créatif : moins de temps sur les tâches répétitives, plus d’espace pour l’exploration. Les Instance Swaps permettent de tester plusieurs directions visuelles en quelques secondes, ce qui encourage une approche plus itérative.

Conclusion

Figma comme point de départ, pas comme livrable final

Ce qui a changé le plus profondément, c’est la place de Figma dans le workflow. Plutôt que de documenter ce que le builder produit, les maquettes deviennent le point de départ : chaque nouveau module est conçu dans Figma, validé, puis codé. Cela donne à l’équipe design un rôle plus en amont dans les décisions produit.

La collaboration avec les développeurs a été centrale dans ce processus, notamment pour que la configuration par défaut de chaque nouveau site soit directement calquée sur le template Figma. C’est ce type d’alignement, construit ensemble, qui donne au système sa valeur opérationnelle réelle.

Ce que ce projet illustre

Introduire de la structure dans un workflow existant, c’est d’abord écouter comment l’équipe travaille, puis proposer des outils qui amplifient ce qui fonctionne déjà. Chez Solution Digitale, ce travail a permis de gagner en fluidité, en cohérence, et de libérer du temps pour ce qui compte vraiment : la qualité du design.