Introduction : un agent qui vit sur le canevas, pas un chatbot à côté
Depuis la Config 2026, le Figma Agent n'est plus une fenêtre de chat isolée. Il s'installe directement dans le panneau latéral, dans une bulle contextuelle au survol d'un calque, ou dans un mini-chat via Cmd + Enter.
Nous avons regardé le deep-dive officiel de Figma, un tutoriel pratique de connexion à Cursor via MCP, et un premier retour d'expérience indépendant pour comprendre ce que cet agent sait vraiment faire.
Verdict : l'agent n'est pas là pour remplacer notre jugement esthétique, mais pour absorber les corvées — nettoyage, contenu, premier jet de code — et nous laisser plus de temps pour la direction artistique.
Trois façons de l'appeler, sans polluer le canevas
L'agent propose trois points d'entrée : le panneau latéral, une bulle contextuelle au survol d'un calque, ou le raccourci Cmd + Enter pour un mini-chat instantané. Si la bulle gêne une manipulation de précision, Cmd + K la masque le temps de travailler.
Toutes les conversations sont synchronisées dans un historique centralisé : cliquer sur une modification passée nous replace exactement là où l'action a eu lieu, sans jamais perdre le fil d'une itération.
Connecter l'agent à votre écosystème : les connecteurs MCP
La plus grande frustration du designer, c'est l'aller-retour permanent entre son outil de création et les sources d'information externes. Les connecteurs MCP suppriment cet aller-retour.
Notion, GitHub, Slack : le brief qui ne se retape plus
Nous pouvons prendre un brief dans Notion, générer des designs dans Figma, puis renvoyer nos modifications vers le document d'origine avec des références précises. Cette synchronisation bidirectionnelle élimine les erreurs de transcription entre chef de produit et designer.
La recherche web intégrée, sans quitter Figma
L'agent peut aussi chercher sur le web en temps réel. Pour une application météo, il va chercher les températures réelles de San Francisco et les injecte directement dans la maquette — sans jamais nous faire perdre notre état de flux créatif.
Custom Skills : injecter votre propre expertise dans l'agent
Les Custom Skills sont de simples fichiers Markdown qui encodent nos conventions maison. L'agent cesse d'être générique : il apprend nos règles de nommage, nos tics visuels, notre façon de documenter.
Ces compétences sont composables — une skill comme Spec Up peut elle-même s'appuyer sur une compétence plus large comme Create Documentation. Elles se partagent en quelques secondes à toute une équipe, ce qui permet de faire passer à l'échelle l'expertise d'un designer senior. Résultat concret : l'IA annote seule les hiérarchies typographiques et les contrastes d'accessibilité, sans oubli.
Ce que l'agent sait vraiment faire, au-delà du prompt
Sur une démo avec l'application de randonnée Offtrails, l'agent part d'une sélection d'éléments existants pour comprendre le contexte — pas de génération magique, de l'interprétation contextuelle appuyée sur nos propres bibliothèques de composants.
Remixer et explorer plusieurs pistes en parallèle
Le parallel prompting permet de lancer plusieurs tâches en même temps : mettre à jour le contenu pour une ville, changer les photos de profil, tester un mode sombre. Le designer devient directeur artistique de plusieurs pistes à la fois.
Nous pouvons aussi demander des variations sous contrainte — changer la mise en page sans toucher aux polices ni aux couleurs — pour tester des structures différentes sans jamais sortir de la charte graphique.
L'agent va plus loin que l'esthétique pure : en important un fichier CSV de fréquence cardiaque ou d'élévation, on peuple une page de suivi de randonnée avec de vraies données. On ne conçoit plus pour un cas idéal, mais pour la réalité imprévisible des utilisateurs. Les code layers suivent la même logique : demander de transformer une liste en grille réorganise les composants, et le résultat reste interactif, pas juste visuel.
Nettoyer l'Auto Layout et remplacer le Lorem Ipsum
Fini le Lorem Ipsum qui masque les vrais problèmes de lisibilité : l'agent remplace des titres génériques par du contenu réaliste, avec les visuels qui vont avec. Il peut aussi appliquer l'Auto Layout à tous les cadres imbriqués d'une sélection en une seule commande — à condition d'avoir correctement nommé nos calques, sur lesquels il s'appuie pour comprendre la hiérarchie.
Un relecteur critique : hiérarchie visuelle et accessibilité
Soumis à une page de vente, l'agent a identifié une image héro trop petite, un contraste insuffisant sur les sélecteurs de taille et un bouton d'appel à l'action trop discret. Il peut aussi synthétiser une session de feedback en équipe en une liste d'actions concrètes — et répondre directement aux commentaires laissés sur le canevas. Un collègue demande de supprimer des bordures colorées ou d'agrandir des boutons ? L'agent interprète le commentaire et applique la modification, sans repasser par nous pour les micro-ajustements.
- Cibles tactiles sous 44 pixels → alerte ergonomie mobile
- Progression indiquée par la seule couleur → problème pour les utilisateurs malvoyants
- Commentaire vague en réunion → reformulé en correction actionnable sur le canevas
MCP + Cursor : transformer un design Figma en code qui fonctionne
Le MCP server de Figma ouvre une vraie passerelle vers le code. Contrairement à Figma Make, qui interprète une capture d'écran, le MCP donne à l'IA un accès direct au fichier — calques, variables, auto layouts.
La préparation qui change tout : Auto Layout et variables
Le résultat dépend entièrement de la rigueur en amont. Chaque espacement, chaque rayon d'angle doit être lié à une variable, pas à une valeur libre :
- gap de 8 pixels → variable assignée
- padding de 24 pixels → variable assignée
- corner radius → variable assignée
Connecter Cursor au Dev Mode MCP server
Dans les préférences de Figma Beta, on active Enable dev mode MCP server. On colle ensuite la configuration fournie par Figma dans l'onglet outils de Cursor. Il ne reste plus qu'à sélectionner notre frame et à dialoguer avec l'agent (Claude 3.5 Sonnet dans la démo) pour qu'il lise directement nos variables, styles et images.
Du pixel au code qui répond vraiment
Sur une calculatrice test, l'IA génère index.html, style.css et le JavaScript qui porte la logique de calcul. Le résultat répond réellement : 10 + 5 affiche 15, 10 × 3 affiche 30.
Le premier jet n'est pas parfait — il faut parfois corriger la taille des boutons ou l'alignement à coups de prompts précis. Mais la frontière entre design et front-end s'efface : on livre un produit fonctionnel, pas seulement une maquette.
Les limites : ce qui reste entre les mains du designer
Chaque designer a une définition différente de la corvée : certains adorent peaufiner les pixels, d'autres préfèrent l'architecture des systèmes. L'agent doit rester flexible, discret quand on ne le sollicite pas.
Figma mise aussi sur son ADN multijoueur plutôt que sur des silos : les conversations avec l'agent sont partagées et visibles par toute l'équipe, y compris la manière dont un collègue a formulé son prompt.
Conclusion : un collaborateur, pas un remplaçant
Connecteurs MCP, Custom Skills, pont vers le code : ces trois briques dessinent un agent qui s'occupe de la vaisselle pour nous laisser l'art. Le jugement esthétique et la compréhension des besoins utilisateurs restent profondément humains.
Reste à apprendre à diriger ces nouveaux prompts — et à décider, projet par projet, jusqu'où laisser l'IA aller dans notre atelier.
Liens pratiques
Cet article de synthèse est basé sur les vidéos :
- Figma Agent : comment l'intelligence artificielle transforme le flux de travail des designers professionnels
- Comment transformer vos designs Figma en code fonctionnel grâce au nouveau serveur MCP et Cursor
- L'arrivée des agents Figma : comment l'IA transforme le flux de travail des designers UI
Articles générés via Vidiome, puis fusionnés et enrichis.
