4 façons pour les équipes de design de tracer de nouveaux territoires avec Figma Make

Avec Figma Make, les designers trouvent de nouvelles façons de passer de l'imagination à la réalité. Qu'il s'agisse d'obtenir une adhésion, d'explorer des approches divergentes ou de collaborer avec des partenaires transversaux, l'outil de conversion d'invite en application aide les designers à valider et à communiquer leurs idées, tout en restant cohérents avec les design systems établis. Ils peuvent ainsi consacrer moins de temps à concevoir des mises en page redondantes et à connecter des flèches, et plus de temps au goût, à la stratégie et à la vision. Pour susciter des idées pour vos propres workflows, voici comment les équipes du design de Maven Clinic, Pendo, ServiceNow et LinkedIn utilisent Figma Make en tant que partenaire du design.

1. Réintégrez vos idées à la feuille de route

Plateforme de soins de santé pour les femmes et les familles, Maven Clinic aide ses utilisateurs à naviguer parmi toutes les informations, telles que les traitements pour la fertilité, la grossesse, la parentalité et la pédiatrie, ainsi que la ménopause et la santé en milieu de vie. Début 2024, Maven Clinic a lancé le programme d'avantages Maven Managed Benefit sponsorisé par l'employeur, qui relie les membres à un réseau fermé de cliniques de fertilité approuvées. Pour respecter des délais serrés, l'équipe a dû retarder le lancement de certaines fonctionnalités, y compris un localisateur de cliniques de fertilité basé sur une carte. Au moment de réexaminer l'idée, la responsable du design produit de Maven, Loric Avanessian, savait qu'elle aurait besoin de plus qu'un mock-up pour susciter un soutien, et s'est donc tournée vers Figma Make.

« Le superpouvoir d'un designer est de pouvoir transformer des idées et des conversations en un élément tangible pour enthousiasmer les utilisateurs sur de nouvelles fonctionnalités », déclare Loric, qui a intégré certains de ses premiers designs dans Figma Make pour créer un prototype haute fidélité avec lequel les utilisateurs pouvaient réellement interagir. « Ce prototype avait l'air de faire partie de notre produit, et ça semblait réel », poursuit-elle. « Le prototype a été largement partagé sur Slack, notre PDG a fait un commentaire à son sujet, et j'ai pu le réintégrer facilement à notre feuille de route alors qu'il aurait facilement pu ne pas figurer parmi les fonctionnalités auxquelles donner priorité cette année. »

Loric a envoyé le prototype à un autre designer, qui a itéré sur le design avant de le réintégrer dans Figma Make. Ce prototype leur a permis d'obtenir une plus forte adhésion transversale et un feedback plus rapide et plus ciblé. « Cela nous a aidés à cibler les micro-interactions que vous ne remarquez que lorsque vous avez commencé à concevoir », dit Loric. « Parce que nous avons commencé à 45 % au lieu de zéro, nous avons pu concevoir, développer, tester et lancer le produit minimum viable du localisateur de clinique en moins de quatre sprints, alors que celui-ci traînait dans notre backlog depuis deux ans. »

Avec Figma Make, dit Loric, le rôle du designer passe de l'exécution au goût, à la stratégie et à la vision. Elle décrit un projet récent où Figma Make a précédé la fiche technique produit (PRD) ; en fait, l'équipe a rédigé les exigences selon ce qui fonctionnait et ce qui manquait dans le prototype initial. « Figma Make vous aide à résoudre le problème du plan de travail vierge en vous apportant des éléments sur lesquels improviser », dit-elle. « Il vous aide également à tester une quantité d'idées très rapidement, puis à revenir à vos compétences de designer de base pour affiner et ajouter des finitions. »

2. Prenez le temps d'explorer l'inconnu

Dans certains cas, un produit complètement nouveau présente des précédents clairs sur lesquels s'appuyer et dans d'autres cas, le plan n'est pas si clair. L'entreprise de plateforme IA ServiceNow relevait de ces autres cas lorsqu'elle a entrepris de concevoir un tableau de bord donnant aux clients un aperçu du retour sur investissement de différents agents IA. « Figma Make a été formidable dans ce domaine car beaucoup d'inconnues sont incroyablement difficiles à examiner », déclare Guy Meyer, concepteur de produit senior chez ServiceNow.

De plus, différentes équipes chez ServiceNow avaient des idées divergentes quant à l'approche de la hiérarchie de l'information sur le tableau de bord. « Figma Make m'a donné une carte pour comprendre, d'une certaine manière, ce que les utilisateurs auraient besoin de voir sur un tableau de bord », dit Guy. « En cinq minutes, je pouvais valider certaines de nos idées. » Bien que comprendre ce qui fonctionnait fut instructif, voir où le prototype initial faisait défaut le fut encore plus. Par exemple, la matrice des agents IA que Figma Make présentait n'évoluait pas, dit Guy, car elle constituait une grille de trop grande taille : « C'était une bonne solution dans l'immédiat, la plupart des entreprises entamant à peine leur parcours d'IA, mais nous essayons de jeter les bases du futur, où les clients utiliseront peut-être des milliers de systèmes. Nous avons donc commencé à rechercher des solutions plus personnalisées. »

La facilité avec laquelle les utilisateurs peuvent parvenir à de nouvelles idées à l'aide d'invites a « démocratisé le design », indique Guy. « N'importe qui peut créer sa propre version à l'aide d'invites, et nous pouvons choisir les éléments qui nous plaisent. » Cela élimine également l'ego et l'engagement de temps qui vous lient à une idée. » Alors que l'équipe aurait pris des semaines pour concevoir et obtenir un feedback sur différentes approches, Figma Make resserre la boucle à deux ou trois jours. « Figma Make est l'outil qui aligne les partenaires transversaux car il peut rapidement exécuter des artefacts pour que nous puissions en discuter », affirme Guy. « Cela permet aux designers de passer de la simple exécution à l'amélioration de la qualité de ce que l'IA conçoit. »

3. Collaborez et révisez sur de nouvelles interfaces

Avec des outils permettant d'exploiter l'analyse comportementale et agentique, de créer des guides intégrés à l'application et de recueillir un feedback qualitatif, Pendo aide les équipes produit à prendre des décisions plus éclairées. Quand Brian Greenbaum, designer produit senior, a été chargé de créer une UI conversationnelle pour Pendo, maintenant appelée Mode Agent, il s'est tourné vers Figma Make. « C'était le bon outil car A, je voulais que cela ressemble à Pendo, B, je voulais créer plusieurs variations et C, il s'agissait d'un design expérimental. Je voulais tester le timing et voir comment les messages apparaîtraient et disparaîtraient », dit-il.

En partant d'une frame de Figma Design, Brian a conçu une interface dans Figma Make pour itérer sur la diffusion des messages de raisonnement et des réponses des appels d'outil. Pour tester différentes variantes, il a ajouté un menu déroulant lui permettant de choisir entre des vues plus minimalistes et des vues détaillées, et entre un texte sur une seule ligne et un texte empilé. N'importe qui pouvait entrer dans le fichier, cliquer et comprendre à quoi l'UI ressemblerait. Finalement, l'équipe a décidé de conserver une trace plus persistante des messages pour orienter l'utilisateur dans l'outil. Sans artefact de design, dit Brian, « vous débattez de ce que les gens imaginent. Si je vous décris quelque chose, vous avez un visuel de ma description, et j'ai moi aussi un visuel, mais les deux peuvent ne pas être alignés. »

Disposer d'un design tangible signifiait également que d'autres personnes pouvaient s'inspirer du travail de Brian. Lorsqu'un collaborateur a suggéré de remplacer l'icône de chargement circulaire par un logo Pendo animé, il a rapidement proposé un moyen d'activer ce logo. « Avant, j'aurais réalisé des design statiques car le prototypage n'aurait peut-être pas valu le coup avec toutes ces variantes », dit Brian. « Mais avec le code, je peux le faire plus rapidement. »

4. Concevez votre design system lors des premières explorations

Chez LinkedIn, l'équipe de design system cherche à fournir aux designers les styles, les données et les outils dont ils ont besoin pour créer des expériences qui s'alignent visuellement sur les autres contenus de la plateforme. Grant Blakeman, ingénieur en design chez LinkedIn, déclare : « Tout comme ils viennent nous demander "De quel modèle ai-je besoin pour cette partie de l'application ?", Ils s'adressent également à nous pour ce qui est des outils. »

À cette fin, l'équipe a créé dans Figma Make un modèle de base qui génère automatiquement trois variantes d'un design dès la première exécution d'une invite, ce qui permet aux designers de créer facilement des mises en page pour le web, les appareils mobiles et les tablettes et de basculer entre les modes clair et sombre. « Nous tentions d'obtenir des résultats plus déterministes respectant avec précision non seulement nos composants et nos styles, mais aussi nos modèles de produits », déclare Cherin Yoo, designer produit. Elle a également fourni au modèle des directives concernant les composants fréquemment utilisés et les gammes de couleurs CSS internes. « Les LLMS font des choix dans les limites que nous leur donnons », explique Cherin, « et ce modèle nous aide à restreindre ces limites. » Récemment, l'équipe a utilisé le modèle pour faire la démonstration d'une page d'inscription à un forfait premium pour l'équipe de direction.

Pour maintenir les informations des utilisateurs privées pendant les présentations, le designer produit Ray Sun a également personnalisé le code, intégrant un ensemble de métadonnées qui remplit les designs avec du contenu fictif provenant d'entreprises et de personnes fictives. Ainsi, les designers peuvent demeurer dans le workflow de Figma Make tout en sachant qu'ils intègrent des données légalement vérifiées dans le modèle.

En 2003, le Design Council a développé le modèle Double Diamond du processus de design, qui identifie quatre phases distinctes : découvrir, définir, développer et livrer.

Du point de vue des workflows, Figma Make permet aux designers non seulement d'explorer de manière plus vaste, mais aussi de communiquer plus efficacement, dit Giuliano Manno, directeur des design systems chez LinkedIn. « Dans le modèle de pensée design Double Diamond classique, Figma Make nous permet d'étendre les deux sommets du diamant car il nous permet d'effectuer le travail de divergence et d'exploration plus rapidement », explique-t-il. « Il excelle également pour transférer un modèle mental autour des UX lorsque vous êtes en conversation avec des ingénieurs et des product managers. » En cinq minutes, je peux utiliser Figma Make pour générer quelque chose qui fait que l'idée parle à tout le monde. »

« C'est un outil de communication offrant une combinaison entre fidélité et facilité d'utilisation que nous n'avions jamais vue avec d'autres types de prototypage », convient Grant, qui voit les outils tels que Figma Make éliminer les obstacles pour permettre aux designers de tester le code. « Je pense que les designers vont évoluer pour devenir plus techniques, et je vois ceux qui utilisent Figma Make moins effrayés d'aller dans le code pour tester les choses. Ils peuvent désormais créer des démos qui auraient pris beaucoup de temps à un ingénieur – ou n'auraient pas été réalisées en premier lieu. »

Figma Make n'est plus en version bêta et est actuellement disponible pour tous les utilisateurs.