La passation de design a été un problème résolu pour les développeurs humains depuis environ 2016. Zeplin, InVision Inspect, Avocode, Dev Mode de Figma — tous font la même chose : donner au développeur une interface web où il peut cliquer sur un nœud et lire ses propriétés.

Ce flux de travail s'effondre complètement lorsque le « développeur » est un agent IA.

Cet article explique pourquoi, ce dont les agents ont réellement besoin, et comment structurer un flux de passation qui produit un code correct plutôt qu'approximatif. La solution est figmascope — un outil basé sur le navigateur qui exporte un bundle de contexte structuré directement depuis votre fichier Figma. Pour les flux de travail étape par étape, consultez Figma vers Claude Code ou Figma vers Cursor.

Le postulat de la passation de design

Chaque outil de passation construit avant 2023 repose sur le même postulat implicite : un humain est de l'autre côté, qui navigue, lit les valeurs, prend des décisions. Le rôle de l'outil est d'exposer l'information suffisamment clairement pour qu'un développeur compétent puisse travailler à partir de celle-ci sans avoir à constamment jongler entre l'outil et le designer.

Ce postulat est ancré dans toute l'UX de ces outils :

Rien de tout cela n'est faux. C'est correct pour le flux de travail du développeur humain. C'est simplement la mauvaise interface pour un agent.

Ce dont les agents ont réellement besoin depuis un design

Un agent IA qui reçoit une tâche de design a besoin de :

  1. Une spécification qu'il lit avant de faire quoi que ce soit — contraintes, périmètre, conventions de nommage des tokens, notes de version. Pas implicite par un survol de panneau ; rédigée explicitement.
  2. Un dictionnaire de tokens typés — pas des valeurs hexadécimales et des nombres en pixels bruts, mais des tokens nommés et typés avec leurs valeurs. L'agent a besoin de savoir que #d96a3a est color.accent pour pouvoir générer les bons noms de classes Tailwind ou les propriétés CSS personnalisées correctes.
  3. Un arbre de mise en page complet — la hiérarchie de chaque nœud, leurs relations de mise en page, leurs tailles, leurs références de tokens. Pas un nœud à la fois à la demande ; l'arbre complet en mémoire.
  4. Des chaînes consolidées — tout le contenu textuel, normalisé, avec des clés de ressource. Pas éparpillé sur des nœuds individuels.
  5. Une vérité visuelle — un rendu de référence que l'agent peut comparer avec sa sortie. Une capture d'écran du design à 2×.
  6. Des noms de composants — des identifiants canoniques que le code généré doit utiliser, pas des noms inventés.

Les outils de passation traditionnels n'offrent aucun de ces éléments dans une forme utilisable par un agent. L'application figmascope les produit tous dans un seul zip — collez votre URL Figma, obtenez le bundle. Aucun téléversement, aucun backend. Le format des tokens est traité en profondeur dans Export de tokens de design pour agents IA.

Pourquoi les captures d'écran échouent

La solution de contournement la plus rapide que les gens tentent : exporter un PNG depuis Figma et le passer à l'agent avec un prompt du type « implémente cet écran ». L'agent produit du code. Parfois, ça ressemble à quelque chose de proche. Mais :

Chacune de ces erreurs est individuellement mineure. Ensemble, elles s'accumulent pour former un composant qui nécessite des corrections manuelles significatives — ce qui annule la plupart des gains de temps liés à l'utilisation d'un agent.

Consultez pourquoi les captures d'écran échouent pour la génération de code IA pour une analyse détaillée avec des exemples.

Une capture d'écran dit à l'agent à quoi ressemble le design. Un contexte structuré lui dit ce qu'est le design.

Les outils de passation traditionnels, évalués

Zeplin

L'interface principale de Zeplin est une application web où les développeurs inspectent les designs nœud par nœud. Elle dispose d'une fonctionnalité « Styleguide » qui agrège les couleurs et la typographie du fichier — ce qui s'approche le plus d'un export de tokens. Elle n'exporte pas d'arbres de mise en page lisibles par machine. Sa fonctionnalité « Connected Components » lie les composants Storybook aux frames Figma, ce qui est utile pour la documentation mais n'aide pas un agent à générer du nouveau code.

Figma Dev Mode

La réponse native de Figma à la passation. Le panneau de code génère du CSS depuis les nœuds sélectionnés et affiche les noms de Variables lorsqu'elles sont configurées. Bien conçu pour les développeurs humains. Ne prend pas en charge l'export au niveau du fichier, ne génère pas d'arbres de mise en page, et ses extraits de code sont en CSS uniquement (pas des tokens agnostiques au framework). Nécessite une licence Dev Mode.

Avocode

Avocode a été acquis par Abstract puis abandonné en 2022. Mentionné car il apparaît encore dans les résultats de recherche pour « outils de passation de design » et génère du trafic de comparaison. Il n'est plus disponible.

Locofy, Builder.io, Anima

Ces outils tentent de générer du code de framework réel (React, Next.js, HTML) directement depuis les designs Figma. Ils sont plus proches de l'espace du problème — ils comprennent que la sortie doit être du code, pas simplement un panneau de propriétés. Mais ils génèrent du code que vous déployez, pas du contexte que vous fournissez à un agent. La distinction est importante : vous ne pouvez pas demander « implémente l'écran Settings en réutilisant le composant UserAvatar que j'ai déjà construit » lorsque l'outil génère lui-même le code. Vous pouvez le demander à Claude Code ou Cursor lorsque vous leur avez fourni le contexte structuré.

Consultez figmascope vs Locofy et figmascope vs Builder.io pour des comparaisons détaillées.

À quoi ressemble une passation prête pour les agents

La passation prête pour les agents présente trois propriétés qui la distinguent de la passation traditionnelle :

1. C'est un artefact fichier, pas une interface

L'artefact de passation est un fichier versionné (ou un ensemble de fichiers) qui vit dans le dépôt aux côtés du code. Pas un lien partagé qui nécessite une connexion. Pas un panneau dans une application web. Un répertoire design/ avec des fichiers JSON, PNG et Markdown.

Cela a plusieurs conséquences :

2. Il utilise des données typées, pas du texte rendu

Les tokens de design dans tokens.json sont typés — $type: "color", $type: "dimension" — pas simplement des chaînes dans un tableau Markdown. L'IR de mise en page dans screens/*.json a des types de nœuds explicites (stack, overlay, absolute, leaf) et des références de tokens en notation $ref. Les chaînes dans strings.json ont des clés en notation pointée, pas seulement des étiquettes lisibles par l'humain.

Les données typées signifient que l'agent peut raisonner à leur sujet de manière programmatique : « tous les nœuds avec background.$ref == color.surface utilisent la même couleur de fond », pas « tous les nœuds qui semblent avoir le même fond ».

3. Il inclut un document de spécification que l'agent lit en premier

CONTEXT.md est le contrat entre le designer et l'agent. Il décrit :

La passation traditionnelle n'a pas d'équivalent. Dev Mode dispose d'un champ « notes développeur » par frame, mais il est rédigé de façon ad hoc par un designer sans structure. CONTEXT.md est généré de manière cohérente à partir du contenu réel du fichier.

Le flux de passation étape par étape

  1. Le designer marque les frames comme prêts — dans Figma, le designer signale les frames qui sont prêts pour l'implémentation (convention de nommage, étiquette « prêt », selon les habitudes de votre équipe).
  2. Le développeur exécute figmascope — collez l'URL du fichier et le PAT sur figmascope.dev, cliquez sur exporter, téléchargez le zip.
  3. Décompressez dans design/ — unzip figmascope-<fileKey>.zip -d design/
  4. Validez design/ dans le dépôt — le bundle est l'artefact de passation. La PR inclut à la fois le bundle de design et l'implémentation.
  5. L'agent implémente — pointez Claude Code ou Cursor vers design/CONTEXT.md et le JSON d'écran pertinent. L'agent génère du code qui utilise les valeurs de tokens, les noms de composants et les chaînes du bundle.
  6. Revue et itération — le développeur vérifie par rapport aux screens/*.png, note les écarts, affine les prompts.

Lorsque le design change, recommencez à l'étape 2. L'horodatage dans _meta.json indique quand le bundle a été dernièrement généré par rapport à la dernière modification du fichier Figma — une vérification simple de fraîcheur.

{
  "figmascopeVersion": "1.0.0",
  "fileKey": "ABC123",
  "exportedAt": "2026-05-11T09:14:00Z",
  "figmaLastModified": "2026-05-10T18:30:00Z",
  "frameCount": 8,
  "warnings": [
    {
      "code": "layout-mode-none-inferred",
      "message": "Frame 'Modal' has no auto-layout; child positions inferred from absolute coordinates.",
      "nodeId": "2:34"
    }
  ]
}

Ce qui ne change pas

La passation prête pour les agents ne remplace pas la revue de design. L'agent implémente à partir du contexte structuré ; un humain vérifie toujours la sortie. Les états d'interaction, les animations, le comportement responsive, l'accessibilité — tout cela nécessite un jugement que l'agent peut approximer mais ne peut pas garantir à partir des seules données de design statiques.

Le contexte structuré ne remplace pas non plus la conversation designer-développeur. Si un token est nommé de façon ambiguë, ou si un composant se comporte différemment selon les points de rupture par rapport à ce que suggère le frame statique, cela nécessite une conversation. CONTEXT.md capture ce qui est dans le fichier ; il n'infère pas ce que le designer avait l'intention de faire dans les cas que le fichier n'aborde pas.

Ce qui change : l'implémentation de mises en page d'écrans statiques à partir d'un design stable passe d'un processus manuel de plusieurs heures à un flux de travail de prompt-et-revue. L'agent gère la traduction mécanique ; le développeur gère les décisions de jugement.

Liste de contrôle : votre passation de design est-elle prête pour les agents ?

Si la plupart de ces éléments sont absents, l'agent produira du code qui nécessite plus de corrections que de partir de zéro avec un bon contexte. Le bundle que figmascope génère satisfait tous ces critères en un seul export. Visitez le blog figmascope pour des études de cas et des analyses approfondies de chaque élément de la liste de contrôle, ou consultez Alternative à l'inspecteur Figma pour une comparaison directe avec Dev Mode et les plugins.