La documentation de Figma elle-même montre une réponse get_design_context de 351 378 tokens pour une limite de 25 000. Cet article explique ce qui gonfle la sortie de Figma MCP, comment mesurer chaque appel et présente sept correctifs, de get_metadata à Code Connect, pour garder des réponses légères.
Vous collez un lien Figma dans votre agent de code, vous demandez une seule carte de tarification, et l’exécution échoue avec une erreur de taille de réponse. La page de dépannage de Figma affiche le message exact : une réponse get_design_context de 351 378 tokens pour un plafond de 25 000 tokens. Cette requête dépassait la limite d’un facteur quatorze. Et même lorsqu’une réponse passe sous le seuil, elle occupe quand même votre fenêtre de contexte, repousse les instructions précédentes hors de portée et est relue à chaque tour suivant.
Cet article explique pourquoi le serveur MCP de Figma produit autant de sortie, comment voir ce que coûte chaque appel et sept changements qui réduisent ces chiffres sans dégrader l’interface générée. Les noms des outils et les limites viennent de la documentation publiée par Figma. Les conseils de flux de travail viennent de ce qui se passe quand de gros fichiers de design rencontrent de petites fenêtres de contexte.
Un lien vers un nœud ne renvoie pas un seul rectangle. get_design_context extrait le contexte de design des calques sélectionnés et le restitue sous forme de code, React et Tailwind par défaut, avec d’autres frameworks disponibles. Si vous sélectionnez un cadre de page complet, chaque calque imbriqué vient avec lui : barres de navigation, cartes, instances d’icônes, styles de texte, règles d’auto layout, espacements.
Une page d’atterrissage chargée peut contenir des milliers de nœuds, et chacun porte un nom, une taille, des remplissages, des contours, des marges et des réglages de type. Une fois transformées en code, toutes ces données deviennent de longues listes de classes et un balisage profond. Or les longues listes de classes se tokenisent mal. Une règle empirique courante donne environ quatre caractères par token pour la prose anglaise, et le code dense ainsi que le balisage tassent généralement moins de caractères dans chaque token.
Quatre éléments tendent à faire grimper la réponse le plus vite :
Une seule demande de design déclenche souvent plusieurs outils de lecture, et chacun ajoute sa propre charge. La référence des outils de Figma les répertorie :
| Outil | Ce qu’il renvoie | Taille relative | Usage recommandé |
|---|---|---|---|
get_metadata | Plan XML épuré avec identifiants, noms, types, positions et tailles des calques | Petite | Cartographier un grand cadre avant de récupérer quoi que ce soit |
get_design_context | Style et structure des calques sous forme de code, React et Tailwind par défaut | Grande, augmente avec le sous-arbre | Construire un composant ou une section |
get_screenshot | PNG de la sélection pour préserver la fidélité de la mise en page | Moyenne, tokens d’image | Vérification visuelle du résultat |
get_variable_defs | Variables et styles utilisés dans la sélection : couleurs, espacements, typographie | Petite à moyenne | Faire correspondre les tokens de design |
download_assets | Exports PNG, JPG, SVG ou PDF, ou images sources d’origine | Dépend des ressources | Enregistrer des icônes et des photos sous forme de fichiers |
get_code_connect_map | Correspondances entre identifiants de nœuds et composants de code | Petite | Réutiliser les composants que vous livrez déjà |
La colonne de taille décrit en général ce que renvoie chaque outil. Les chiffres réels dépendent de votre fichier, donc mesurez avant de vous fier à une étiquette.
Les résultats des outils restent dans la conversation. Supposons qu’une récupération renvoie 40 000 tokens : chaque message suivant porte désormais ce poids. Le cache de prompts peut réduire le prix de cette relecture, mais les tokens occupent toujours la fenêtre, et ils évincent vos fichiers sources, les sorties de tests et vos instructions. Les longues sessions déclenchent alors une compaction automatique, qui résume et fait disparaître des détails que vous vouliez conserver.
💡 Vérification rapide : si l’agent ralentit ou oublie les instructions précédentes juste après un appel à Figma, accusez d’abord la réponse trop volumineuse avant d’accuser le modèle.
La plupart des clients affichent le niveau de remplissage de la fenêtre. Dans Claude Code, la commande /context s’en charge. Vérifiez le chiffre avant et après chaque appel à Figma. La différence représente le coût réel de cet appel, capture d’écran comprise, et c’est le seul chiffre qui compte pour votre fichier.
Choisissez un cadre réel et lancez trois appels dans une session vierge, en notant la taille du contexte après chacun :
get_metadata sur le cadre complet.get_design_context sur le cadre complet.get_design_context sur un nœud enfant extrait des métadonnées.Consignez les résultats dans un tableau de ce type :
| Appel | Nœud | Contexte ajouté | Remarques |
|---|---|---|---|
get_metadata | Cadre complet | À compléter | Plan seulement |
get_design_context | Cadre complet | À compléter | Vérifier l’erreur de taille |
get_design_context | Un enfant | À compléter | Comparer avec la ligne ci-dessus |
Après quelques cadres, vous disposerez de votre propre courbe de coût, qui vaut mieux que n’importe quel chiffre d’un article de blog, celui-ci compris. Ma règle empirique : visez des récupérations assez petites pour en faire cinq ou six dans une même session avant que la compaction n’intervienne. Si une seule récupération absorbe un tiers de la fenêtre, le nœud est trop gros.
Classés à peu près selon leur potentiel d’économie.
Figma recommande get_metadata pour les très grands designs, car cet outil renvoie un plan XML épuré, sans style attaché. Lisez le plan, choisissez la section dont vous avez réellement besoin, puis appelez get_design_context uniquement sur l’identifiant de ce nœud.
Run get_metadata on this frame. Do not call get_design_context yet.
List the top level sections with their node IDs and wait for my pick.
Le serveur travaille à partir du nœud que vous sélectionnez ou liez. Liez le bouton, pas la page. Construisez une page comme le ferait une personne : en-tête, section héros, tarifs, pied de page, chacun dans sa propre requête.
Nettoyez aussi le fichier source. Les calques inutilisés et les groupes très imbriqués ajoutent des nœuds que la sortie doit décrire, donc un nettoyage de dix minutes par le designer se rentabilise souvent dès la récupération suivante.
La documentation de Figma recommande de configurer Code Connect pour obtenir les meilleurs résultats de réutilisation du code. Les correspondances relient un nœud Figma à un composant réel de votre dépôt, via get_code_connect_map et add_code_connect_map. Au lieu de reconstruire un bouton à partir de styles bruts à chaque requête, l’agent peut pointer vers le bouton que vous livrez déjà. Cela signifie moins de code généré et moins de commentaires en revue de code.
Une différence à surveiller : le serveur de bureau utilise les correspondances que vous sélectionnez, tandis que le serveur distant exige que le paramètre clientFrameworks soit défini sur un libellé précis, comme React ou SwiftUI.
Lorsque les designers appliquent des variables et des styles pour la couleur, les espacements et la typographie, get_variable_defs renvoie ceux qui sont utilisés dans la sélection. Une sortie qui fait référence à un nom de token vaut mieux que le même code hexadécimal et la même valeur en pixels répétés sur des centaines d’éléments, et elle s’aligne sur les tokens déjà présents dans votre feuille de style.
💡 Demandez à l’équipe design de lier les remplissages et les espacements à des variables avant la première récupération MCP. Cela leur prend quelques minutes et vous épargne chaque requête suivante.
React et Tailwind sont la sortie par défaut. Si votre projet utilise Vue, SwiftUI ou du CSS pur, une réponse en React demande une seconde passe pour la convertir, et vous payez les deux. Indiquez la pile technique dans le prompt, et sur le serveur distant, définissez explicitement clientFrameworks. Il en va de même pour le style : précisez si vous utilisez Tailwind, des modules CSS ou une bibliothèque de composants, car mélanger les approches dans une même passe est le point de départ des réécritures.
Utilisez download_assets pour exporter les icônes et les photos sous forme de fichiers dans le dépôt, puis référencez-les par leur chemin. Ne demandez pas à l’agent de relire un nœud image pour chaque composant qui affiche le même logo. Les exports peuvent être en SVG pour les icônes et en PNG ou JPG pour les photos, choisissez donc le format qu’utilise déjà votre build. Une fois les fichiers dans le dépôt, les prompts suivants n’ont besoin que du chemin du fichier.
Figma indique que les captures d’écran peuvent être désactivées si les limites de tokens vous inquiètent, mais recommande de les garder activées, car elles préservent la fidélité de la mise en page. Un compromis raisonnable : gardez-les pour la première construction d’une section, et supprimez-les pour les petites modifications, comme un changement d’intitulé ou un ajustement de marge.
Le message d’erreur suggère d’augmenter MAX_MCP_OUTPUT_TOKENS, et la page de dépannage de Figma cite 50000 ou 100000 comme valeurs d’exemple. Dans Claude Code, vous définissez la variable dans les paramètres d’environnement, puis redémarrez l’application. Cela débloque l’appel, mais ne change rien au nombre de tokens que contient la réponse. Un plafond plus élevé laisse simplement passer une pile plus grosse dans la fenêtre.
Si l’erreur de taille persiste après la récupération d’une seule section, le nœud lui-même est lourd. Découpez-le : demandez get_metadata pour les enfants de ce nœud, puis récupérez-les un par un. Si un composant renvoie encore trop, la cause est généralement une liste d’instances très longue ou un calque riche en texte, et le correctif se fait dans le fichier Figma, pas dans le prompt.
| Approche | Effet sur le contexte | Quand c’est pertinent |
|---|---|---|
Augmenter MAX_MCP_OUTPUT_TOKENS | Aucun, cela laisse seulement passer des réponses plus grosses | Une récupération exceptionnelle que vous ne pouvez pas découper |
| Récupérer les nœuds enfants | Réduit fortement la taille de la réponse | Par défaut pour tout ce qui dépasse une section |
| Désactiver les captures d’écran | Supprime la charge liée aux images | Petites modifications |
| Code Connect | Réduit le code que l’agent écrit | Tout projet disposant d’une bibliothèque de composants |
| Nouvelle conversation par section | Efface les anciennes charges | Longues sessions |
Le fichier de règles peut rester court. Quelque chose comme ceci suffit :
Design to code rules
- Framework: React with Tailwind. Reuse components from src/components first.
- Colors and spacing: use the tokens in src/styles/tokens.css, never raw hex values.
- Figma: call get_metadata first on any frame larger than one section.
- Fetch one node per request. Do not re-pull a node that is already built.
Cela coûte quelques dizaines de tokens par session et bloque les habitudes les plus coûteuses avant qu’elles ne s’installent.
get_metadata et choisissez un nœud.Prenons une page de tarifs avec un en-tête, trois cartes d’offre, une FAQ et un pied de page. La voie coûteuse consiste à lier le cadre complet et à écrire le prompt « construisez cette page ». La voie allégée ressemble à ceci :
get_metadata sur le cadre de la page renvoie le plan et les identifiants de nœuds.get_design_context pour une seule carte d’offre, avec les captures d’écran activées.PlanCard avec des props pour le nom, le prix et les fonctionnalités.Trois cartes d’offre, une seule récupération de design. Sur une page entière, l’écart entre « une récupération par section » et « une seule récupération pour tout » c’est là que se fait l’essentiel des économies.
| Erreur | Pourquoi cela coûte | Correctif |
|---|---|---|
| Lier la page complète | Tout le sous-arbre revient | Lier une seule section |
Appeler get_design_context deux fois sur un même nœud | La même charge se retrouve deux fois dans le contexte | Réutiliser le premier résultat |
| Récupérer à nouveau pour une petite retouche | Une nouvelle charge pour une modification d’une ligne | Modifier le code directement |
| Augmenter le plafond par défaut | Les réponses surdimensionnées deviennent la norme | Garder la valeur par défaut, l’augmenter temporairement |
| Ignorer le framework | Une seconde passe de conversion | Nommer la pile en premier |
Certains correctifs se trouvent dans le fichier Figma, pas dans le prompt. Demandez à l’équipe design de découper les longs flux en une section par cadre, de nommer les sections selon leur contenu, et de conserver les composants réutilisables dans une bibliothèque au lieu de les copier d’une page à l’autre. Un fichier bien rangé donne à get_metadata un plan propre sur lequel travailler, ce qui rend chaque récupération suivante plus légère et plus facile à lire pour l’agent. Partagez-leur aussi vos chiffres sur un même cadre. Voir une récupération passer de énorme à modeste est le moyen le plus rapide de faire du coût en tokens une habitude de design.
Plusieurs serveurs communautaires prétendent compresser les données Figma en une sortie plus légère. Ils peuvent valoir un coup d’œil, mais testez-les sur un même cadre avant de les adopter, et vérifiez ce qu’ils omettent. Une réponse plus petite n’est un gain que si les détails de mise en page dont vous avez besoin sont préservés.
Une exécution de design vers code implique plus que des appels à Figma. Une bonne partie du travail autour ne doit pas du tout se dérouler dans le contexte de votre agent de code, et c’est là qu’interviennent les modèles de la collection grands modèles de langage de PicassoIA.
Les images sont un autre poste d’économie. Les photos d’en-tête et les visuels provisoires n’ont pas à transiter par le serveur Figma. Générez-les à partir d’un prompt avec Flux 2 Pro, Seedream 4.5 ou P-Image, et rien de tout cela ne touche le contexte de votre agent de code. Besoin de mouvement pour une page de destination ? Seedance 2.0 et PicassoIA Video transforment un prompt ou une image fixe en courte vidéo.
Votre prochaine session de design vers code ira plus vite si les images sont prêtes avant le premier prompt. Ouvrez Picasso IA, rédigez une brève description de scène, et lancez-la avec Flux 2 Pro et Seedream 4.5 côte à côte. Gardez celle qui convient à votre mise en page, puis animez-la avec Seedance 2.0 si la page a besoin d’un héros en mouvement.
Essayez quelques prompts aujourd’hui et voyez lesquels vous préférez. Chaque modèle est répertorié sur picassoia.com/en/all-models, vous pouvez donc en tester autant que vous le souhaitez.
Choisissez votre langue
