Figma : la rapidité pour plus de 700 millions d'utilisateurs

Résumé

PhonePe est l'une des principales plateformes fintech de l'Inde, à laquelle plus de 700 millions d'utilisateurs et plus de 50 millions de commerçants font confiance.

À mesure que l'entreprise se développait, son équipe design réduite devait agir plus rapidement, rester alignée sur les produits et maintenir une expérience utilisateur cohérente. En faisant de Figma le « système central vivant » de son design et de son développement, PhonePe a rationalisé les workflows transversaux, accéléré les transferts et fait évoluer ses design systems en toute confiance à travers Figma Design, Dev Mode et Figma MCP.

Aujourd'hui, les équipes passent du concept à 50 % de clarté en seulement quelques heures. Avec trois design systems en place et un succès précoce au niveau des outils pilotés par l'IA, PhonePe évolue de manière plus intelligente sans compromettre la rapidité ou la qualité.

Défi : évoluer rapidement et de manière cohérente

Alors que le groupe PhonePe lançait de nouvelles activités telles que Share.Market et l'Indus Appstore, la collaboration devenait plus complexe. Avec plus d'équipes et plus de 700 millions d'utilisateurs, maintenir l'alignement du design, de la stratégie et du développement s'avérait de plus en plus complexe.

L'équipe avait besoin d'une méthode plus connectée et évolutive pour maintenir la cohérence sans sacrifier la rapidité. Centraliser la conception et la documentation en un seul endroit devint essentiel pour permettre aux équipes de travailler plus efficacement et de consacrer moins de temps à rechercher des informations.

La collaboration et la cohérence étaient depuis longtemps des aspects que l'équipe design s'efforçait d'améliorer. À mesure que l'entreprise a gagné en maturité, des processus plus clairs et des modes de travail standardisés ont commencé à prendre forme, aidant les équipes à assurer la cohérence entre les produits.

Solution : trois design systems, un langage commun

Pour soutenir son écosystème en pleine croissance, PhonePe gère trois design systems. Le design system le plus mûr pilote son application grand public phare, tandis que deux design systems plus récents soutiennent les activités telles que Share.Market, offrant plus de possibilités d'expérimentation à mesure que ces applications évoluent.

Figma est devenu l'espace unique et partagé où résident les design systems de PhonePe, réunissant des composants, des tokens, des bibliothèques d'icônes et de la documentation. Toutes les données se trouvant au même endroit, les équipes de design et d'ingénierie peuvent rester alignées, avancer plus rapidement et maintenir la qualité à un niveau élevé.

Malgré leurs différences, les trois design systems reposent sur une fondation commune de Figma : des processus structurés, des tokens de conception partagés et une documentation évolutive. Cette cohérence offre aux équipes un langage commun, ce qui accélère les transferts, réduit les incertitudes et permet à chacun de concevoir de superbes produits.

Le feedback et les revues se font pour l'essentiel directement dans Figma via des commentaires et des liens partagés, pour une communication rapide et contextuelle. Dans le même temps, les fonctionnalités de Figma Entreprise telles que l'authentification SSO, le contrôle d'accès et l'historique des versions maintiennent le système sécurisé et à jour, permettant à chacun d'avancer de manière claire et en toute confiance.

FigJam en tant que « bloc-notes » collaboratif et outil de documentation

L'équipe de PhonePe est entièrement investie dans FigJam. Celui-ci est aujourd'hui l'espace incontournable où ont lieu les premières réflexions des équipes design, ingénierie, produit, commerciales, marketing et créativité. Les données qui auparavant se trouvaient sur des notes ou alimentaient les discussions de couloir figurent désormais dans FigJam, ce qui facilite la capture, le partage et le développement des idées dans toute l'entreprise.

FigJam permet à l'équipe de suivre le parcours complet d'une fonctionnalité, de son concept initial à son exécution finale. Au fil du temps, il est devenu un élément clé du workflow de documentation de PhonePe. « Du point de vue des opérations de design, ça a été une réussite », déclare Sindhu Shivaprasad, responsable du contenu et de la communication design chez PhonePe. « Collectivement, nous avons essayé d'améliorer considérablement la culture de la documentation autant que possible. »

Il agit également comme un « bloc-notes virtuel » – assez simple pour que chacun puisse l'utiliser, mais suffisamment puissant pour donner forme à de grandes idées. Même les non-designers tels que les product managers peuvent s'en servir pour cartographier des flux ou esquisser des concepts préliminaires, tandis que les designers et les développeurs l'utilisent pour rédiger l'architecture de l'information, concevoir des cartes de site et partager des itérations rapides. Cette accessibilité aide les équipes à explorer, à cocréer et à affiner des idées ensemble plus rapidement.

Clarté, visibilité et productivité avec Dev Mode

Dev Mode de Figma est aujourd'hui la pierre angulaire du workflow conception-développement simplifié de PhonePe. Bien que les designers aient toujours disposé d'un contexte complet pour travailler sur les composants, Dev Mode offre aux développeurs la même visibilité – avec en plus les outils nécessaires pour inspecter, tester et comprendre les composants en temps réel. Il crée un espace pratique où les ingénieurs peuvent examiner le comportement des choses sans allers-retours avec l'équipe design.

Au lieu de s'en remettre à des transferts répétés ou à des réunions de clarification, les équipes peuvent interagir directement avec les fichiers, tester des variantes et concevoir en toute confiance. La prise en charge des plugins simplifie encore les transferts. Les développeurs exécutent désormais un plugin de design system personnalisé conçu par l'équipe pour rendre les spécifications plus claires et plus cohérentes.

« Avant Dev Mode, nous ne pouvions qu'observer les différentes variantes utilisées par l'équipe design pour effectuer le rendu du composant lui-même. « Ça a été une énorme amélioration pour nous », déclare Sachin Kumar, ingénieur logiciel et membre de l'équipe d'excellence des applications chez PhonePe.

Dev Mode a également permis de limiter les réunions et de rendre la collaboration plus fluide. « Au lieu d'organiser plusieurs réunions entre le transfert et le post-transfert pour comprendre la fonctionnalité d'un composant, vous pouvez simplement obtenir les informations voulues par vous-même. Je pense que c'est l'une des fonctionnalités les plus puissantes de Dev Mode », déclare Rahul Gonsalves, responsable du design chez PhonePe.

Les développeurs peuvent accéder à des extraits de code spécifiques à la plateforme pour Android et iOS, ce qui leur permet de traduire le design en code prêt pour la production plus efficacement. La prise en charge des plugins et la possibilité de signaler les composants détachés ajoutent un autre niveau de contrôle et aident à protéger l'intégrité du système au sein des équipes.

Intégrer l'IA au workflow avec Figma MCP

À mesure que PhonePe se développe, l'équipe examine comment l'IA peut soutenir une livraison plus rapide sans compromettre la qualité ou la cohérence. Avec pour priorités absolues la rapidité et la stabilité du code, elle s'est concentrée sur l'amélioration de l'intégration du contexte de conception dans le développement.

Un pas en avant essentiel a été l'adoption de Figma MCP, qui permet à PhonePe de connecter en toute sécurité des agents de codage IA à Figma et de leur donner un accès structuré aux fichiers de design, aux composants et aux métadonnées du système. En utilisant des prompts standardisés et des fichiers d'instructions, l'équipe peut intégrer un contexte de conception précis à ses workflows d'IA, ce qui permet une génération de code cohérente avec ses normes existantes et réduit considérablement les délais de développement.

Au-delà de la génération de code, Figma MCP aide également à rationaliser la création et la mise à jour des composants. L'équipe l'utilise pour soutenir l'ajout de nouveaux composants à ses design systems, les équipes pilotes préalables connaissant déjà un succès sur des écrans plus simples à mesure que l'approche gagne en maturité.

Pour mieux préserver la qualité lors du transfert, PhonePe a créé un plugin de linting personnalisé permettant de détecter les problèmes avant le transfert. Le plugin révèle des détails tels que les tokens appliqués et les métadonnées des composants, ce qui aide les développeurs à vérifier si les fichiers sont prêts à être mis en œuvre.

« Nous voulons utiliser cela et améliorer notre plugin », déclare Sachin Kumar. « Donc, en plus des fonctionnalités que nous obtenons déjà de Figma, nous ajouterons certaines des nôtres pour rendre notre design system encore plus robuste. »

Livrer des produits plus rapidement avec Figma

Avec Figma, la visibilité partagée réduit les frictions et permet des transferts deux fois plus rapides. Les équipes passent souvent du concept à 50 % de clarté en seulement quelques heures. Et parce que la collaboration va au-delà de la conception, les partenaires commerciaux et les équipes non-design peuvent rapidement examiner les prototypes et donner leur feedback. Les impliquer plus tôt – surtout lors des phases de faible fidélité – a permis de réduire les risques de coûts irrécupérables liés à une conception allant dans la mauvaise direction.

« Permettre à d'autres équipes de parcourir les écrans dans Figma si elles en ont besoin ou de visualiser un design clair et soigné met tout le monde sur la même longueur d'onde plus rapidement », affirme Sindhu Shivaprasad.

Pour l'avenir, l'équipe prévoit d'utiliser Figma Make afin de transformer les idées initiales en prototypes pouvant être testés – surtout lorsque les contraintes de temps risquent autrement de freiner l'exploration. Avec Make, PhonePe vise à tester plus d'idées, à examiner plus d'options et à livrer de meilleurs produits, plus rapidement.