Ce qu'il faut pour créer des produits d'exception aujourd'hui

Grâce à l'IA, vous pouvez passer de la rédaction d'un prompt à un élément cliquable en quelques heures. Mais y parvenir ne signifie pas pour autant avoir créé quelque chose d'exceptionnel. Un prototype abouti ne vous dispense pas de répondre aux questions fondamentales : cette approche est-elle la meilleure, ou simplement la première ? Reflète-t-elle notre identité ? Et surtout : le projet mérite-t-il vraiment d'être concrétisé ?

Les équipes qui apportent des réponses pertinentes à ces questions excellent dans trois domaines : la rapidité, l'approche et la différenciation. Elles maintiennent leur dynamique dans la dernière ligne droite, évaluent plusieurs pistes avant d'en privilégier une seule et façonnent le résultat pour en faire une création qui leur est propre.

Vitesse : maintenez votre élan jusqu'à l'expédition

Lorsque les premiers 80 % du travail sont faciles, les équipes peuvent perdre leur élan durant les 20 % restants, car un prototype peut donner l'impression d'être un produit prêt à être lancé. Les concepteurs de produits pourraient se rendre compte que le prototype réalisé rapidement n'utilise pas réellement leur design system ou génère une charge de travail supplémentaire lors du passage du design au code. Le défi consiste à maintenir cette rapidité initiale à mesure que le travail gagne en complexité, mobilise davantage de personnes et approche de la phase de lancement.

Découvrez comment Sneha Narahalli, vice-présidente principale chargée de la technologie chez Sephora, utilise la vitesse pour bien plus que de simples expéditions rapides.

Utilisez le support le plus rapide pour la tâche

À mesure que les produits prennent forme, les équipes procèdent à des itérations constantes, allant de légères retouches visuelles à des modifications du comportement d'une fonctionnalité. L'approche la plus rapide dépend de la problématique que vous cherchez à résoudre. Par exemple, s'il y a trop d'espace entre un champ de formulaire et un bouton, il peut être plus rapide d'ajuster l'espacement directement dans Figma que de décrire la modification dans un prompt. D'autres modifications sont plus rapides à effectuer dans le code. Si vous créez un calculateur permettant aux utilisateurs d'estimer le prix en fonction du nombre de collaborateurs qui utiliseront le produit, vous n'avez pas besoin de concevoir une version distincte pour 10, 20 ou 50 personnes. Vous pouvez configurer un calcul simple dans le code afin que le prix se mette à jour automatiquement à mesure que le nombre change.

Les gains de vitesse les plus importants proviennent du choix de la méthode la plus rapide pour effectuer chaque type de modification, plutôt que de faire passer systématiquement toutes les tâches par le même workflow. Dans Figma, cela peut impliquer d'alterner entre l'édition directe, les prompts et le code, selon la modification à réaliser.

Choisissez l'outil correspondant à la tâche :

• Effectuez des modifications visuelles précises directement dans Figma Make à l'aide du panneau des propriétés. Ajustez des éléments tels que l'espacement, la typographie, la mise en page ou les dimensions sans avoir à décrire chaque modification dans un prompt.
• Copiez un aperçu Make dans Figma Design sous forme de calques modifiables, afin que l'équipe puisse l'affiner et le faire évoluer directement.
• Connectez Figma Make à votre base de code pour effectuer et prévisualiser des modifications en utilisant le code existant du produit, puis envoyez ces changements aux équipes d'ingénierie pour examen.

Donnez le raccourci à toute l'équipe

À mesure que le travail progresse au sein de l'équipe, maintenir la cadence implique de rendre reproductibles les raccourcis utiles. Imaginons qu'un designer trouve un moyen rapide et fiable de vérifier un nouveau parcours utilisateur par rapport à vos normes d'accessibilité. Au lieu de garder ce processus pour lui, il peut le transformer en un flux de travail réutilisable pour toute l'équipe. Dans Figma, les équipes peuvent transformer ces méthodes de travail répétables en compétences ou en plugins que tout le monde peut réutiliser.

Mettez de meilleures méthodes de travail à la disposition de toute l'équipe dans Figma :

• Créez une compétence personnalisée seul ou avec l'aide de l'agent Figma, puis partagez-la avec votre équipe pour des workflows reproductibles tels que la critique de designs, les tests utilisateurs ou la détection de problèmes de conformité.
• Demandez à l'agent Figma de créer un plugin réutilisable pour une tâche que votre équipe effectue fréquemment sur le canvas (par exemple, disposer automatiquement des images), puis partagez ce plugin afin que d'autres puissent utiliser le même raccourci.

Orientation : explorez un large éventail d'options avant de faire votre choix

Explorer plusieurs pistes prenait autrefois plus de temps, ce qui contraignait parfois les équipes à restreindre rapidement le champ des possibles ou à maintenir les idées à un stade trop hypothétique pour vraiment comprendre comment – ou même si – elles fonctionneraient. Aujourd'hui, les outils qui accélèrent le développement d'une première piste permettent aussi d'essayer plus rapidement d'autres alternatives et de vérifier la viabilité des idées prometteuses dans davantage de situations avant de s'engager.

Découvrez comment Ian Silber, responsable du design produit chez OpenAI, et son équipe explorent un large éventail d'idées avant de décider lesquelles méritent d'être lancées.

Vérifiez les cas particuliers avant de vous engager

Un prototype unique masque les branches, les états vides et les transitions maladroites, là où même un concept prometteur peut poser problème en pratique. Imaginons que vous conceviez un parcours de réservation de rendez-vous en salon. Quelqu'un choisit un créneau disponible, puis reçoit une confirmation. Toutefois, le prototype ne montre pas ce qui se passe si aucun créneau n'est disponible cette semaine-là, si le coiffeur annule ou si le client doit modifier son rendez-vous. C'est dans ces situations que le prototype s'avère trop limité pour rendre compte de la situation dans son ensemble, et que l'on découvre si l'orientation choisie est réellement viable.

Obtenez la vue complète dans Figma :

• Grâce aux calques de code, importez des écrans ou des états clés d'un prototype sous forme de calques de conception modifiables afin de pouvoir examiner le parcours complet sur le plan de travail, effectuer des modifications et les répercuter sur le prototype.
• Demandez à l'agent Figma de développer les états ou les branches manquants à partir d'un écran ou d'un parcours existant.
• Demandez à l'agent Figma de mettre en évidence les lacunes ou les scénarios que le parcours actuel peut ne pas prendre en compte.

Comparez les orientations

Il est plus facile de juger des idées lorsqu'elles sont accompagnées d'autres idées. Juxtaposer plusieurs orientations permet de mieux cerner les arbitrages, comme le choix entre pousser plus loin l'identité visuelle et privilégier une expérience d'interface plus claire. Par ailleurs, de nombreuses expérimentations en matière d'IA se déroulent de manière isolée, alors que les équipes ont besoin de comparer, de réagir, d'exprimer leurs désaccords et de s'appuyer sur les idées des uns et des autres. Un canvas partagé leur offre un lieu pour cela, tout en centralisant les orientations et les échanges, évitant ainsi que le feedback ne se perde dans un fil de discussion distinct.

Explorez et comparez les pistes dans Figma :

• Demandez à l'agent Figma de générer plusieurs variantes à partir d'un seul prompt, afin que la conversation avec votre équipe démarre sur une gamme d'options plutôt que sur une seule.
• Dupliquez un calque de code interactif et testez des variantes à côté, en veillant à ce que chaque version soit suffisamment fonctionnelle pour permettre de comparer son comportement, et pas seulement son apparence.

Différenciation : donnez forme à des produits qui attirent l'attention

Lorsque l'IA permet à davantage de personnes d'atteindre un point de départ abouti, se démarquer exige des choix plus délibérés. La différenciation naît de la volonté d'aller au-delà du résultat initial et de façonner l'expérience jusqu'à ce qu'elle reflète un point de vue qui vous est propre.

Découvrez les propos de Teo Connor, vice-président du design chez Airbnb, sur la manière de préserver la qualité dans un monde où il est plus facile que jamais de passer de 0 à 1.

Commencez avec une base solide

Un design system solide porte le point de vue de votre produit. Ses composants et ses variables cristallisent des milliers de décisions subtiles sur ce qui a sa place ou non : des détails tels que la nuance de rouge conforme à l'identité de la marque, le degré d'arrondi d'une carte, l'espacement entre les éléments ou encore le style de bouton indiquant l'action principale. Lorsque votre équipe intègre ces choix au système, les productions générées par l'IA peuvent adopter le même langage visuel au lieu de se rabattre sur des paramètres par défaut génériques. Les qualités qui distinguent votre produit transparaissent de manière cohérente dans toutes les créations de l'équipe.

Rendez vos normes réutilisables dans Figma :

• Demandez à l'agent Figma de travailler à partir de votre design system et de signaler les points où le travail s'en écarte.
• Utilisez Code Connect avec Figma MCP pour indiquer aux agents quels composants Figma correspondent à ceux que votre équipe utilise dans le code, afin qu'ils puissent bâtir en s'appuyant sur le même système plutôt que de devoir deviner ou réécrire des composants.

Affinez le résultat directement

L'utilisation de prompts est efficace, mais apporter une modification mineure via un nouveau prompt peut entraîner la régénération d'une partie plus importante du contenu que ce que vous aviez prévu. Un travail de qualité naît de l'appropriation du résultat : conserver ce qui fonctionne, modifier ce qui ne fonctionne pas et affiner les détails jusqu'à ce que le résultat reflète votre intention. Imaginez que vous générez un shader personnalisé et que seul l'effet de lueur est trop intense. Si vous demandez une correction via un autre prompt, vous risquez d'obtenir une version où la couleur, le flou et le motif ont également été modifiés. Au lieu de cela, ajustez manuellement l'intensité de la lueur.

Prenez le contrôle dans Figma :

• Combinez des modèles provenant de différents fournisseurs dans Figma Weave pour vous rapprocher du résultat que vous recherchez vraiment.
• Utilisez des effets de shader pour appliquer des traitements visuels tels que la distorsion, le grain ou la texture, directement sur le canvas.

Exprimez-vous davantage

Une fois que vous êtes en mesure d'affiner directement le résultat, vous pouvez également aller plus loin grâce à l'expression visuelle, comme des illustrations personnalisées et de l'animation. Auparavant, cela impliquait de faire appel à un autre outil ou à un autre spécialiste, mais ces contraintes s'estompent. Imaginons qu'un designer souhaite qu'un menu s'ouvre en glissant avec un effet de rebond spécifique plutôt que de simplement apparaître, ou qu'une carte utilise un dégradé scintillant au lieu d'un remplissage uni. Désormais, ce même designer peut créer ces deux effets sans quitter le canvas, en collaborant avec l'agent Figma pour concrétiser sa vision.

Allez plus loin dans l'expérience produit :

• Créez des illustrations vectorielles avec Figma Draw, directement sur le canvas.
• Générez et combinez des images ou des vidéos dans Weave.
• Faites basculer une frame en mode Figma Motion, puis faites glisser les calques sur la chronologie pour ajuster le moment et la durée de l'animation de chaque élément, ou échangez simplement avec l'agent Figma pour obtenir une première version.
• Décrivez un shader personnalisé, comme le scintillement de la carte, et laissez l'agent Figma réaliser un premier jet à ajuster sur le canvas.

Concevoir des produits d'exception n'est pas devenu chose facile. Ce qui a changé, c'est l'étape où se concentre le plus gros du travail. Un prototype peut constituer une première étape, mais les équipes doivent encore maintenir leur élan jusqu'au bout, choisir la bonne direction et façonner quelque chose de singulier. Ensemble, la vitesse, la direction et la différenciation transforment une construction accélérée en un produit que l'on a réellement envie d'utiliser.