Cursor Composer peut écrire beaucoup de code UI. Ce qu'il ne peut pas faire, c'est lire votre fichier Figma. Collez une capture d'écran et il devine — mauvais espacement, valeurs de couleur inventées, noms de composants imaginaires qui ne correspondent à rien dans votre base de code. Le problème ne vient pas du modèle. Il vient du contexte structuré manquant.

figmascope résout ça. Il exporte votre fichier Figma sous forme de bundle zip : tokens de design, arbres de mise en page par écran, rendus de référence à 2×, inventaire de composants, et chaînes UI — tout ce dont l'agent Cursor a besoin pour générer du code précis plutôt que du code vraisemblable.

Ce tutoriel couvre l'intégralité du pipeline : URL Figma → bundle de contexte → prompt Cursor → sortie révisée.

Ce qui est dans le bundle

Quand figmascope exporte votre fichier, le zip contient :

Le bundle reste sur votre machine. Il n'est jamais rechargé nulle part.

Étape 1 : Générer le bundle

Rendez-vous sur figmascope et collez l'URL de votre fichier Figma dans le champ de saisie. L'exporteur s'exécute dans votre navigateur via l'API REST Figma — vous aurez besoin d'un token d'accès personnel la première fois (stocké dans localStorage, jamais envoyé aux serveurs de figmascope).

Cliquez sur Export Agent Context. La page traite chaque frame, résout les tokens, construit l'IR, puis télécharge context-bundle.zip sur votre machine.

Si votre fichier a de nombreux frames, seuls les frames de niveau supérieur qui ne sont pas des composants ou des vignettes sont inclus. Le _meta.json montre exactement quels frames ont été exportés et les éventuels avertissements (remplissages en dégradé, effets non supportés).

Étape 2 : Décompresser dans votre projet

Placez le bundle là où Cursor peut le voir — un répertoire design/ à la racine de votre dépôt est le modèle le plus propre.

# depuis la racine de votre projet
unzip ~/Downloads/context-bundle.zip -d ./design/

# vérifier la structure
ls design/
# CONTEXT.md  _meta.json  components/  screens/  strings.json  tokens.json

Ajoutez design/ à .gitignore si vous ne voulez pas committer le bundle. Ou committez-le — il est déterministe ; le même fichier Figma dans le même état produit toujours le même bundle, donc les diffs sont significatifs.

Étape 3 : Ajouter un extrait .cursorrules

Cursor lit .cursorrules à la racine du dépôt et le préfixe à chaque contexte de chat. C'est là que vous connectez l'agent au bundle.

# .cursorrules

When building UI screens:
1. Read ./design/CONTEXT.md first. It specifies the target framework and constraints.
2. Use tokens from ./design/tokens.json for all spacing, color, radius, and typography values.
3. Reference ./design/screens/<name>.json for layout structure and node hierarchy.
4. Match ./design/screens/<name>.png for visual confirmation — use it as a sanity check, not the source of truth.
5. Use string keys from ./design/strings.json rather than hardcoding UI copy.
6. Do not invent token values. If a value isn't in tokens.json, flag it.

Ce seul bloc empêche les trois sources de dérive les plus courantes : couleurs inventées, chaînes codées en dur, et layout deviné depuis la capture d'écran.

Étape 4 : Ouvrir Cursor Composer et implémenter un écran

Ouvrez Composer (Cmd+I sur macOS). Épinglez les fichiers avant de prompter : cliquez sur l'icône trombone et ajoutez design/CONTEXT.md, design/tokens.json, et design/screens/home.json. Puis promptez :

Implement the home screen from ./design/screens/home.json.

Constraints:
- Target framework and component conventions are in ./design/CONTEXT.md
- All spacing, color, and radius values must come from ./design/tokens.json
- UI strings must use keys from ./design/strings.json
- The root node is a stack (vertical). Children are declared in order in the JSON.
- Do not invent any values not present in the token or IR files.

Cursor lira les fichiers épinglés, mappera les nœuds IR aux primitives de votre framework, et générera l'implémentation. La sortie est référencée par des tokens — si vous inspectez le code généré, chaque valeur d'espacement devrait être traçable jusqu'à une clé dans tokens.json.

Étape 5 : Réviser et itérer

Ouvrez design/screens/home.png à côté de la sortie rendue. Le PNG est un export à 2× depuis Figma — il montre exactement à quoi le design devrait ressembler. Les différences sont significatives : elles pointent soit vers des lacunes de mapping IR soit vers des valeurs de tokens non appliquées.

Problèmes courants et prompts de suivi :

Dérive des tokens — l'agent a utilisé un hex codé en dur au lieu d'un token :

Compare every color value in the generated component against ./design/tokens.json.
List any colors that don't match a token key. Replace them with the correct token reference.

Composant manquant — l'IR référence un ID de composant que l'agent n'a pas résolu :

The IR references componentId "btn-primary-01". Check ./design/components/inventory.json
for its name and type, then implement a placeholder with that name and the correct token values.

Mise en page incorrecte — l'espacement ou l'alignement ne correspond pas au PNG :

The vertical gap between the header and the card list should be spacing.24 from tokens.json (24dp).
Your output uses 16px. Fix it.

Ce qui fonctionne, ce qui ne fonctionne pas

Fonctionne bien : écrans plats avec des mises en page stack, espacement et couleur pilotés par les tokens, texte avec références de chaînes, modèles simples de cartes et listes. Cursor gère bien tout ça une fois l'IR en contexte — il arrête de deviner et commence à mapper.

Fonctionne moins bien : superpositions complexes positionnées en absolu (Cursor lit parfois mal les coordonnées d'offset), remplissages en dégradé (signalés comme avertissements dans _meta.json — Cursor les approximera), et icônes vectorielles (l'IR ne stocke qu'un ID de référence, pas les données de chemin).

Capture d'écran seule vs bundle : utiliser uniquement la capture d'écran est plus rapide au départ mais non déterministe. Chaque session repart de zéro. Le modèle peut bien gérer l'espacement une fois et le rater au tour suivant. Le bundle est référençable tout au long de la session — Cursor peut vérifier sa propre sortie par rapport au fichier de tokens à tout moment sans rien uploader.

Astuce : vérifier les avertissements de _meta.json avant de prompter

Avant votre premier prompt d'implémentation, lisez design/_meta.json. Le tableau warnings liste tout ce que l'exporteur n'a pas pu résoudre complètement : remplissages en dégradé, mappings de tokens manquants, frames avec images intégrées. Ajoutez une note à ce sujet dans votre prompt pour que l'agent n'essaie pas de les implémenter et ne retombe pas silencieusement sur des valeurs codées en dur.

cat design/_meta.json | python3 -m json.tool | grep -A 20 '"warnings"'

Si la sortie montre "gradientFill: not fully supported" sur un nœud spécifique, dites à Cursor de sauter le fond de ce nœud et de laisser un commentaire // TODO: gradient à la place.

Résumé

Le workflow est : exporter une fois, référencer partout. Le bundle est une spec stable et lisible par machine que Cursor peut consulter sur plusieurs tours sans retraiter le design. Vous obtenez un code précis en termes de tokens, référencé par des chaînes, correct en termes de mise en page plutôt qu'une approximation par capture d'écran — et quand quelque chose dérive, vous pouvez remettre l'agent sur la source de vérité en une ligne.

Faites-le vous-même sur figmascope.dev — collez votre URL Figma, cliquez sur Export Agent Context, et décompressez le bundle dans votre espace de travail Cursor en moins de deux minutes.