Trois manières permettant aux designers produit d'utiliser l'agent Figma pour soigner la conception, gagner en rapidité et exprimer leur créativité
Voici comment les équipes de Uber, Granola et Atlassian favorisent un travail rapide et de qualité grâce à l'agent Figma, désormais commercialement disponible.
Partager Trois manières permettant aux designers produit d'utiliser l'agent Figma pour soigner la conception, gagner en rapidité et exprimer leur créativité
Depuis le lancement de l'agent Figma À partir d'aujourd'hui, vous pouvez travailler avec un agent conçu pour Figma, directement sur le plan de travail. La génération de prompt vous permet de démarrer. Des outils personnalisés, un vrai contexte et des compétences – le résultat obtenu vous ressemble vraiment. À compter d'aujourd'hui, vous disposerez d'un meilleur contrôle créatif sur les plugins génératifs et les shaders et pourrez partager vos créations. Le designer produit Rogie King revient sur le parcours qui nous a conduits jusqu'ici.L'agent Figma Design est disponible
L'agent de conception de Figma, maintenant avec des outils personnalisés et un contexte élargi
Dans les coulisses du développement : plugins génératifs et shaders chez Figma
Utilisez des directives pour indiquer à l'agent comment votre équipe utilise son design system. Par exemple, vous pourriez dire : « Utilisez le rouge uniquement pour des actions comme Supprimer, jamais uniquement à des fins décoratives. » Lorsque un créateur de produit demande à l'agent de concevoir quelque chose à partir de cette bibliothèque, il reçoit automatiquement ces instructions.
Aujourd’hui, l’agent Figma sort de sa phase bêta avec un certain nombre d’améliorations, notamment en matière de qualité de production. Le nouvel agent est plus performant pour suivre les instructions et gérer les tâches de longue durée. En effet, il s’impose dans près de 60 % de nos évaluations réalisées auprès de designers professionnels. Outre l’amélioration de la qualité, nous avons lancé de nouvelles fonctionnalités qui vous permettent de :
- Ajouter des directives : fichiers markdown que les propriétaires de bibliothèque peuvent importer dans une bibliothèque Figma pour fournir à l'agent un contexte supplémentaire sur l'utilisation de leur design system.
- Utilisez l'agent pour trouver et insérer du contexte Figma provenant de l’ensemble de la plateforme, comme les notes FigJam, le contenu Figma Slides, ou les frames Figma Design.
- Suivez les agents de vos collaborateurs lorsqu'ils travaillent sur le canvas, pour une expérience multijoueurs qui reflète notre manière de travailler aujourd'hui.
Comme nous l’ont expliqué les équipes d'Uber, de Granola et d’Atlassian, disposer d’un agent là où les collaborateurs travaillent déjà leur évite de devoir réinventer des processus ou de passer d’un outil à l’autre, ce qui leur permet d’avancer plus rapidement tout en améliorant la qualité de leur travail.
Essayez ces skills pour développer votre design system
/create-color : associez les remplissages, tracés, ombres et dégradés à leurs tokens
/create-anatomy : représentez schématiquement la structure des composants et des sous-composants
/create-api : obtenez un aperçu de l'API et des exemples de configuration
/component-handoff : créez une frame de documentation pour les composants sélectionnés
/analyze-components : inspectez tous les composants d’un écran pour détecter d’éventuels problèmes
Comment Uber développe la documentation des design systems
L'équipe des design systems de Uber fournit des composants sur sept plateformes. Le défi ne réside pas seulement dans leur création, mais aussi dans leur communication : lorsqu’un seul composant peut comporter des dizaines d’états, de variantes, d’emplacements, de valeurs booléennes et d’énumérations, une mauvaise interprétation de sa portée entraîne des retouches en aval. C'est pourquoi Ian Guisard, Product Designer, et Niloo Bakhshi, Senior Product Designer, ont élaboré un workflow qui utilise l'agent Figma pour documenter et maintenir leur design system, garantissant ainsi la précision indispensable à la rapidité.
Le travail de Niloo est profondément visuel et "extrêmement focalisé sur les détails", dit-elle. « Je passe beaucoup de temps sur Figma à réaliser des prototypes pour présenter la vision concernant les nouveaux composants. » Auparavant, la conversion de ce travail en spécifications de composants exploitables constituait un processus lent et manuel. Désormais, Ian collabore avec elle pour créer une documentation prête à l'emploi pour les développeurs à l'aide de l'agent Figma et d'un ensemble de skills qu'il a développé afin d'automatiser ce travail. Vous pouvez désormais concevoir des compétences pour notre agent directement dans Figma, afin de mettre votre point de vue en pratique. Voici 10 de nos compétences préférées pour vous lancer./create-anatomy, par exemple, expose la structure du composant, tandis que /create-color
Essayez ces 10 compétences – et mettez les vôtres en valeur.
« Ces skills sont publiés dans la communauté Figma, de sorte que chacun peut les exécuter sur ses propres composants », explique Ian. « Vous créez une tâche, vous la laissez s'exécuter en fond, et vous continuez à développer votre design. » Outre les ingénieurs, les skills me sont également utiles : lorsque j'ai modifié par accident une couleur codée en dur, l'agent a clairement souligné les problèmes. C’est une situation dans laquelle tout le monde y gagne, non seulement pour le processus de transfert, mais aussi pour nous, les designers, qui y trouvons un point de référence. »
L’automatisation de ce travail a permis à l’équipe de gagner considérablement en efficacité. La documentation, qui nécessitait autrefois plusieurs mois de travail à plusieurs personnes, est désormais publiée par un seul designer en une après-midi. « Nous sommes ainsi devenus beaucoup plus efficaces, et nous pouvons désormais livrer des composants de meilleure qualité en un temps record », explique Ian. « Grâce à l’agent intégré à Figma, les skills s’exécutent là où le travail est déjà en cours. Le composant et son contexte se trouvent déjà dans le fichier ; il n’est donc pas nécessaire de transférer le travail vers un autre outil ni d’apprendre un nouveau workflow. Ces skills sont ainsi intuitifs à utiliser et faciles à partager au sein d'une équipe. »
Grâce à l’agent intégré à Figma, les skills s’exécutent là où le travail est déjà en cours.
Essayez ces skills pour automatiser les tâches répétitives
/do-try-consider : classez les commentaires de la page selon un ordre de priorité
/ui-state-expander développez un écran, un composant ou un flux en un ensemble complet d'états
Comment Granola conçoit ses produits en toute confiance
Conseil de pro : Ajoutez des connecteurs aux outils que vous utilisez déjà comme Amplitude, Asana, Atlassian, Granola, Notion et Slack.
La petite équipe dynamique à l'origine de Granola, une application de prise de notes basée sur l'IA, se caractérise par une culture de l'expérimentation. « Lorsque vous explorez de nouvelles pistes, il est très utile d’être sur Figma et d’avoir 10 versions d’un design réparties sur le canvas », remarque Paavan Buddhdev, Product Designer. L'agent de Figma l'aide à itérer rapidement et à intégrer le feedback de son équipe, lui permettant de se concentrer sur une vision d’ensemble. « Nous avons gagné énormément de temps », ajoute-t-il.
Grâce au connecteur Granola, Paavan demande à l'agent Figma d'annoter directement le canvas avec les commentaires issus des notes et des transcriptions de réunion. Cette méthode s'avère tout aussi utile lors des réunions d'évaluation courantes que lors des sessions de test approfondies, au cours desquelles l'ensemble de l'équipe teste des prototypes fonctionnels et donne son avis. « Avant, je tapais frénétiquement des notes pendant la réunion afin de tenir à jour ma liste de tâches », commente Paavan. « L’avantage d’utiliser le connecteur Granola avec l’agent, c’est que je peux être plus présent pendant la réunion et réagir efficacement. Je réalise toujours le travail de design, mais avec davantage de confiance, car je sais que je ne manquerai rien d'important. »
Le workflow de Paavan s'appuie également sur l'automatisation pour maintenir la dynamique pendant le travail de design. À l’aide de l’extension Figma pour Chrome, il importe des écrans existants de l’application Granola sur le canvas. Ensuite, il demande à l'agent de nettoyer les connexions vers Oats, leur bibliothèque de composants. D’autres fois, il sollicite des variantes de texte, par exemple : "Proposez 30 façons de formuler le texte de ce bouton." « Cette solution vous aide à accomplir les tâches que vous n’avez pas vraiment envie de faire », conclut-il.
L’agent réduisant les frictions opérationnelles, Paavan dispose de plus de temps pour explorer différentes solutions, échanger avec les utilisateurs et tester son travail. « Vous devez présenter un design à un utilisateur le plus rapidement possible, » rappelle-t-il. « Tout ce que je réalise avec l’agent répond à cet objectif. »
Nous avons gagné énormément de temps.
Essayez ces skills pour apporter de l’expressivité à vos créations
/shader-starter : créer un remplissage de shader ou un effet guidé par des prompts
/ease-like-miggi : remplacer chaque easing par une courbe « Mig » correspondante
/find-animation-opportunities : analyser les designs pour trouver des moyens d'ajouter de l'animation avec des valeurs exactes
Comment Atlassian met en œuvre l'animation
L'animation est au cœur de l'identité de marque et de l'expérience utilisateur d'Atlassian, mais elle n'est pas toujours intégrée aux versions finales. En transformant les ressources d'animation en composants réutilisables dans Figma, la petite équipe design d'animation d'Atlassian a élargi son expertise, l'agent Figma fonctionnant comme une extension de ce système. « Il nous permet de passer d'une production d'illustrations animées confiée à des spécialistes à une fonctionnalité intégrée au système, tout en préservant le savoir-faire en matière d'animation », explique Alexandra Pereira, Senior Product Designer.
Désormais, un designer travaillant sur une fenêtre modale d’intégration peut choisir parmi une bibliothèque d’illustrations animées pour remplir un emplacement de composant. Si le contexte nécessite une création sur mesure, l’agent l’aide à ajuster l’easing et la durée afin de respecter l’intention de conception, tout en s’assurant que le résultat utilise les variables du design system Atlassian. « La capacité à générer du contenu dans le respect de certaines contraintes est vraiment essentielle pour les systèmes d’entreprise », souligne Alexandra. Elle assure une cohérence, une accessibilité et une qualité d'implémentation, en plus de la rapidité. »
Astuce de pro : Au-delà de l'amélioration des compétences de votre équipe en matière d'animation, l'agent peut vous aider à créer et à partager des plugins et des shaders génératifs pour obtenir des effets et des styles personnalisés et réutilisables. Regardez cette vidéo pour découvrir comment Jamie Haberman, Designer chez Figma Éducation, a créé un plugin de typographie cinétique à l'aide de l'agent.
Les designers moins à l'aise avec l'animation peuvent ainsi obtenir des réalisations à la fois expressives et fidèles à l’identité de la marque. Lorsque Davy Fung, Product Designer, a dû animer une bannière de communication pour Slack, il a expliqué à l’agent ce qu’il souhaitait, puis lui a demandé son avis sur ce qui fonctionnait ou non. « Sans cet outil, je n’aurais normalement pas été en mesure de le faire », note-t-il. « Pour les designers qui travaillent sur des designs statiques, nos compétences se sont élargies ».
Avec l'utilisation croissante des outils d'animation par l'ensemble de l'équipe sur le canvas, il est plus facile pour tout le monde de trouver un bon point de départ. « Je pense que beaucoup de personnes vont pouvoir affiner leur sens de l'animation en utilisant ces nouveaux outils sur le canvas Figma, où elles ont déjà l'habitude de prendre des décisions de design », déclare Maxwell Hathaway, Lead Motion Designer.
Pour les designers qui travaillent sur des designs statiques, nos compétences se sont élargies.
L'agent Figma est disponible pour les utilisateurs titulaires d'une Licence Full dans les forfaits Professionnel, Organisation, Entreprise, et certains forfaits Éducation, et en disponibilité limitée dans le forfait de base. Les utilisateurs disposant d'une licence Collab, Dev et View peuvent utiliser l'agent dans leurs brouillons. Pour découvrir un exemple d'utilisation de l'agent dans votre processus, consultez notre dernier Workflow Lab puis lancez-vous et testez-le par vous-même.
