⟦MARQUE1⟧ ⟦MARQUE3⟧ : Connexion de ⟦MARQUE2⟧ à ⟦MARQUE0⟧ et aux agents de codage IA

Capturer une image d'une frame Figma et la coller dans Claude Code permet d'obtenir un aperçu. Connecter Figma et MCP permet d'obtenir des composants parfaitement adaptés à votre système de design, jusqu'au jeton.

L'écart entre ces deux flux de travail se résume à environ cinq minutes de configuration. La plupart des designers ne l'ont pas fait car tous les tutoriels le rendent complexe. Or, c'est très simple. Il suffit d'une seule commande et d'activer une option dans Figma. C'est tout.

Une fois la connexion établie, l'agent IA cesse de deviner ce que signifie « 20px d'espacement » et commence à lire le jeton d'espacement que vous avez défini. Il cesse d'inventer des couleurs et utilise votre palette réelle. Il cesse d'approximer votre bouton et utilise celui que vous avez déjà créé. Cela fonctionne uniquement si le système de conception à l'autre extrémité est valide.

MCP est un traducteur, pas une baguette magique.

MCP correspond à Protocole de contexte du modèle. Anthropic l'a lancé fin 2024. Figma a publié un serveur officiel en 2025. Tous les outils d'IA dignes d'intérêt en 2026 le prennent en charge.

Considérez MCP comme un port USB pour agents d'IA. Avant MCP, chaque outil souhaitant communiquer avec un modèle d'IA devait développer une intégration personnalisée. Depuis MCP, les outils utilisent simplement le protocole et tout agent compatible avec MCP peut les lire. Figma, GitHub, Slack, Linear, votre système de fichiers, vos bases de données, etc. Un seul protocole, standardisé et réutilisable.

Concrètement, le serveur MCP de Figma expose les données structurelles de vos fichiers Figma à tout agent d'IA connecté. Identifiants d'images, noms de calques, composants imbriqués, valeurs d'espacement, variables de couleur, styles typographiques, paramètres de mise en page automatique : tout est accessible. L'IA lit le contenu réel de votre fichier, et non son apparence en JPEG.

MCP n'est pas magique. C'est un câble. La connexion doit être optimale des deux côtés.

Ce que le serveur MCP de Figma expose réellement

Le serveur donne aux agents d'IA un accès en lecture à un ensemble spécifique de vos données Figma. Savoir précisément ce qu'ils peuvent et ne peuvent pas voir est crucial pour les résultats et la sécurité.

| Ce que l'IA peut lire | Pourquoi c'est important |

|------------------|----------------|

| Structure des cadres (identifiants, noms, hiérarchie) | L'agent sait quoi cibler |

| Paramètres de mise en page automatique (direction, espacement, marge intérieure) | L'espacement est fidèlement reproduit |

| Références aux variables (jetons de couleur, jetons d'espacement, typographie) | La sortie correspond à votre système |

| Instances et remplacements de composants | L'agent appelle les composants existants |

| Styles et contenu du texte | Le texte s'affiche au bon endroit |

| Remplissage d'images (URL uniquement, pas de données de pixels par défaut) | Images correctement référencées |

Ce qu'il ne peut pas lire : les fichiers privés que vous n'avez pas autorisés, les bibliothèques d'autres équipes non connectées à ce fichier, les commentaires, l'historique des versions, ni aucun élément extérieur au fichier spécifique que vous lui indiquez.

Cette limitation est importante car elle empêche une IA mal entraînée de parcourir votre espace de travail Figma. Elle lit uniquement ce que vous lui fournissez.

Installation dans Claude Code (cinq minutes)

Si Claude Code est déjà installé (sinon, consultez Claude Code pour les créateurs), MCP ne nécessite qu'une seule modification de configuration.

Étape 1 : Dans l'interface Figma, accédez aux Préférences et activez « Activer le serveur MCP local » dans les paramètres du mode développeur. Figma démarrera un serveur sur votre machine, sur le port par défaut.

Étape 2 : Dans votre terminal, ouvrez le fichier de configuration Claude Code :

claude mcp add figma http://127.0.0.1:3845/mcp --transport http

Cette simple commande enregistre le serveur local MCP de Figma auprès de Claude Code. Aucune modification de fichier JSON, aucune recherche de fichier de configuration.

Étape 3 : Redémarrez Claude Code. Lors de votre prochaine session, Claude Code détectera automatiquement Figma.

Vérifiez avec : /mcp dans une session Claude Code. Figma devrait apparaître dans la liste.

Pour l’utiliser, collez une URL Figma dans votre invite de commandes. Claude Code résout l'image via MCP, et non une capture d'écran, et fonctionne avec la structure réelle.

Installation dans Cursor (cinq minutes également)

Pour les utilisateurs de Cursor, la procédure est légèrement différente, mais le principe reste le même.

Étape 1 : Identique à la précédente. Activez le serveur local MCP de Figma sur le bureau de Figma.

Étape 2 : Dans Cursor, ouvrez les Paramètres, accédez à la section MCP, puis cliquez sur « Ajouter un serveur MCP ». Collez :

Name: figma
URL: http://127.0.0.1:3845/mcp
Transport: HTTP

Étape 3 : Enregistrez et redémarrez Cursor. Figma apparaîtra comme source de données disponible dans le panneau de l'agent.

Le curseur gère MCP de manière légèrement plus visuelle que Claude Code, avec un bouton d'activation/désactivation dans l'interface utilisateur pour chaque serveur. Fonctionnellement, les deux expériences sont identiques : vous collez une URL Figma, l'agent lit la trame réelle et le résultat correspond à votre système.

Les cinq flux de travail qu'il débloque

Conception et code fidèles. Vous collez une URL de trame Figma. Claude Code récupère la structure des calques, les valeurs de mise en page automatique, les liaisons de variables et les instances de composants. Le composant React généré utilise votre bouton, votre carte et vos jetons d'espacement réels. Aucune approximation, aucune classe inventée. Il s'agit du flux de travail phare, et son installation de cinq minutes à elle seule en vaut la peine.

Vérification Code Connect. Si vous utilisez déjà la fonctionnalité Code Connect de Figma (qui associe les composants Figma à vos composants de code), MCP permet à l'agent de vérifier cette association lors de la génération du code. Il ne créera pas de composant dupliqué par un composant déjà enregistré dans Code Connect. Moins de réinventions accidentelles.

Contrôles de synchronisation des variables. Imaginons que vous ayez renommé un jeton de couleur la semaine dernière. Demandez à Claude Code : « Lisez la trame à cette URL Figma et listez toutes les références de variables qui ne correspondent pas à notre fichier de jetons actuel. » Il détectera les écarts en une seule passe. Auparavant, cela nécessitait une session Loom de 45 minutes avec un développeur.

Utilisation de la capture d'écran comme composant de repli. Si MCP ne parvient pas à lire le fichier (appartenant au client, non partagé ou ne faisant pas partie d'une image à mise en page automatique), l'agent utilise l'analyse d'image. Vous pouvez combiner MCP pour votre propre travail et les captures d'écran comme références ponctuelles pour le client. Même invite, les deux méthodes fonctionnent.

Assurance qualité du design. Sens inverse. Demandez à Claude Code de comparer une capture d'écran d'une page déployée à une image Figma : « Voici l'URL de la page en production. Voici l'URL Figma à laquelle elle devrait correspondre. Veuillez lister les différences visuelles. » Cela permet de détecter les problèmes de « validation du designer, mais erreur de remplissage lors de la mise en production » avant la mise en production.

| Flux de travail | Sans MCP | Avec MCP |

|----------|-------------|----------|

| Conception-code | Basé sur l'intuition, nécessite une correction manuelle | Précision au niveau des jetons, utilisable dès la première passe |

| Code Connect | Étape manuelle séparée | Vérification automatique |

| Dérive des variables | Audit manuel (plusieurs heures) | Solution de repli (une ligne de commande, quelques minutes) |

| Capture d'écran (solution de repli) | Seule option disponible | Solution de repli en cas d'indisponibilité de MCP |

| Assurance qualité de la conception | Comparaison manuelle | Rapport de différences en quelques secondes |

Pour plus d'informations sur les flux de travail d'IA, consultez le reste du Brainy Papiers. Si vous souhaitez intégrer MCP à l'ensemble du pipeline conception-code de votre équipe, consultez le embauche Brainy.

Sécurité : ce que Figma voit et ce que votre IA voit

Deux questions distinctes, toutes deux importantes à comprendre.

Ce que voit Figma. Le serveur MCP s'exécute localement sur votre machine, et non sur les serveurs de Figma. Figma constate que vous avez activé MCP et voit les fichiers consultés, car l'authentification transite par votre session Figma. Pour les comptes d'entreprise, les administrateurs peuvent désactiver MCP en local au niveau de l'organisation.

Ce que voit l'agent IA. L'URL du fichier Figma que vous collez. L'agent n'a pas accès à l'intégralité de votre espace de travail Figma. Il ne voit pas les autres bibliothèques d'équipe, sauf si vous les mentionnez explicitement. Il ne voit pas les commentaires, l'historique des versions ni les fichiers non liés. Chaque invite est limitée aux éléments que vous lui fournissez.

Ce qui sort de votre machine. Si vous utilisez Claude Code avec l'API de Anthropic, les données d'image que vous demandez sont envoyées à Anthropic dans le cadre du contexte de l'invite. Cela a une incidence si votre fichier Figma contient des travaux confidentiels pour un client ou des maquettes de produits non commercialisées. Consultez la politique d'IA de votre équipe avant de connecter MCP à des fichiers sensibles.

Pour la plupart des projets de conception, cela ne pose pas de problème. Dans les secteurs réglementés ou sous accords de confidentialité avec des clauses strictes relatives aux données, vérifiez au préalable.

Les limites de Figma et MCP

Soyons honnêtes. Il s'agit de Figma et MCP en avril 2026, et non d'une version future aboutie.

La gestion des ressources d'image est limitée. MCP fournit à l'agent les URL de remplissage des images, et non les données de pixels. Pour les mises en page où l'image joue un rôle important dans la composition, l'agent doit encore deviner.

Les prototypes et les interactions ne sont pas traduits. MCP expose la structure statique. Si votre fichier Figma contient des connexions de prototype, des états de survol, des animations intelligentes ou des changements de variantes, l'agent ne les voit pas. Vous devez toujours écrire la logique d'animation manuellement.

Les plugins ne sont pas lisibles. Si un plugin Figma a généré du contenu dans votre fichier (graphiques, icônes, visualisations de données), l'agent voit la sortie comme une couche statique. Il ne peut pas régénérer la logique du plugin.

Les performances se dégradent avec les fichiers volumineux. Un fichier contenant plus de 500 images prend plus de temps à résoudre qu'un fichier contenant 20 images. Pour un résultat optimal, travaillez par pages délimitées, et non dans un seul fichier monstrueux.

Les hypothèses de mise en page automatique sont importantes. L'agent produit un rendu optimal lorsque vos cadres Figma utilisent correctement la mise en page automatique. Les mises en page libres positionnées de manière absolue s'affichent mal. Il s'agit d'un problème de méthodologie Figma, et non d'un problème MCP, mais il est particulièrement visible ici.

Aucun de ces points n'est rédhibitoire. Ce sont autant de raisons d'associer MCP à un bon ingénierie rapide, et non à une confiance aveugle.

FAQ

Figma MCP est-il gratuit ?

Oui. Le serveur MCP est intégré à Figma Desktop sans frais supplémentaires. Vous payez pour Figma et pour votre outil d'IA (Claude, Cursor, etc.). La connexion est gratuite.

Est-ce que Figma et MCP fonctionnent sur la version web ?

Le serveur local MCP est une fonctionnalité de bureau Figma. Les utilisateurs de la version web n'y ont pas encore accès. Pour un travail de conception et de développement conséquent, la configuration de bureau est de toute façon préférable.

Puis-je utiliser MCP avec plusieurs outils d'IA simultanément ?

Oui. Plusieurs agents peuvent accéder au même serveur local MCP. Claude Code, Cursor, Claude Desktop et tout autre client compatible MCP peuvent se connecter simultanément.

Que se passe-t-il si je change de fichier Figma pendant une session ?

L’agent résout la trame à l’URL que vous lui fournissez. Changer d’URL entraîne un changement de contexte. Vous pouvez référencer plusieurs fichiers dans une même conversation sans rien redémarrer.

MCP remplace-t-il le mode développeur Figma ?

Non. Le mode développeur est l’outil d’inspection destiné aux utilisateurs. MCP est la couche de données destinée aux agents. Ils sont complémentaires. En fait, les mêmes données affichées par le mode développeur sont celles que MCP expose à l’agent.

Arrêtez les captures d'écran Figma

Toutes les équipes de conception ont une mauvaise habitude : prendre une capture d'écran d'une image Figma, la coller dans ChatGPT ou Claude et demander du code. Le résultat ? Des impressions approximatives, jamais de jetons. S'ensuit une heure de correction manuelle.

Cinq minutes d'installation suffisent pour éliminer ce processus. L'agent lit l'image réelle. L'espacement est correct. Les composants sont les composants réels. Les jetons sont les jetons réels. Le code généré du premier coup est quasiment prêt à être déployé.

Activez MCP dans Figma. Installez le connecteur dans votre outil d'IA. Collez des URL, pas des captures d'écran.

La différence de qualité de rendu entre « avant MCP » et « après MCP » est flagrante. C'est l'outil le plus rentable en termes de retour sur investissement par minute dans la panoplie du designer moderne.

Arrêtez de faire des captures d'écran de Figma.