Figma dévoile son agent de design

• Un agent de design dédié à Figma, qui fonctionne directement sur le canvas, a été lancé afin d’offrir un environnement où les designers peuvent alterner entre collaboration avec l’IA et manipulation directe sans changer d’outil
• Fine-tuné pour comprendre en profondeur le contexte du système de design — composants, tokens, standards et bonnes pratiques — il génère des résultats optimisés pour l’édition de fichiers Figma
• Il est possible de lancer un prompt depuis n’importe quel calque de design, d’explorer plusieurs idées en même temps avec des prompts parallèles (parallel prompt), et l’agent comme l’utilisateur peuvent modifier le fichier simultanément
• Il peut être utilisé pour automatiser les tâches répétitives comme la modification en masse de variables, le remplacement de composants, le passage en mode sombre ou le remplacement de lorem ipsum
• Déploiement progressif en bêta au cours des prochaines semaines, sans consommation de crédits pendant la période bêta, pour les utilisateurs disposant d’un Full seat sur les plans Professional, Organization et Enterprise

---

Contexte du lancement et positionnement

• Les éléments essentiels pour les designers sont l’exploration, l’expérimentation, la collaboration et la précision, et Figma a été conçu comme un canvas multijoueur permettant cela
• Alors que les équipes adoptent des outils d’agents, de faux dilemmes (false choices) apparaissent, comme « vitesse vs précision » ou « génération par l’IA vs manipulation directe », mais la position de Figma est qu’il n’est pas nécessaire de choisir l’un ou l’autre
• Après avoir ouvert plus tôt cette année le canvas Figma à des agents tiers, l’entreprise lance cette fois un agent Figma directement intégré au canvas et à la barre latérale gauche (left rail)
• L’objectif est de créer un agent à l’aise dans Figma et nativement adapté à la façon de travailler des équipes, en rendant Figma lui-même lisible (legible) par le modèle à un niveau impossible avec des outils tiers

Agent Figma vs serveur MCP

• Agent Figma

  • Utilisé lors du travail sur le canvas, il est intégré et dispose d’un contexte supplémentaire sur le système de design
  • Il reste présent sur le canvas sans configuration séparée ni changement de contexte

• Serveur MCP

  • Utilisé pour importer du code vers le canvas (pull) ou réexporter un design vers le code (push)
  • Il gère les workflows entre code et canvas avec use_figma

Fonctionnement clé

• Il agit à côté du canvas comme un véritable collaborateur (true collaborator) travaillant avec l’équipe dans le même fichier
• Fine-tuné pour l’édition de fichiers Figma, il produit des résultats adaptés au contexte de design et est conçu pour permettre la manipulation directe afin que l’utilisateur garde le contrôle
• Contrairement au serveur MCP, il réside directement sur le canvas, sans besoin de configuration ni de changement de contexte
  • Il est possible de lancer un prompt depuis n’importe quel calque de design
  • Il prend en charge les prompts parallèles (parallel prompting) pour développer plusieurs idées en même temps
  • Pendant que l’agent travaille, l’utilisateur peut lui aussi modifier et itérer simultanément

Explorer davantage de directions (Explore more directions)

• Les meilleurs designs ne naissent ni de la première idée ni du premier prompt ; explorer des directions, comparer des approches et itérer est au cœur du design

• Voir large (Go wide)

  • Générer rapidement différentes approches stylistiques pour un même problème
  • Comparer plusieurs parcours de checkout optimisés selon différents objectifs business
  • Demander trois architectures de l’information différentes

• Aller en profondeur (Go deep)

  • Choisir une direction puis itérer, comparer des implémentations et revisiter des designs existants tout en restant cohérent avec le système de design
  • Utiliser comme point de départ les composants les plus fréquemment et récemment employés
  • Contrôler la direction de sortie en choisissant une bibliothèque précise et en mentionnant avec @ des tokens, variables ou composants — une sorte de raccourci pour le système de design

• Intégration avec Figma Make

  • Depuis Figma Design, créer avec l’agent des calques de design pour clarifier l’intention des flux, états, textes et structures → envoyer vers Make pour générer des calques de code → réintégrer ensuite dans Figma Design
  • Ou démarrer dans Figma Make → copier les frames dans Figma Design → itérer avec l’agent → renvoyer vers Make
• Plus il devient facile de générer du design avec l’IA, plus le risque de mettre en production des résultats banals augmente ; l’agent est conçu pour explorer davantage de directions afin de choisir la bonne
• Une fois la direction fixée, travailler directement à la main est souvent plus rapide, plus naturel et plus efficace en tokens (token efficient)

Automatiser les tâches répétitives (Automate busywork)

• Le fait que l’agent opère aux côtés de l’utilisateur sur le canvas permet de passer librement de l’assistance IA à la manipulation directe
• Il automatise les tâches fastidieuses qui exigent du contexte et de la précision
  • Renommer en masse des variables pour assurer la cohérence
  • Remplacer un même composant sur plusieurs écrans
  • Réappliquer des changements de padding sur l’ensemble d’un flux
  • Remplir de nombreux frames avec du contenu réaliste

• Exemples d’usage concrets

  • Mettre à jour la typographie dans l’ensemble du fichier
  • Remplacer les textes lorem ipsum et les images dans toute une grille
  • Régler tous les composants chip sur l’état active
  • Passer des écrans en mode sombre sans ajuster manuellement les fills et les contrastes

• Particulièrement utile pour les responsables de systèmes de design

  • Mettre à jour en masse descriptions, tags et cas d’usage dans toute une bibliothèque
  • Standardiser les conventions de nommage
  • Documenter les composants avec tous leurs états et variantes
  • Partager des exemples de travaux d’équipe comme guide qualité

• Handoff avec le serveur Figma MCP

  • Le travail circule entre le code et Figma sans perdre en fidélité
  • Démarrer depuis le code → l’importer dans Figma avec la fonction code-to-canvas pour itérer ou appliquer un système de design → le renvoyer via le serveur MCP, tout en conservant la synchronisation

Mieux exploiter les retours (Do more with feedback)

• Le travail de design accumule des commentaires, notes de critique, réactions de parties prenantes et questions ouvertes disséminés partout dans le fichier
• Comme toute l’équipe travaille dans le même fichier, l’agent dispose déjà du contexte ; il ne s’agit pas de briefer un nouveau collaborateur, mais plutôt d’organiser ses idées avec quelqu’un qui est déjà dans la même pièce

• Manières de l’utiliser

  • Résumer les retours, identifier des thèmes et transformer les contributions en prochaines étapes
  • Tester un design sous pression depuis différents points de vue — par exemple modéliser la réaction d’un VP focalisé sur le chiffre d’affaires
  • Transformer de longs fils de commentaires en plan d’action exploitable
  • Structurer sa pensée avant une critique (crit) afin d’affiner la direction

Feuille de route et conditions de lancement

• Au cours des prochains mois, Figma prévoit de se concentrer sur l’amélioration de la prise en charge des systèmes de design, de l’UX, de l’extension de la recherche à l’ensemble du fichier et de nouvelles options de personnalisation

• Conditions de la bêta

  • Déploiement progressif de la bêta au cours des prochaines semaines
  • Aucun crédit consommé pendant la bêta, avec application de crédits IA lors de la disponibilité générale (GA)
  • Il est possible de s’inscrire sur liste d’attente, sans garantie d’accès

• Plans éligibles

  • Réservé aux utilisateurs disposant d’un Full seat sur les plans Professional, Organization et Enterprise
  • Les sièges Collab et Dev peuvent utiliser l’agent dans les drafts
  • Les plans Starter, Education et Government sont exclus