4 nouvelles façons de passer d'une idée à un produit avec les outils d'IA
Les outils d'IA transforment la manière dont les équipes conçoivent des produits – du début jusqu’à la production finale. Voici un aperçu de ce changement à travers l'exemple de quatre entreprises.
Partager 4 nouvelles façons de passer d'une idée à un produit avec les outils d'IA
Illustration principale par Lina Müller
Les équipes produit s'adaptent rapidement aux nouveaux modes de travail à l'ère de l'IA. Ils créent des prototypes dès le début, procèdent à des tests dans le code avant de concevoir, explorent à une échelle inédite et livrent avec le contexte du design system qui se perdait dans le cadre du transfert. Des créateurs de produits chez FloQast, Merkle, Affirm et Accor nous ont expliqué à quoi cela ressemble concrètement.
En savoir plus sur la manière de trouver le workflow adapté à votre équipe – et comment équilibrer rapidité et intention.
1. Tester des contraintes dans le code
Tester une idée par rapport à des contraintes complexes (par exemple, des flux à plusieurs étapes où une action déclenche la suivante ou des interfaces qui se comportent différemment en fonction des données sous-jacentes) nécessitait auparavant un investissement important en développeurs. Aujourd'hui, grâce aux outils de codage par IA, davantage de membres d'une équipe produit peuvent concevoir et tester rapidement ces types d'interactions avant de choisir une approche. Il en résulte un nouveau workflow. Un créateur de produit peut concevoir un prototype fonctionnel en codant, puis le transférer vers le plan de travail Figma en utilisant Codex vers Figma pour avoir la vision d'ensemble et l'optimiser. Sur cette base, si une tâche supplémentaire doit être réalisée dans le code, il peut revenir en arrière via MCP avec le contexte de conception intact.
Comment FloQast a testé un workflow complexe dans le code
FloQast développe des logiciels qui aident les équipes comptables à gérer la complexité du monde réel – des tâches qui ne peuvent avancer qu'une fois d'autres tâches terminées, des enregistrements qui doivent correspondre sur des plateformes telles qu'un processeur de paiement et un compte bancaire et des validations à l'arrêt tant que toutes les autres données n'ont pas été examinées.
Le défi
Récemment, l'équipe a dû repenser l'un de ses workflows standard, dans lequel les utilisateurs devaient naviguer entre plusieurs pages simplement pour localiser une seule divergence. Par exemple, un comptable identifiant un problème sur un compte devait peut-être accéder à une page pour voir le problème, naviguer vers une autre page pour l'examiner, puis revenir à la première page pour le résoudre. L'équipe voulait consolider toutes ces données sur une seule page où les utilisateurs pourraient voir leurs tâches, suivre les opérations à l'arrêt et agir sur toutes les données sans quitter l'écran.
Un prototype précoce était prometteur, mais trop d'étapes interconnectées (chacune dépendant de données réelles et d'une logique) figuraient sur la page pour que l'équipe puisse l'évaluer à partir d'un mock-up seul.
Le déclic
Benjamin Ellis, responsable UX chez FloQast, a créé un prototype fonctionnel dans un outil de codage IA avec un backend simulé et des données réalistes basées sur les workflows d'un client réel. Le prototype basé sur du code a permis à l'équipe de parcourir de vrais scénarios où la réalisation d'une étape déclenchait la suivante et de voir si la page entière était cohérente. Elle a immédiatement repéré des flux qui semblaient corrects en surface mais qui se révélaient défaillants dans la pratique – le type de problème qui ne se produit que lorsque vous travaillez avec des données et une logique réelles.
L'impact
Au moment de choisir une approche, l'équipe de Benjamin Ellis et le designer l'avaient déjà testée en condition réelle dans le code selon des scénarios réels et avaient détecté les types de problèmes d'interaction qu'un fichier de design seul n'aurait pas révélés. Cela signifiait moins de surprises par la suite et une plus grande confiance dans les produits conçus.
Essayez ceci quand :
- L'UI se comporte différemment selon des conditions que vous ne pouvez pas évaluer dans un mock-up (par exemple, des autorisations utilisateur ou des flux à plusieurs étapes où une action affecte la suivante).
- Vous devez apporter une correction mineure et il est plus rapide de la modifier directement dans le code que de passer par la conception à chaque fois.
- Un designer et un développeur doivent réfléchir ensemble à une expérience complexe et disposer d'un produit opérationnel facilite cette réflexion.
2. Explorer avec l'IA sur le plan de travail
Les équipes ont toujours exploré sur le plan de travail, mais l'IA a changé la portée de cette exploration. Avec l'agent IA de Figma, un designer peut générer des variantes de mise en page, rédiger un contenu réaliste et signaler les lacunes dans son travail sans quitter le fichier, toutes ces tâches étant ancrées dans son design system. Lorsque l'équipe est prête à avancer dans une direction, elle peut utiliser Figma Make pour en faire un prototype interactif, et MCP pour intégrer le contexte du design dans le code en vue de la production.
Comment Merkle s'est d'abord élargi avant d'aller en profondeur
Easton Thomas, directeur associé de la création UX chez Merkle, repensait la façon dont son client dans les télécommunications organisait et affichait ses produits sur son site web – un défi d'architecture de l'information qui nécessitait d'explorer une quantité d'approches différentes avant de trouver la bonne.
Quand utiliser l'agent d'IA de Figma sur le plan de travail :
Au moment d'explorer : générez des variantes de mise en page ou essayez différentes approches de contenu sans quitter le fichier. Au lieu de créer manuellement cinq approches, demandez à Figma et réagissez à sa proposition.
Après avoir intégré le code au plan de travail : demandez à Figma de vérifier la version par rapport à votre design system introduit dans le code.
Au moment d'affiner une approche : demandez à Figma d'appliquer votre design system à l'ensemble du fichier. Il peut également écrire du contenu de substitut réaliste afin que les parties prenantes puissent donner un feedback plus utile.
Au moment de choisir une approche : demandez à Figma de procéder à un test instinctif de l'approche choisie. Ils peuvent signaler les éléments manquants ou indiquer des modèles qui ne correspondent pas au reste de l'expérience.
Le défi
Le travail nécessitait une exploration approfondie. Easton Thomas devait tester une quantité de mises en page et d'approches de contenu différentes pour pouvoir se sentir confiant dans une approche et, avec un contenu limité sur le site existant, il ne pouvait pas facilement établir si l'une d'entre d'elles fonctionnerait avec de vrais produits sur la page.
Le déclic
Easton Thomas a commencé sur le plan de travail, concevant sept approches de mise en page approximatives pour examiner différentes approches. Il a ensuite demandé à l'agent IA de Figma de générer 10 variantes de l'une de ses mises en page, puis encore 10, jusqu'à en générer environ 50. À ce stade, l'agent avait épuisé toutes les combinaisons possibles qu'il pouvait trouver, et Easton Thomas pouvait retenir les idées les plus fortes et continuer à concevoir sur cette base.
Une fois une approche définie, il a continué à utiliser l'agent de Figma pour affiner les détails. Il l'a utilisé pour :
- Générer un texte factice réaliste pour que la page ne paraisse pas abstraite aux parties prenantes
- Rédiger des annotations de spécifications développeur directement dans ses cartes d'annotation
- Examiner le travail terminé et signaler les lacunes (par exemple, les considérations d'accessibilité des lecteurs d'écran) qu'il pourrait avoir manquées
De là, il est passé à Figma Make pour créer le prototype de la page de recherche avec de vraies interactions, générant tous les états différents des éléments tels que les menus de filtre afin de voir le comportement réel de la page. Il a réintégré ces écrans au plan de travail en vue du transfert aux développeurs.
L'impact
Le travail de production qui aurait pris des jours a été réduit à quelques heures. Mais le véritable avantage a été la profondeur d'exploration rendue possible par l'agent IA de Figma. Au lieu de s'engager dans l'une des sept mises en page en espérant que ce soit la bonne, Easton Thomas a pu épuiser toutes les options (50 variantes) avant de prendre une décision. Au moment où le travail parvenait aux développeurs, il l'avait soumis à davantage de cycles d'exploration et avait identifié des lacunes qu'il n'aurait peut-être pas eu le temps de rechercher autrement – et pouvait ainsi s'engager en toute confiance dans une approche.
Essayez ceci quand :
- Vous concevez une nouvelle surface et devez examiner une quantité d'approches avant de vous engager.
- Vous devez générer et tester rapidement plusieurs états et cas particuliers d'un flux complexe.
- Vous souhaitez spécifier des interactions détaillées ancrées dans votre design system avant le transfert aux développeurs.
3. Commencer par un prototype
Des outils tels que Figma Make permettent aux équipes de créer un prototype fonctionnel en quelques heures, avant que quiconque n'ait rédigé une exigence. Au lieu de commencer par une spécification en espérant que les parties prenantes puissent imaginer la vision, les équipes conçoivent d'abord un produit réel puis laissent ensuite ce produit prendre forme. De là, elles peuvent transférer le prototype vers le plan de travail afin de l'affiner dans une présentation pour examen par les parties prenantes ou dans le code via MCP.
Comment Accor a utilisé Figma Make pour fédérer autour d’une nouvelle vision
Accor est un groupe hôtelier mondial détenant des dizaines de marques d'hôtels. Récemment, son équipe design a examiné comment l'IA pourrait améliorer l'expérience web de l'une de ses marques de luxe.
Le défi
Le défi a été de déterminer à quoi cette expérience IA devait concrètement ressembler. Une approche générique (par exemple, intégrer un chatbot au site) n'allait pas refléter l'identité de la marque ni répondre aux attentes de ses clients. Justine Grave, designer en chef de la marque chez Accor, devait proposer un produit captant la tonalité émotionnelle et la personnalité qui rendent la marque reconnaissable.
Le moment clé
Dans Figma, Justine Grave a conçu le prototype de quelque chose qu'elle n'aurait pas eu le temps de créer à la main : une page web qui se réorganise automatiquement en fonction de ce que l'utilisateur tape. Recherchez « golf », et la page se réorganise pour mettre en avant des propriétés avec terrains de golf, des sorties sélectionnées et des expériences pertinentes. Make a géré les micro-interactions et les transitions, tandis que le serveur MCP de Figma a maintenu toutes les données connectées au design system de la marque. En quelques jours, Justine Grave a obtenu un prototype fonctionnel suffisamment ambitieux pour montrer aux dirigeants ce qui était possible – et suffisamment concret pour entamer une véritable conversation sur ce qu'il fallait concevoir ensuite.
L'impact
Justine Grave et son équipe présentent maintenant le prototype aux parties prenantes des services de la marque et du marketing, leur offrant quelque chose de concret sur lequel réagir et s'aligner, au lieu d'un diaporama.
Essayez ceci quand :
- Vous devez fédérer les parties prenantes sur une vision qui n'existe pas encore.
- L'idée est trop subtile pour être communiquée via un document ou un diaporama
- Vous voulez savoir si une idée est réaliste avant de vous investir dans la conception et l'ingénierie.
4. Tout miser sur votre design system
Les kits Make font pour Figma Make ce que MCP fait pour le code généré par IA. Lorsque vous intégrez votre design system à Figma Make, les prototypes utilisent vos composants et styles réels dès le premier prompt.
Les pièces jointes Make vous permettent d'ajouter un contexte spécifique au projet (par exemple, des données, des lignes directrices de la marque ou des captures d'écran) afin que le résultat reflète le fonctionnement réel de votre produit.
Au moment de passer du design au code, il est important que la mise en œuvre s'appuie sur votre design system réel plutôt que sur des modèles génériques. Il s'agissait auparavant d'un processus manuel, les développeurs se référant aux spécifications et recréant les composants à la main. Aujourd'hui, les équipes peuvent utiliser MCP pour transmettre leurs composants, leurs tokens et leur structure de mise en page réels directement dans l'environnement de codage, afin que les outils de codage IA génèrent à partir du système réel dès le départ.
Comment Affirm a préservé le contexte de conception du plan de travail au code
Affirm conçoit des produits financiers qui permettent aux clients de fractionner leurs achats en échéances au moment du paiement. L'expérience de paiement se déroule sur ordinateur de bureau, web mobile, Android et iOS, et assurer la cohérence de ces expériences est un défi constant.
Le défi
L'équipe voulait ajouter des badges (par exemple, signaler quelle option offre un intérêt à 0 % ou laquelle serait remboursée le plus vite) à ses options de paiement pour permettre aux clients de trouver plus rapidement l'option qui leur convient. Mais il y avait beaucoup de combinaisons à examiner : quel badge montrer à quel client, à quel moment, sur quelle page de paiement. Chaque variante devait respecter le design system sur toutes ces interfaces, et même un simple changement de l'idée à la production prenait environ six semaines.
Le déclic
Un PM a prototypé les variantes de badge dans Figma Make – passant de l'idée au prototype fonctionnel en deux jours au lieu de six semaines habituellement. Les designers ont affiné l'approche gagnante sur le plan de travail, et une fois l'équipe prête à transférer ce design en production, ils ont chargé les artefacts de design sur le serveur MCP de Figma et ont connecté celui-ci à Cursor. MCP a intégré les composants, les tokens et la structure de la mise en page directement à l'environnement de codage, où un agent d'IA a généré la mise en œuvre front-end. Les développeurs s'en sont servi comme point de départ et ont conçu du code en production reflétant déjà les designs au lieu de les réinterpréter intégralement.
L'impact
Le prototypage à lui seul est passé de six semaines à quelques jours. Mais, plus important encore, parce que MCP a conservé le contexte de conception tout au long du processus, les développeurs n'ont pas eu à réinterpréter les designs ou à recréer intégralement les composants. Le produit livré a reflété l'intention des designers.
Essayez ceci quand :
- Vous mettez un design en production et souhaitez que la mise en œuvre demeure fidèle à votre design system.
- Vous devez maintenir la cohérence de plusieurs surfaces ou plateformes par rapport au même design.
- Votre équipe design system déploie des changements et souhaite que ces mises à jour se déploient automatiquement vers l'environnement de codage de chaque ingénieur afin que le nouveau code reflète le design system actuel dès le départ.
Aujourd'hui, les équipes qui livrent de superbes produits ne sont pas prisonnières d'un seul outil ou d'une seule séquence – elles choisissent par où commencer en fonction de la question à laquelle elles doivent répondre et avancent d'un environnement à l'autre au fur et à mesure que le travail évolue. En savoir plus sur les nouveaux workflows donnant forme aux produits à l'ère de l'IA.
