Naviguer jusqu'au contenu principal

L'agent Figma Design est disponible

Rodrigo DaviesProduct Manager, Figma
Tammy TaabassumProduct Designer, Figma

À partir d'aujourd'hui, vous pouvez travailler avec un agent conçu pour Figma, directement sur le plan de travail.

Partager L'agent Figma Design est disponible

Les designers ont besoin d'outils dédiés qui répondent à leurs besoins essentiels : l'exploration, l'expérimentation, la collaboration et la précision. C'est dans cette optique qu'a été conçu Figma, un plan de travail multijoueurs permettant de concilier toutes ces exigences. Alors que les équipes adoptent des outils agentiques pour construire des produits plus rapidement, de faux dilemmes apparaissent : rapidité ou précision ? Génération par IA ou manipulation directe ? Vous ne devriez pas devoir choisir.

En début d'année, nous avons ouvert le plan de travail Figma aux agents tiers afin que vous puissiez intégrer des connaissances de design system dans vos workflows agentiques. Nous allons maintenant plus loin, avec un agent Figma disponible directement sur le plan de travail et dans le rail gauche.

C'est pourquoi nous avons créé l'agent Figma. Notre objectif était de créer un agent maîtrisant parfaitement Figma et s'adaptant naturellement au mode de fonctionnement des équipes. À cette fin, nous devions rendre Figma lui-même compréhensible pour un modèle d'une manière impossible à réaliser avec des outils tiers, en intégrant un contexte approfondi sur vos composants, vos tokens, vos normes et vos bonnes pratiques.

Comment l'agent de Figma et le serveur MCP fonctionnent-ils ensemble ?

Utilisez l'agent de Figma lorsque vous travaillez sur le plan de travail ; il est intégré et possède un contexte supplémentaire sur votre design system. Utilisez le serveur MCP et use_figma pour extraire du code sur le plan de travail ou renvoyer des designs vers le code.

Le résultat : un agent de design dédié qui travaille à vos côtés sur le plan de travail, dans le même fichier que votre équipe, en véritable collaborateur. Il est optimisé pour l'édition de fichiers Figma, de sorte que les résultats sont adaptés à votre contexte de design et conçu pour une manipulation directe afin que vous puissiez garder le contrôle. Contrairement au serveur MCP, l'agent vit directement sur le plan de travail, sans configuration distincte ou changement de contexte. Vous pouvez donc facilement :

  • commencer un prompt à partir de n'importe quel calque de design ;
  • utiliser des prompts en parallèle pour explorer plusieurs idées en même temps ;
  • effectuer des modifications et itérez pendant que l'agent itère également.

Qu'il s'agisse d'explorer de nouvelles pistes, de réaliser des modifications en masse ou de mettre en œuvre un feedback, voici comment l'agent de Figma s'intégrera dans votre workflow de design aujourd'hui.

Explorer de nouvelles pistes

Les meilleurs designs sont rarement issus de la première idée, ou du premier prompt. Explorer des pistes, comparer des approches et itérer font déjà partie intégrante de la manière dont travaillent les designers. Notre agent vous aidera à couvrir plus de terrain en moins de temps.

Comment Figma Make et l'agent Figma s'intègrent-ils dans votre workflow ?

Vous pouvez commencer dans Figma Design avec notre agent pour générer des calques de design afin de clarifier l'intention à tous les niveaux : flux, états, version et structure. Ensuite, envoyez-le à Make pour générer des calques de code afin de clarifier le comportement. Ensuite, intégrez-le à nouveau dans Figma Design.

Ou bien, vous pouvez commencer dans Figma Make, copier des frames vers Figma Design, itérer avec notre agent, et le renvoyer vers Make.

Vous pouvez voir les choses sous différents angles : imaginez rapidement plusieurs approches stylistiques distinctes pour un même problème et explorez plusieurs pistes à la fois. Comparez plusieurs flux de paiement optimisés pour différents objectifs commerciaux. Demandez à l'agent trois architectures d'information différentes.

Ou approfondissez votre réflexion : choisissez une piste et demandez à l'agent d'itérer, de comparer les implémentations et de repenser les designs existants tout en restant cohérent avec votre design system. L'agent utilise vos composants les plus fréquemment et récemment utilisés comme point de départ, mais vous pouvez également guider les résultats en choisissant une bibliothèque spécifique et en mentionnant des tokens, des variables et des composants spécifiques pour l'orienter exactement vers ce dont vous avez besoin. Considérez-le comme une commande clé pour votre design system.

La création de designs étant facilitée par l'IA, le risque est de proposer un résultat moyen. Notre agent est spécialement conçu pour vous aider à explorer plusieurs pistes, afin que vous puissiez choisir la bonne. Ensuite, une fois que vous avez fait votre choix, une approche pratique est souvent plus rapide, plus naturelle et plus efficace en termes de tokens que de déterminer le résultat idéal par des prompts. Vous pouvez également construire simultanément avec votre équipe dans le même espace de travail, sans perdre le contexte.

Remixer les styles et générer des écrans qui utilisent vos design systems :

Prompt d'exploration de designs : Proposer 3 options de style pour ce design : une organique, une moderne et une rétro.
Prompt de génération de designs  : Créer carrousel d'images avec défilé horizontal pour appli mobile. Insérer images plein air/sport. Donner options styles de titre différents haut et bas de l'image.

Automatiser les tâches

Pourquoi le flux s'arrêterait-il au plan de travail :

avec le serveur MCP de Figma, le travail peut passer entre le code et Figma sans perte de qualité. Commencez avec du code, intégrez-le dans Figma grâce à notre fonctionnalité de code-à-plan de travail pour itérer ou appliquer votre design system, puis renvoyez-le via le serveur MCP de Figma, et tout reste synchronisé. Notre agent s'intègre dans cette transition, contribuant à maintenir la dynamique lors du transfert du travail d'un outil à l'autre.

Lorsque l'agent de Figma travaille à vos côtés sur le plan de travail, vous ne gagnez pas seulement en rapidité ; vous pouvez facilement alterner entre l'assistance de l'IA et la manipulation manuelle. Il est ainsi plus facile d'accomplir des tâches fastidieuses qui nécessitent néanmoins du contexte et de la précision. Ne serait-ce pas formidable si vous n'aviez pas à renommer manuellement les variables pour qu'elles soient cohérentes, à échanger le même composant sur de nombreux écrans différents, à répéter un changement de marges intérieures sur tout un flux, ou à remplir un grand nombre de frames avec un contenu réaliste ? C'est exactement là qu'intervient l'agent. Il gère les tâches qui vous ralentissent habituellement en automatisant les modifications en masse, en appliquant des design systems et en remplissant les designs avec du contenu réaliste à grande échelle.

Discutez avec Figma pour mettre à jour la typographie dans un fichier, remplacer le texte lorem ipsum et les images dans une grille, régler tous les composants de puce à leur état actif, ou convertir vos écrans en mode sombre sans ajuster manuellement les remplissages et les contrastes. Et si vous maintenez un design system, l'agent est un allié particulièrement puissant. Utilisez-le pour mettre à jour en masse les descriptions, les balises et les cas d'utilisation dans les bibliothèques, standardiser les conventions de dénomination, documenter les composants avec tous leurs états et variantes, et garantir la qualité en partageant des exemples du travail de votre équipe.

Effectuer des modifications précises en masse et documenter votre design system :

Prompts parallèles pour assurer la cohérence : Définir composants Tuile / Légende sur états de surlignement ; trouver textes taille > 10 et changer police en Inter ; utiliser police plus claire.
Documentation du design system : Créer une documentation pour mes composants, y compris tous les états et variantes. Ajoutez exemples contextuels illustrant utilisation des composants.‌

Faire davantage avec le feedback

Le travail de design génère un feedback qui est souvent dispersé dans les commentaires et les fichiers : qu'il s'agisse de remarques issues des revues de projet, des réactions des parties prenantes ou de questions en suspens. Notre agent vous aide à tirer parti de ces informations.

Parce que toute votre équipe travaille dans le même fichier, l'agent dispose déjà de ce contexte ; lui demander de traiter les commentaires ne ressemble donc pas tant à un briefing destiné à un nouveau collaborateur qu'à une réflexion à voix haute avec un interlocuteur déjà présent.

Demandez à Figma de résumer le feedback, d'identifier les thèmes et de transformer les contributions en prochaines étapes. Vous pouvez également l'utiliser pour tester les designs sous différents angles. Vous vous demandez comment réagirait un vice-président focalisé sur les revenus ? Notre agent peut modéliser cette perspective. Comment analyser un long fil de commentaires ? L'agent peut synthétiser les échanges en un plan d'action concret. Besoin de réfléchir à haute voix avant une critique ? Utilisez notre agent pour affiner votre stratégie avant de la partager avec votre équipe.

Recevoir, organiser et appliquer le feedback en temps réel :

Organisez et appliquez le prompt de feedback : Trier ces commentaires par thème. Créer une nouvelle version de mon design qui intègre le feedback pour ce profil.

L'agent de Figma est intégré là où le travail se fait déjà. Il n'y a pas de coût de basculement, pas de changement de contexte, pas de courbe d'apprentissage. Vous restez dans Figma et votre équipe reste informée. Nous avons développé ce concept dans un seul objectif : vous aider à travailler plus rapidement sans compromettre la qualité et le savoir-faire.

Au cours des prochains mois, nous nous attacherons à améliorer le support pour les design systems, à optimiser l'expérience utilisateur, à développer les capacités de l'agent en matière de recherche dans vos fichiers et à proposer de nouvelles options de personnalisation. Ce n'est qu'un début.

L'agent Figma sera déployé progressivement en version bêta au cours des prochaines semaines. Pendant la phase bêta, l'agent ne consommera pas de crédits. Les crédits d'IA s'appliqueront à la disponibilité générale. Inscrivez-vous ici pour demander un accès anticipé. Si vous êtes éligible et sélectionné(e) pour la version bêta, nous vous enverrons un e-mail dès que vous y aurez accès. S'inscrire à la liste ne garantit pas l'accès. L'agent sera disponible pour les utilisateurs disposant d'une licence Full avec les forfaits Professionnel, Organisation et Entreprise. Les Licences Collab et Dev peuvent utiliser l'agent dans les brouillons. Les forfaits de base, Éducation et Gouvernement ne sont pas inclus. Pour en savoir plus, accédez à notre Centre d'aide.

Créez et collaborez avec Figma

Lancez-vous gratuitement