Figma Dev Mode est la première chose vers laquelle on se tourne naturellement quand un designer vous remet un travail. C'est intégré, c'est officiel, ça parle le langage de Figma. Alors pourquoi chercherait-on autre chose ?

La réponse n'est pas que Dev Mode est mauvais. C'est qu'il résout un problème différent. Comprendre quel est ce problème — et ce qu'il n'est pas — c'est l'objet de cet article. Si vous voulez aller directement à la réponse, essayez figmascope ici.

Ce qu'est Figma Dev Mode

Dev Mode est la couche de passation payante de Figma, disponible sur les plans Professional et Organization. Quand vous l'activez (le bouton </> dans la barre d'outils supérieure), vous obtenez un panneau qui affiche du CSS ou des extraits iOS/Android pour les calques sélectionnés, des annotations de composants, les valeurs de variables, et un marqueur de statut « prêt pour les développeurs » que les designers peuvent définir.

Il est conçu pour le moment où un designer dit « c'est terminé, allez construire ». Le développeur ouvre Figma, clique, copie des extraits, examine l'espacement. Pas d'étape d'export. Pas de fichier. Vous lisez simplement le design en place.

Figma fournit également un serveur MCP officiel pour Dev Mode (distinct — couvert dans la comparaison MCP), mais Dev Mode en tant qu'interface est avant tout une expérience de lecture humaine. Vous pointez, cliquez, inspectez, copiez.

Les extraits de code générés par Dev Mode sont genuinement utiles comme références rapides. Vous voyez la pile typographique, les tokens d'espacement exacts si les variables sont configurées, les rayons de bordure. Pour un développeur senior qui a juste besoin de vérifier une valeur spécifique, c'est rapide.

Ce qu'est figmascope

figmascope est un outil côté navigateur — pas de backend, pas d'installation, fonctionne dans un onglet — qui exporte un bundle de contexte structuré depuis n'importe quel fichier Figma. Vous collez une URL Figma et un Personal Access Token (conservé en mémoire, jamais envoyé à un serveur), et il produit un .zip contenant :

Le bundle est constitué de fichiers simples. Pas de runtime. Pas de SDK. Déposez-le dans un dépôt, commitez-le, diffez-le, confiez-le à n'importe quel agent IA qui lit des fichiers.

La différence clé avec Dev Mode : ce n'est pas une expérience de lecture dans Figma. C'est un export qui quitte Figma entièrement.

Là où Dev Mode l'emporte

Inspection en direct. Si vous voulez cliquer sur un calque spécifique et obtenir sa valeur calculée exacte immédiatement, Dev Mode est instantané. Pas d'étape d'export, pas de zip, pas de changement de contexte. La réponse est dans le panneau.

Intégration officielle. Figma le construit, le maintient et livre des améliorations en parallèle du reste du produit. Support des variables, workflows d'annotation, marqueurs de statut prêt-pour-dev — ce sont des fonctionnalités natives avec un soutien officiel. Quand Figma ajoute une nouvelle capacité de système de design, Dev Mode en bénéficie.

Distribution d'équipe. Chaque designer et développeur sur un plan Figma org l'a déjà. Pas d'outillage supplémentaire à installer, expliquer ou maintenir.

Outillage au moment du design. Les designers peuvent marquer les frames comme prêtes, laisser des annotations au niveau du code, et collaborer avec les développeurs sur le même canevas. Cet échange est genuinement utile pour les cycles de QA où vous avez besoin de commentaires et de mises à jour de statut.

Là où figmascope l'emporte

Sortie agnostique aux agents, basée sur des fichiers. La sortie de Dev Mode vit dans Figma. La sortie de figmascope vit dans un zip que vous contrôlez. Déposez-le à côté de votre code, pointez Claude Code ou Cursor dessus, et l'agent a la spec complète — tous les écrans, tous les tokens, toutes les chaînes — sans avoir besoin de se connecter à Figma du tout.

Contrôle de version. Un bundle figmascope est diffable. Commitez-le. Mettez-le dans une PR. Voyez exactement quels tokens ont changé entre le design de la semaine dernière et celui d'aujourd'hui. Dev Mode n'a pas de concept d'historique de version pour la spec elle-même — Figma a un historique de versions de fichiers, mais c'est pour la source, pas pour un instantané exportable de l'intention de design.

Pas de tier payant requis. figmascope est sous licence MIT et gratuit. Il utilise l'API REST publique de Figma, qui ne nécessite qu'un PAT (gratuit sur tout compte Figma). Dev Mode nécessite un plan Professional ou Organization. Pour les développeurs solo ou les petites équipes travaillant avec un designer sur un plan gratuit, figmascope est la seule option.

Sortie déterministe. Chaque export du même fichier Figma à la même version produit le même bundle. Même JSON, mêmes tokens, mêmes chaînes. Cela compte pour la reproductibilité — vous pouvez l'exécuter en CI, épingler un bundle à une release, faire des tests de régression dessus.

Portable et hors ligne. Une fois que vous avez le bundle, il fonctionne sans connexion à Figma ni à aucun serveur. Le contexte de l'agent est autonome. Utile quand vous êtes dans un avion, derrière un pare-feu, ou que vous voulez simplement ne pas dépendre de la disponibilité de Figma pendant un sprint de développement.

L'IR préserve la sémantique spatiale. La représentation intermédiaire screens/*.json capture le type de mise en page (stack, overlay, absolute), l'identité des composants (componentId sur les nœuds INSTANCE), et les références de chaînes textuelles — pas seulement du CSS calculé. Un agent peut raisonner sur la structure de mise en page, pas seulement copier des extraits.

Côte à côte : même fichier Figma

Prenez un écran de connexion avec un formulaire, un bouton principal, et quelques tokens textuels. Voici ce que chaque outil vous donne :

Sortie Dev Mode : Propriétés CSS pour le calque sur lequel vous avez cliqué (font-size: 16px; color: #1f1d1a; border-radius: 8px). Un calque à la fois. Vous copiez ce dont vous avez besoin. Si vous voulez tous les états du bouton, vous cliquez sur chacun. Si vous voulez le nom du token, il est là si le designer a câblé les variables — absent sinon.

Sortie du bundle figmascope : CONTEXT.md avec la spec complète de l'écran de connexion. tokens.json avec color.text.primary, spacing.4, radius.md — clés, typés, issus des variables ou inférés. screens/login.json avec l'arbre IR : un conteneur stack tenant une INSTANCE de formulaire référençant componentId: "abc123", des nœuds leaf enfants avec stringRef.key: "auth.login.cta". strings.json mappant cette clé sur « Se connecter ». screens/login.png à 2×.

Vous confiez le bundle à Cursor. Il lit CONTEXT.md, tire les noms de tokens depuis tokens.json, construit le composant depuis l'IR. Il n'a pas besoin d'ouvrir Figma du tout.

Comparaison

Dimension Figma Dev Mode figmascope
Tarification Payant (plan Professional / Org) Gratuit, open source MIT
Format de sortie Panneau in-Figma, extraits CSS/iOS/Android .zip : CONTEXT.md, tokens.json, screens/*.json, *.png
Modèle d'intégration Dans l'UI Figma, inspection par calque Export navigateur, puis fichiers simples n'importe où
Compatible agents Via serveur MCP (fonctionnalité distincte) Tout agent qui lit des fichiers (Claude Code, Cursor, Aider, Copilot…)
Compatible contrôle de version Non (la sortie vit dans Figma) Oui — bundle diffable, commitable
Sortie déterministe Non (par clic, lié à la session) Oui — même version de fichier → même bundle
Hors ligne / portable Non — nécessite une connexion Figma Oui — le bundle fonctionne sans aucune connexion
Annotation au moment du design Oui — prêt-pour-dev, commentaires Non
IR spatial / mise en page Non — CSS plat pour le calque sélectionné Oui — stack/overlay/absolute/leaf avec identité des composants
Source des tokens Depuis les variables Figma si configurées Variables Figma → inférés par fréquence → aucun
Clés de chaînes i18n Non Oui — stringRef.key dans l'IR + strings.json
Nécessite l'installation d'un plugin Non (intégré à Figma) Non (onglet navigateur, API REST)

Quand utiliser chacun

Utilisez Dev Mode quand : vous avez besoin de vérifier ponctuellement une valeur spécifique, vous êtes au milieu d'une révision de design et voulez rechercher un token, votre équipe est déjà sur un plan Figma payant et vit dans Figma, ou vous voulez le workflow d'annotation du designer et les marqueurs de statut prêt-pour-dev.

Utilisez figmascope quand : vous transmettez le contexte à un agent IA pour un sprint de développement, vous voulez versionner la spec de design aux côtés du code, vous êtes sur un plan Figma gratuit, vous avez besoin de l'IR de mise en page complet (pas seulement du CSS par calque), ou vous voulez une sortie déterministe et reproductible que vous pouvez épingler à une release ou differ dans une PR.

Ils ne sont pas mutuellement exclusifs. Utilisez Dev Mode pour inspecter pendant le développement, exportez des bundles figmascope pour ancrer la spec de design dans votre dépôt. Les deux ne sont pas en compétition — ils couvrent des parties différentes du workflow.