Avec sa culture dynamique de l'ingénierie, Juspay soutient des millions de transactions à travers des écosystèmes complexes de marchands et de consommateurs. Avec des dizaines de tableaux de bord, des plateformes modulaires et des exigences de personnalisation étendues, le design devait évoluer d'un effort manuel vers un système évolutif aligné sur les développeurs.

En adoptant Figma, Juspay a transformé le design, passant de workflows cloisonnés à un système intégré prêt pour les développeurs. Des fonctionnalités telles que la création de branche, le Dev Mode et Code Connect permettent désormais à Juspay de mieux collaborer, de livrer plus rapidement et de s'adapter de manière cohérente à travers les équipes et les revendeurs, tout en multipliant par cinq la vitesse du design.

Combler l'écart entre designers et développeurs

Avant Figma, les workflows de design de Juspay reposaient sur Sketch, Flinto et un feedback fourni directement par les utilisateurs. Les designers travaillaient souvent seuls ou se regroupaient autour d'écrans, échangeant des fichiers – un processus collaboratif mais dépendant de l'emplacement. Les développeurs avaient également une visibilité limitée sur l'intention du design, ce qui rendait la mise en œuvre plus lente et plus sujette aux erreurs et empêchait de respecter tous les délais.

« Nous passions 9 à 10 heures par jour en réunions, et le partage d'écran avec Sketch ralentissait nos appareils. Cette friction a clairement montré que nous avions besoin d'un meilleur mode de collaboration ; nous sommes donc passés à Figma presque du jour au lendemain », se souvient Samit Barai, directeur du design chez Juspay.

Faire évoluer les design systems en profondeur et en contrôlant les processus

Le premier design system de Juspay a émergé après l'adoption de Figma. Utilisant d'abord des styles pour construire ce design system, l'équipe est passée à des variables pour les couleurs, la typographie, la taille et le thème et pour assurer une meilleure conformité avec la syntaxe du code d'ingénierie.

Ce changement était essentiel, étant donné l'environnement multi-marques et multi-tableaux de bord de Juspay, où les bases devaient s'adapter harmonieusement à travers différentes équipes et différents partenaires. Aujourd'hui, avec la création de thèmes basée sur des variables, les designers peuvent appliquer des thèmes à des tableaux de bord pour les marchands et les partenaires revendeurs en quelques clics.

Garantir la précision à grande échelle

À mesure que la surface des produits de Juspay s'est agrandie, l'équipe a créé des plugins privés et des outils internes avec les API de Figma pour combler l'écart existant entre les workflows de design et les workflows de développement et valider la mise en œuvre. Un plugin de couverture du design system scanne les fichiers avant leur transfert, signalant les éléments non créés à partir de composants. « Ce plugin aide à trouver quels éléments n'utilisent pas le design system et lesquels doivent être transformés en composants. C'est à la fois un outil de contrôle qualité et un moteur d'opportunités », explique Deepanshu.

Les données résultantes se déversent dans un tableau de bord interne qui surveille des métriques au niveau des fichiers et des utilisateurs, telles que la réutilisation des composants, les dérogations au design system et les tendances d'adoption du design system.

Afin de renforcer l'intégrité visuelle pour l'ingénierie, Juspay a également développé une extension Chrome qui signale les demandes d'extraction non alignées sur les designs validés. Combinés avec les analyses de la bibliothèque de Figma, ces outils préviennent les incohérences, gardent les développeurs synchronisés et assurent l'intégrité du design.

Ces améliorations se sont traduites par un impact mesurable :

• Multiplication par 5 de la vitesse du design
• Augmentation de 173 % du taux de réutilisation des composants sur 90 jours
• Diminution de 17 % du détachement des composants
• Couverture moyenne de 71 % du design system à travers les fichiers scannés
• 12 équipes internes utilisant activement des bibliothèques partagées

Gouvernance flexible

Malgré un fonctionnement à grande échelle, Juspay ne croit pas à la limitation de la créativité. Les designers sont encouragés à proposer de nouveaux modèles et variantes via un workflow Slack vers Jira, examiné par l'équipe des design systems. Les changements approuvés passent par la création de branche dans Figma et une révision par les pairs, et sont ensuite fusionnés dans le fichier maître avec des journaux de modifications clairs.

Au-delà des tableaux de bord, le design system de Juspay reflète également l'architecture des composants dans le code. Des composants modulaires, tels que les cellules de tableau et les wrappers, peuvent être assemblés de différentes manières selon le cas d'utilisation. « Au lieu de reconcevoir chaque instance, nous assemblons désormais les interfaces comme des blocs de construction, ce qui a pour effet de multiplier par 5 la vitesse du design », explique Deepanshu.

FigJam pour la critique, l'idéation et l'inclusion

L'impact de Figma va au-delà des composants et du code et a également remodelé la culture de design de Juspay. Chaque projet inclut désormais une session « visualiser les choses et dire », une critique structurée entre pairs où les membres de l'équipe évaluent les designs selon quatre critères : ce qu'ils aiment, ce qui ne fonctionne pas, ce qui pourrait être amélioré et ce qui pourrait manquer – le tout dans FigJam.

Les chefs de produit et les ingénieurs participent également à l'idéation tôt avec des notes et des wireframes pour partager des idées et donner leur avis. Cette approche ouverte et transversale a fait du design une véritable responsabilité partagée dans toute l'organisation.

Perspectives sur l'avenir : Dev Mode, serveur MCP, Code Connect et automatisation

Avec un design system arrivé à maturité en place, Juspay expérimente de nouvelles façons d'automatiser les workflows design vers code.

Code Connect est maintenant intégré à son référentiel de design system, permettant aux développeurs de voir des extraits de code en temps réel alignés sur la production directement dans le Dev Mode. À ce jour, 34 composants ont été connectés à l'aide de Code Connect.

Juspay exploite également le serveur MCP de Dev Mode de Figma pour générer du code HTML/CCS et TypeScript utilisable, dans le but de passer du concept au code prêt pour la production avec un minimum d'étapes manuelles.

Bien qu'en phase d'expérimentation précoce, Juspay estime que le serveur MCP de Figma et Code Connect pourraient permettre des gains majeurs d'efficacité, incluant :

• Des temps de développement 4 à 5 fois plus rapides : mise en œuvre passant de 45-60 minutes à 8-12 minutes par écran
• Moins d'étapes nécessaires : workflows passant de 15 à 4 étapes manuelles
• Cohérence accrue : incohérences visuelles passant de 15-20 % à 3-5 %

Pour s'assurer que les développeurs demeurent synchronisés à chaque changement, l'équipe pilote également un plugin qui détecte les mises à jour à travers les versions du design system et génère des demandes d'extraction GitHub automatiquement, fermant la boucle entre les mises à jour du design et la visibilité du code.

Concevoir pour l'évolutivité, créer pour le futur

De la nécessité à l'innovation, le parcours de Juspay avec Figma montre comment une plateforme de design collaboratif peut permettre non seulement la cohérence de l'interface utilisateur, mais aussi une transformation culturelle et des workflows. Avec Figma comme fondation, Juspay crée plus rapidement, collabore de manière plus intelligente et évolue en toute confiance – une variable, une branche et un plugin à la fois.