Accompagner les clients jusqu'à la réalisation dans Figma

Lollypop Design Studio est une agence mondiale de design UI/UX employant plus de 180 designers et ingénieurs répartis en Inde, aux États-Unis, aux Émirats Arabes Unis et au Vietnam. En plus de dix ans, le studio a servi plus de 1 000 clients, remporté plus de 50 récompenses mondiales dans le design et touché plus de deux milliards de personnes, collaborant avec des start-ups et des entreprises du classement Fortune 500 des secteurs de la santé, de la fintech et du e-commerce pour convertir des exigences commerciales complexes en produits numériques évolutifs.

Alors que sa clientèle s'agrandissait et que les projets gagnaient en complexité, il devenait plus difficile de relever le défi consistant à faire avancer les designers, les développeurs et les clients dans la même direction sans perdre la fidélité des clients ni d'élan.

Lorsqu'il a commencé à concevoir une plateforme d'opérations de vente au détail en ligne et multi-région pour un client, le studio eut besoin d'un moyen plus rapide de passer du cahier des charges à la conception sans perdre en alignement. En consolidant son workflow dans Figma (dans FigJam, Figma Design, les outils de développement et Figma Make), Lollypop a réduit les efforts de prototypage de 3 à 4 fois, raccourci les cycles de feedback de plusieurs jours à un jour et diminué les délais de développement front-end de plusieurs mois à quelques semaines.

Le défi : gérer des workflows produit complexes au niveau des équipes et des clients

Avant Figma, les designers, les développeurs et les parties prenantes du client examinaient le travail à travers différents outils et documents, rendant la synchronisation des décisions plus difficile et ralentissant le feedback à des étapes critiques.

Les défis se sont accumulés lorsque le studio a commencé à concevoir une plateforme d'opérations de vente au détail en ligne pour un client opérant dans plusieurs régions. La plateforme devait offrir aux gestionnaires d'entreprise une visibilité sur les performances de vente au détail à tous les points de vente, tandis que les données d'activité sur le terrain informaient en continu la logique et les workflows produit.

Sans un espace de travail partagé, le suivi des progrès s'effectuait souvent à l'aide de feuilles de calcul, de présentations et de fils d'e-mails, ce qui se traduisait par des écarts entre le design, la conception et les besoins de l'entreprise.

La solution : concevoir, valider et livrer dans un workflow connecté

Lollypop a restructuré l'ensemble de son workflow autour d'un environnement unique et connecté. L'équipe a transféré toutes ses données dans Figma – utilisant FigJam pour la découverte et l'alignement, Figma Design pour le prototypage et la validation, les outils de développement pour des transferts plus fluides, et Figma Make pour accélérer la livraison front-end.

Il en a résulté un processus où les décisions prises dans le cadre de la découverte se traduisaient directement dans la conception, permettant aux designers et aux développeurs de passer à la mise en œuvre sans perdre d'actifs ou de contexte en cours de route.

Concevoir un processus de découverte structuré dans FigJam

L'équipe a commencé chaque projet par des ateliers organisés dans FigJam. Ensemble, les designers et les parties prenantes ont cartographié les parcours des détaillants, défini les déclencheurs de performances, modélisé les scénarios d'intervention et fait ressortir les cas particuliers, le tout avant même qu'un seul écran ne soit conçu.

Valider les workflows avec des prototypes Figma natifs

« Auparavant, il nous fallait exporter l'ensemble des 100 écrans au format JPEG, intégrer tous ces JPEG à un autre outil, et coder en dur et réaliser les prototypes » indique Naseer Ahmed, responsable senior du design chez Lollypop.

En intégrant le prototypage directement à Figma, l'équipe a entièrement éliminé cette phase.

Les animations intelligentes ont également rapproché les prototypes de la sensation de produit fini, d'où un feedback plus clair de la part des parties prenantes et moins de malentendus sur le terrain.

Conserver le design et le code sur le même plan de travail avec Dev Mode, Code Connect et le serveur MCP de Figma

Auparavant, Lollypop utilisait différents outils qui obligeaient les designers à gérer des fichiers séparés et les développeurs à naviguer sur plusieurs plateformes pour accéder aux spécifications, aux actifs et aux annotations.

En consolidant dans Figma, l'équipe a remplacé ce workflow par un environnement unique et connecté, où les développeurs pouvaient accéder à des spécifications précises, aux détails des composants et aux actifs directement dans le fichier de design – et les produits conçus pouvaient également revenir dans Figma pour être examinés, ce qui a permis de réduire l'ambiguïté et de maintenir le design et le code synchronisés tout au long du projet.

« Figma a changé la façon dont la conception et le développement restent synchronisés tout au long du projet. Le contexte de conception s'intègre directement à notre workflow de développement, et les produits créés peuvent revenir à Figma pour examen. Cela a réduit les ambiguïtés, minimisé les clarifications répétées et assuré un meilleur alignement entre la conception et la mise en œuvre, ce qui a finalement permis de gagner du temps et d'améliorer l'efficacité de la livraison », a déclaré Sri Chandra Dronavalli, responsable des services logiciels chez Lollypop.

L'équipe a également connecté le serveur MCP de Figma à ses IDE, permettant aux agents IA d'interroger directement les fichiers de design et de générer du code ancré dans le contexte réel du design system plutôt que de procéder à des approximations basées sur des captures d'écran ou des spécifications manuelles. Code Connect étant utilisé pour relier les composants Figma au code de production de l'équipe, les outils d'IA ont réutilisé des éléments exacts de la base de code au lieu d'en définir de nouveaux approximativement, avec pour résultat une précision des composants de 90 % en seulement une ou deux tentatives. Il en a résulté une diminution des retouches et des bugs dus aux incompatibilités de tokens, ainsi qu'une itération plus rapide sur le feedback des utilisateurs.

Accélérer la livraison front-end avec Figma Make

Pour les modules où les systèmes backend étaient déjà en place, Figma Make a facilité l'étape suivante en réduisant la quantité du calque front-end à concevoir de A à Z.

Avec Figma Make, l'équipe a généré une structure front-end initiale à partir des designs approuvés. Les ingénieurs en ont fait leur point de départ, en affinant et en intégrant les systèmes backend plutôt qu'en concevant le calque d'interface à partir de zéro.

Réduire les cycles de feedback avec des fichiers partagés

Le feedback a toujours été un goulot d'étranglement persistant, et exporter des écrans au format PDF puis attendre des jours pour recevoir les réponses signifiait que l'itération avait constamment un temps de retard par rapport aux délais des clients.

« Avant, nous envoyions des présentations, exportions tous les écrans au format JPEG, les convertissions au format PDF, puis attendions quelques jours de recevoir le feedback », déclare Naseer Ahmed.

En partageant des fichiers Figma en direct avec les parties prenantes, l'équipe a pu intégrer elle-même les révisions directement à l'espace de travail de conception. Les discussions et les décisions ont été capturées directement dans le fichier, créant ainsi un enregistrement traçable sans surcharge de documentation supplémentaire.

Perspectives d'avenir : accroître la collaboration et améliorer les workflows

Alors que Lollypop s'implique dans des projets plus complexes et multi-régionaux, Figma devient le calque partagé déterminant comment les équipes collaborent et présentent et livrent leur travail. La consolidation de leur workflow a créé une base que ces dernières étendent désormais à de nouvelles parties de l'entreprise.

« Lorsque nous expédions plus rapidement et mieux, cela a un impact sur notre présence sur le marché. Les workflows et les processus que nous avons développés dans Figma nous ont aidés à concevoir rapidement, à lancer rapidement et à présenter systématiquement notre meilleur travail. « C'est ce qui construit la marque », indique Charan Babu N., responsable senior, marketing global et partenariat, chez Lollypop.

Avec Figma Slides, l'équipe rapproche également les présentations des parties prenantes du processus de conception, aidant ainsi les équipes à s'aligner entre les régions sans changer d'outils. Les équipes utilisent également Figma Buzz pour gérer les modèles et la livraison de contenu, en veillant à ce que le langage et la cohérence de la marque soient conservés dans l'ensemble des campagnes, des formats et des régions sans qu'il soit nécessaire de recréer les actifs de A à Z.