Les prototypes sont les nouvelles fiches techniques
Un nombre croissant de product managers découvrent que la manière la plus rapide d'obtenir de la clarté est de créer. Dans Figma Make, ils testent les hypothèses à l'extrême dès le début, génèrent un élan et mobilisent les équipes autour d'aspects tangibles.
Partager Les prototypes sont les nouvelles fiches techniques
Illustration principale par Raven Jiang
Comme tant de disciplines au sein du processus de développement de produits, le rôle des PM évolue. Au fur et à mesure que les workflows de produits traditionnels disparaissent, les PM se retrouvent à formuler et à prototyper avec leur équipe plutôt qu'à partager des documents statiques à examiner.
En transformant les premières orientations en prototypes interactifs et haute fidélité, vous pouvez explorer plus facilement plusieurs concepts et développer vos idées plus encore. Au lieu de passer du temps à rédiger une documentation qui pourrait ne pas saisir les subtilités d'un produit, les prototypes vous permettent de montrer plutôt que de raconter, en créant des exemples fonctionnels qui illustrent l'intention et suscitent la discussion. Voici comment les équipes de PM de Figma créent des prototypes à toutes les étapes de leurs workflows en utilisant Figma Make et pourquoi les prototypes ont commencé à remplacer totalement les fiches techniques.
Exploration
L'exploration conceptuelle précoce repose traditionnellement sur des maquettes, des diagrammes ou des diaporamas. Parce que ces documents ne peuvent pas montrer un comportement réel, les équipes doivent imaginer l'expérience, ce qui peut ralentir l'alignement. Mais lorsque vous définissez la portée d'un projet, les prototypes peuvent dresser un tableau plus complet et offrir des éléments auxquels vous pouvez réagir.
Définir l'espace du problème
Lorsque trop d'inconnues ou de contraintes sont mal définies, vous pouvez utiliser Figma Make pour obtenir plus de clarté. « J'utilise Figma Make lorsque je pense mal comprendre un espace de problème », déclare Tara Nadella, product manager à Figma. Lorsque son équipe a commencé à explorer des caractéristiques potentielles dans l'utilitaire de vérification des designs (un linter de design system qui met en évidence les valeurs brutes et recommande les bonnes variables), son homologue technique dans l'ingénierie a partagé un prototype de fonctionnalité et des spécifications techniques, enthousiaste à l'idée de donner vie à leurs premières réflexions. L'équipe design avait également commencé à réfléchir aux nuances de la fonctionnalité produit, en suggérant des approches visuelles potentielles. Mais parce que Tara s'efforçait encore de comprendre la nature du problème, elle ne pouvait pas parvenir à une solution. « Chacun commençait à faire à sa manière, et j'ai réalisé que je devais me forger une opinion. Mais je ne savais pas par où commencer. »
Pour trouver ses repères, Tara a ouvert Figma Make et a commencé à créer des invites. Travailler sur des flux et des interactions préliminaires l'a aidée à exprimer les idées et les questions qu'elle devait rapporter à l'équipe, qu'il s'agisse de décider d'utiliser ou non des plugins ou de proposer des designs rendant l'expérience de bout en bout plus intuitive.
Approfondir les idées préliminaires
Lorsque vous façonnez des concepts préliminaires, Figma Make vous permet de générer plusieurs approches en quelques minutes pour voir lesquelles valent la peine d'être poursuivies sérieusement. « Figma Make vous aide à résoudre le problème du plan de travail vierge en vous apportant des éléments à approfondir », explique Tara. Et avec les kits Make, ces explorations restent ancrées dans de vrais composants de produit, produisant des résultats qui ressemblent et s'assimilent plus par leur comportement à quelque chose que vous pourriez réellement être en mesure de livrer. « [Figma Make] abaisse la barrière d'entrée pour la génération d'idées – il n'est pas nécessaire de s'en remettre uniquement à des croquis faits à la main ou à du texte », déclare Summer Wang, product manager à Figma.
Figma Make vous aide à résoudre le problème du plan de travail vierge en vous apportant des éléments à approfondir.
La fonction de copie de design convertit un aperçu Figma Make en calques modifiables dans Figma Design, aidant les équipes à créer des variantes, à explorer plusieurs approches plus rapidement et à ajouter manuellement plus de raffinement visuel. Après avoir mis à jour votre design dans Figma Design, vous pouvez le rattacher à Figma Make pour mettre à jour le prototype.
Récemment, Sean Lee, product manager à Figma, examinait la manière dont l'IA dans Figma Slides pourrait appliquer automatiquement les couleurs de marque d'un utilisateur lorsque son invite indique qu'il crée une présentation de marque. Il s'est tourné vers Figma Make pour créer le prototype de ce à quoi cette expérience pourrait ressembler en pratique. Sean a dupliqué les modèles Figma Slides existants et a demandé à Figma Make de remixer leurs palettes de couleurs en fonction des indices d'invite, simulant ainsi le comportement d'un système automatisé. « Cela nous a aidés à avoir confiance dans l'approche et à la démontrer en action, plutôt que de simplement la décrire », affirme Sean.
Les fonctionnalités d'image alimentées par l'IA dans Figma Make accélèrent l'exploration visuelle. Vous pouvez supprimer les fonds, isoler des objets ou recadrer des images directement sur le plan de travail.
Conseils des PM de Figma
- Ancrez votre prototype dans votre design system : utilisez les kits Make pour connecter les bibliothèques de designs de votre équipe, garantissant ainsi que tout ce que génère Make est ancré dans votre produit réel, et non pas dans un mock-up générique. « Lorsque vous créez des invites, commencez toujours à partir d'une UI de base et joignez des bibliothèques afin de pouvoir simuler votre produit réel », affirme Summer.
- Laissez Figma Make se reposer : laissez votre prototype de côté puis reprenez le travail avec une perspective nouvelle. « Comme beaucoup de mes sessions Figma Make ont tendance à durer plusieurs heures d'affilée, il est utile de s'y replonger par la suite, car vous sortez alors de cette ornière pour y revenir avec des perspectives nouvelles », indique Tara. Cela peut vous aider à remarquer des incohérences mineures ou des détails que vous auriez autrement manqués.
Les modèles Make vous permettent de définir une base de référence de qualité pour l'exploration. Après avoir conçu un prototype soigné, vous pouvez le publier en tant que modèle, avec des directives déterminant ce que vos collègues peuvent changer. Cela garantit que chacun explore à partir de la même base tout en maintenant la cohérence de la marque.
Validation
Il peut être difficile de passer de la génération et de l'exploration d'idées préliminaires à la validation des idées auxquelles il vaut la peine de consacrer des ressources. La clé est d'obtenir l'adhésion des parties prenantes internes et un feedback des utilisateurs – les prototypes évitent le feedback trompeur et confirment que vous êtes sur la bonne voie.
Recueillir le feedback des utilisateurs
Le prototypage avec Figma Make vous permet de mettre rapidement des prototypes fonctionnels entre les mains des utilisateurs, pour obtenir ainsi un feedback rapide et fiable qui garantit que vous abordez les véritables problèmes des utilisateurs. « La qualité des résultats de Figma Make est suffisante pour vous permettre de discuter réellement d'une fonctionnalité ou d'une idée avec les utilisateurs », déclare Ezra Mechaber, product manager à Figma. « Vous n'expédiez pas le code, mais vous consolidez considérablement le cycle créer-mesurer-apprendre. » Et, lorsque Figma Make est connecté à un design system, les prototypes non seulement ont une apparence soignée mais restent aussi fidèles à la marque, et les PM ont ainsi la certitude que ce que les utilisateurs voient reflète le produit réel.
Lors de la préparation du lancement récent de ChatGPT dans Figma Slides, Sean n'avait que deux jours pour recueillir des informations sur les utilisateurs. Il a rapidement utilisé Figma Make pour fusionner l'interface de ChatGPT avec les propres modèles de design de Figma afin de créer un prototype de flux échantillon. En une journée, il disposait d'un prototype fonctionnel prêt pour cinq entretiens utilisateurs. « Les informations ont directement façonné nos critères de qualité pour les évaluations et nous ont donné la confiance nécessaire pour prendre une décision claire quant à la suite à donner aux entretiens », dit-il.
La qualité offerte par Figma Make est suffisamment bonne pour vous permettre de discuter réellement d'une fonctionnalité avec les utilisateurs.
Obtenir l'adhésion
Lorsque vous développez une idée et que tout le monde n'est pas convaincu, un prototype rapide peut vous aider à obtenir le consensus nécessaire en montrant comment il répond aux besoins des utilisateurs. Voir les concepts dans leur contexte aide votre équipe à définir les priorités en toute confiance et même à ramener des idées dormantes dans l'agenda. « [Figma Make] est un outil très puissant pour l'alignement », affirme Tara. « Nous avons souvent des conversations théoriques sur des fonctionnalités théoriques du produit. Mais si vous montrez un visuel, vous mettez tout le monde sur la même longueur d'onde beaucoup plus rapidement. De cette façon, nous parlons tous le même langage et pouvons avancer. »
L'intégration Supabase ajoute des fonctionnalités de backend aux prototypes Figma Make, autorisant des fonctionnalités telles que des écrans de connexion fonctionnels, des formulaires qui enregistrent réellement les données et des applications qui se souviennent des informations d'une session à l'autre. Au lieu de simuler des flux utilisateurs avec des mock-ups cliquables, vous pouvez tester des prototypes qui fonctionnent comme de vraies applications, rendant la recherche utilisateur plus réaliste et montrant comment les fonctionnalités opèrent dans des conditions d'utilisation réelles.
Figma Make est tout aussi utile pour revisiter des idées qui ont été laissées de côté. Les fonctionnalités qui auparavant semblaient trop vagues ou risquées peuvent bénéficier d'une seconde approche quand vous pouvez réaliser un prototype rapide. « Pour les idées en attente, je peux rapidement montrer ce que j'imagine, et ainsi aider à revisiter les idées dans un contexte enrichi », déclare Summer.
Conseils des PM de Figma :
- N'hésitez pas à partager un prototype inachevé : considérez les prototypes comme des éléments de base de la conversation et non comme des livrables finaux. « La plus grande erreur est de penser que votre projet Make doit être « prêt » avant d'être partagé. Utilisez-le tôt et souvent, même pour des idées confuses et inachevées », affirme Sean.
- Ajoutez des interactions réalistes : assurez-vous que l'UI reflète votre produit actuel aussi fidèlement que possible. « Demandez à Make de créer des pages liées, des boutons et d'autres interactions pour donner une impression de réel », dit Summer. Cela aide les utilisateurs et les parties prenantes à interagir avec le prototype comme s'il s'agissait du produit réel.
Prise de décision
Les décisions liées au produit reposent souvent sur des détails difficiles à imaginer tant que vous ne pouvez pas réellement interagir avec eux. À quelle vitesse un état de chargement doit-il apparaître ? Une mise en page est-elle vraiment cohérente lorsque vous cliquez dessus ? Communiquer ces nuances est essentiel lors de l'évaluation de multiples approches.
Corriger les détails
« Entre les équipes produit, de design et d'ingénierie, le défi quant à la façon de décrire et d'articuler des comportements de produits spécifiques est toujours difficile », déclare Holly Li, product manager à Figma. « Figma Make a énormément synthétisé et simplifié ce problème pour nous. » Au lieu de demander aux équipes d'imaginer comment différentes options pourraient fonctionner, vous pouvez leur présenter des prototypes fonctionnels à comparer. « Les PM opèrent constamment dans cet espace, entre décrire une idée de produit et la montrer », déclare Ezra. « Lorsqu'une personne apporte un prototype fonctionnel dans un atelier clé, la discussion change complètement. Vous pouvez immédiatement discerner ce qui fonctionne dans la pratique par rapport à ce qui ne sonne bien qu'en théorie. »
Les PM opèrent constamment dans cet espace, entre décrire une idée de produit et la montrer.
Par exemple, lorsque l'équipe de Holly évaluait différents comportements de défilement pour une fonctionnalité, elle a trouvé difficile de saisir par des mots les compromis de chaque option. « Je sais que c'est quelque chose qui importe à tout le monde car cela a un impact considérable sur la qualité de l'expérience, mais c'est presque impossible à décrire, » dit-elle. Plutôt que d'expliquer les nuances de vitesse, de direction et de timing pour chaque approche, Holly et son équipe ont utilisé Figma Make pour créer un prototype de chaque version. En voyant les options en œuvre côte à côte, il leur a été plus facile de comprendre comment elles opèrent en contexte et de choisir celle qui semblait appropriée au cas d'utilisation en question.
Partager le contexte
Une fois qu'un prototype est créé, il devient un artefact partagé pour recueillir les avis de l'équipe et affiner les idées. Mais la manière dont vous partagez ce prototype est importante. « Il ne s'agit pas seulement de l'artefact, mais aussi d'y apporter un récit », déclare Tara. « Parfois, se contenter de déposer un lien vers votre création Figma Make dans une discussion peut rendre les choses compliquées. » Au lieu de cela, de nombreux PM enregistrent des vidéos Loom où ils font une démonstration de leur prototype, ou le présentent en direct lors de réunions.
Par exemple, pour préciser l'orientation une nouvelle page d'accueil et d'un fil d'activité, Summer a utilisé Figma Make afin de créer le prototype de plusieurs variations de ses concepts principaux et a intégré ces variations dans FigJam pour les partager avec son équipe. En disposant des captures d'écran de chaque flux et en annotant la manière dont les interactions pourraient fonctionner, elle a créé un récit visuel clair qui a aidé les parties prenantes à évaluer les compromis et a fournir un feedback ciblé.
Figma Make offre aux équipes des moyens flexibles de partager des prototypes en toute sécurité. Vous pouvez publier un projet Make en interne (restreint aux personnes connectées à leur organisation Figma) ou ajouter une protection par mot de passe pour des examens externes, ce qui facilite la collaboration et la collecte de feedback sans exposer les prototypes au web ouvert.
Une fois que vous disposez de tous les éléments appropriés, maintenir les prototypes en phase avec les décisions et le feedback qui évoluent est un autre défi. Pour rationaliser ce processus, vous pouvez utiliser les connecteurs Make afin de synchroniser le contexte à partir d'outils comme Coda, Notion ou Linear directement dans vos prototypes. Cela garantit une boucle de feedback toujours étroite et que chacun travaille à partir de la même source de vérité sans avoir à quitter son workflow.
Faire de la place pour l'optimisation
Lorsque vous utilisez Figma Make comme playground pour les prototypes, vous avez déjà travaillé sur de nombreux détails critiques (flux, logique et cas particuliers) avant qu'une fonctionnalité n'atteigne la production. Ce qui suit est une optimisation, où l'accent passe du métier au polissage des détails. « Figma Make libère du temps pour la partie amusante de la gestion de produit : prendre des décisions basées sur les goûts et prendre des décisions de workflow en ayant beaucoup plus confiance », indique Holly.
Figma Make libère du temps pour la partie amusante de la gestion de produit : prendre des décisions basées sur les goûts et prendre des décisions de workflow en ayant beaucoup plus confiance.
Alors que les prototypes se rapprochent de la production, les équipes peuvent connecter des packages npm React à Figma Make pour garantir la cohérence avec leur base de code en direct. Cela permet aux ingénieurs de travailler avec de vrais composants dès le début et aide les product managers à voir comment les fonctionnalités se comporteront une fois mises en œuvre, ce qui réduit l'écart entre le prototype et la production.
Ce point de départ plus solide transforme également le transfert. « Les spécifications communiquées à nos équipes d'ingénierie consistent souvent en un fichier Figma Make accompagné de designs », déclare Holly. Les ingénieurs peuvent utiliser le prototype Figma Make comme référence pour comprendre comment les interactions doivent fonctionner, ou transférer le code directement vers GitHub comme base pour un développement continu. Ils peuvent également utiliser le serveur MCP de Figma pour intégrer le contexte de design (composants, variables et structure) dans leur environnement de codage. En se connectant aux fichiers Figma utilisés par les PM, MCP aide les ingénieurs à générer du code qui correspond à l'intention du prototype.
Conseils des PM de Figma :
- Sujets d'atelier avec ChatGPT : utilisez-le pour vous aider à structurer vos idées en invites claires. « Parfois, je veux juste une corbeille à réflexion et demander "Comment décomposeriez-vous cela ?" », affirme Tara.
- Soyez rigoureuxet précis : ajoutez autant de détails que possible, même s'ils sont divisés en plusieurs petites invites. « Vous devez être précis et apporter quelques explications », indique Holly. « De cette façon, vous et le modèle êtes sur la même longueur d'onde par rapport à vos objectifs. »
Alors que le développement de produit continue à évoluer parallèlement à l'IA, les prototypes offrent un moyen plus rapide et plus clair d'explorer des idées et d'aligner votre équipe. Dans ce nouvel environnement, les PM qui réussiront seront ceux qui embrasseront l'itération en temps réel, franchissant de manière fluide les limites traditionnelles des rôles.
