Code Connect dans le MCP Figma : -30 % de tokens, +1 point de qualité
Figma a mesuré l'impact de Code Connect dans son serveur MCP sur des tâches design-to-code : moins de tokens consommés, moins de temps d'exécution, et un code de meilleure qualité — à condition que la couverture Code Connect soit suffisante.
Profil éditorial · Webdesign & UX
En bref
- Code Connect dans le MCP Figma fournit aux agents de coding des snippets de code production réels à la place d'une représentation React générique du canvas, évitant que l'agent réinvente les composants existants.
- Les evals menés par Figma sur 27 cas de test montrent : -29,5 % de tokens, -19,6 % de durée de tâche et +1 point de qualité (échelle Likert 1–4) en médiane.
- Le facteur le plus déterminant est le taux de couverture Code Connect : plus les composants du design system sont connectés, plus les gains sont marqués.
- Coinbase (cas terrain) confirme : sans Code Connect, l'agent fabriquait ses propres versions de composants ; avec, il utilise directement les imports corrects du CDS.
- Les modèles testés sont Claude Sonnet 4.5 et Claude Opus 4.7 ; deux design systems React ont servi de base : Simple Design System (SDS) et Figma Pattern Library (FPL).
Sommaire6 sections
Le vrai coût d'un agent qui ne connaît pas votre design system
Un agent de coding branché sur le MCP Figma reçoit, via l'outil get_design_context, une description React du canvas — visuellement fidèle, mais aveugle à la façon dont ces éléments correspondent aux composants réellement maintenus dans votre codebase. Sans ce lien, l'agent improvise : il reconstruit un composant from scratch, pioche le mauvais élément dans votre design system, ou finit par trouver le bon après une série de recherches et de réécritures qui coûtent du temps et des tokens pour rien.
Figma a mesuré précisément ce que Code Connect — la couche de mapping entre composants Figma et composants de code réels — change à ce comportement une fois branchée sur le MCP.
Ce que Code Connect change concrètement dans la réponse MCP
Quand des templates Code Connect sont configurés, le serveur MCP substitue des portions du React générique par des snippets de code réellement utilisés en production. L'agent sait alors précisément quel composant importer et quelles props lui passer, plutôt que de deviner à partir d'une capture visuelle.
Sans Code Connect, l'agent reçoit une reconstruction générique :
<div role="tablist" className="flex gap-1 rounded-md bg-gray-100">
<button className="bg-white shadow rounded">Design</button>
<button className="text-gray-600">Code</button>
</div>
Avec Code Connect, il reçoit directement l'appel au composant réel du design system :
<SegmentedControl value="design" options={["Design", "Code"]} />
Ce que révèlent les chiffres
Figma a construit un harness d'évaluation comparant les mêmes tâches design-to-code avec et sans Code Connect, sur 27 cas de test couvrant deux design systems React : Simple Design System (SDS, très bien Code Connecté, ~20 % des réponses MCP testées) et Figma Pattern Library (FPL, plus complexe, ~6 % de couverture). La qualité du code a été jugée par des LLM sur cinq critères (correction, propreté, maintenabilité, complétude, bonnes pratiques), avec les modèles Claude Sonnet 4.5 et Claude Opus 4.7.
En médiane, sur l'ensemble des runs :
Métrique Impact Qualité du code +1 point (échelle 1–4) Tokens consommés -29,5 % Durée de la tâche -19,6 %
Le facteur qui fait bouger ces chiffres n'est pas le modèle utilisé, mais le taux de couverture Code Connect. Sur FPL, où la couverture est plus partielle, les runs sans Code Connect allaient jusqu'à inspecter node_modules ou reconstruire une tab bar entière en CSS custom. Avec Code Connect, l'agent allait directement aux composants Tabs et Button du design system, en environ 77 % du temps et 62 % des tokens d'un run classique.
Fait notable : même sur SDS, un cas déjà favorable pour un LLM (noms de composants et de propriétés cohérents entre design et code), les gains restent supérieurs à ceux de FPL — uniquement parce que la couverture Code Connect y est quasi totale. La couverture prime sur la simplicité du design system lui-même.
Coinbase : de la théorie au design system en production
L'équipe Coinbase Design Systems a testé la bascule vers un workflow piloté par agents en investissant dans Code Connect. Erich Kuerschner, Frontend Engineer, a comparé le même design et le même prompt avec et sans Code Connect : sans, l'agent pouvait « fabriquer sa propre version des composants » — reconstruire un stepper à partir de simples progress bars, par exemple. Avec Code Connect, la qualité de sortie et la consommation de tokens progressaient dans le même run.
Ce que ça change pour une agence qui gère plusieurs design systems clients
Ces chiffres ont une implication directe pour une agence qui utilise déjà Figma, le MCP et des agents de coding en interne : Code Connect n'est plus un confort de handoff pour développeurs humains, c'est un levier direct sur votre facture de tokens et vos délais de production, à condition d'être maintenu à jour.
Le vrai enjeu opérationnel n'est pas de tout Code Connecter d'un coup, mais de prioriser par fréquence d'usage : les composants qui reviennent dans la majorité de vos maquettes clients (boutons, inputs, cartes, éléments de navigation) génèrent un ROI immédiat une fois connectés, quand un composant marginal utilisé une fois par trimestre ne justifie pas l'effort de maintenance.
Ça pose aussi une question d'arbitrage propre à une agence multi-clients : maintenir la couverture Code Connect à jour pour un seul design system interne est un coût ponctuel. Le faire pour plusieurs design systems clients qui évoluent chacun à leur rythme devient vite un chantier récurrent — à budgétiser explicitement dans un forfait de maintenance plutôt qu'à traiter comme un simple réglage technique une fois pour toutes.
Source
Article inspiré / réécrit à partir de :
