L'IA de Cursor peut générer beaucoup de code d'interface. Ce qu'elle ne peut pas faire, c'est lire votre fichier Figma. Vous collez une capture d'écran et elle devine — espacement incorrect, valeurs de couleur erronées, noms de composants inventés. Le problème ne vient pas du modèle. Il vient du contexte structuré qui manque.

figmascope comble ce fossé. L'outil exporte un fichier Figma sous forme de bundle zip — tokens de design, arbres de mise en page par écran, rendus de référence, inventaire des composants, chaînes d'interface — tout ce dont un modèle de langage a besoin pour générer un code précis plutôt qu'un code vraisemblable. L'application principale s'exécute entièrement dans votre navigateur, sans backend ni téléversement.

Cette page décrit le flux de travail complet, de l'URL Figma jusqu'à la génération de code dans Cursor. Si vous utilisez Claude Code plutôt que Cursor, consultez Figma vers Claude Code pour le flux spécifique à Claude. Pour une vue d'ensemble de ce qui rend une passation de design prête pour les agents, lisez Passation de design IA.

Contenu du bundle de contexte

Lorsque vous exécutez figmascope sur un fichier Figma, vous obtenez un .zip contenant :

Rien n'est téléversé. Votre jeton d'accès personnel réside uniquement en mémoire navigateur et n'est envoyé qu'à api.figma.com. Le zip est assemblé côté client et remis au téléchargement de votre navigateur.

Étape 1 — Obtenir un jeton d'accès personnel Figma

Accédez à Figma → Paramètres du compte → Jetons d'accès personnels et créez un jeton avec la portée Contenu des fichiers : lecture seule. C'est le minimum requis.

Le jeton ne quitte jamais votre session navigateur ; figmascope l'envoie dans l'en-tête X-Figma-Token lors des requêtes vers api.figma.com, et nulle part ailleurs. Consultez Sécurité du PAT et figmascope pour le modèle de menace complet.

Étape 2 — Exporter le bundle de contexte

  1. Ouvrez figmascope.dev dans votre navigateur.
  2. Collez l'URL du fichier Figma (ex. https://www.figma.com/file/ABC123/MyDesign).
  3. Collez votre jeton d'accès personnel.
  4. Cliquez sur Export Context Bundle.
  5. Un fichier figmascope-<fileKey>.zip est téléchargé sur votre machine.

Décompressez-le dans votre projet. Un emplacement judicieux est un dossier design/ à la racine du dépôt :

unzip figmascope-ABC123.zip -d design/
# → design/CONTEXT.md
# → design/tokens.json
# → design/screens/Home.json
# → design/screens/Home.png
# → design/components/inventory.json
# → design/strings.json
# → design/_meta.json

Étape 3 — Ouvrir le projet dans Cursor

Ouvrez votre dossier de projet dans Cursor normalement. Le répertoire design/ fait désormais partie de l'espace de travail et l'indexeur de Cursor l'inclura.

Avant de soumettre votre prompt au modèle, lisez design/CONTEXT.md vous-même une fois. Ce document indique quels frames ont été exportés, quel est le schéma de nommage des tokens, et liste les avertissements émis lors de l'export (p. ex. layout-mode-none-inferred pour les frames où Figma ne déclarait pas de mise en page automatique). Ces avertissements sont les mêmes que ceux que votre agent rencontrera.

Étape 4 — Rédiger un prompt efficace pour Cursor

Le point de départ le plus simple est un prompt de référence que vous pouvez coller dans Cursor Chat :

Read design/CONTEXT.md first, then implement the Home screen.

Use:
- design/tokens.json for all color, spacing, and typography values
- design/screens/Home.json for the layout tree
- design/screens/Home.png as the visual reference
- design/strings.json for all copy (use the resource keys as i18n identifiers)
- design/components/inventory.json to match component names

Target: React + Tailwind CSS. Map token values to Tailwind config entries rather
than hardcoding hex values. Use the component names from inventory.json as
component file names (PascalCase).

Le Composer de Cursor suivra les contraintes de CONTEXT.md, consultera l'arbre de mise en page dans Home.json, récupérera l'espacement depuis tokens.json, et produira un code qui correspond à votre système de design plutôt qu'une approximation.

Le modèle ne connaît pas votre design. Il connaît ce que vous lui fournissez. Un JSON structuré surpasse systématiquement une capture d'écran.

Étape 5 — Mapper les tokens vers la configuration de votre framework

Le fichier tokens.json exporté utilise une structure imbriquée inspirée du W3C :

{
  "color": {
    "surface": { "$value": "#f6f2ea", "$type": "color" },
    "accent":  { "$value": "#d96a3a", "$type": "color" }
  },
  "spacing": {
    "4":  { "$value": "16px", "$type": "dimension" },
    "8":  { "$value": "32px", "$type": "dimension" }
  },
  "radius": {
    "sm": { "$value": "4px",  "$type": "dimension" },
    "md": { "$value": "8px",  "$type": "dimension" }
  },
  "typography": {
    "body": {
      "fontFamily": { "$value": "Inter",  "$type": "fontFamily" },
      "fontSize":   { "$value": "14px",   "$type": "dimension" },
      "fontWeight": { "$value": 400,       "$type": "number" }
    }
  }
}

Pour Tailwind, demandez à Cursor de générer un bloc theme.extend dans tailwind.config.js directement à partir de tokens.json. Consultez Export de tokens de design pour agents IA pour une analyse approfondie du format de tokens et de l'inférence par fréquence. La structure des tokens est suffisamment plate pour être parcourue en un seul script Node si vous souhaitez automatiser cela :

// scripts/tokens-to-tailwind.js
const tokens = require('../design/tokens.json');

const colors = Object.fromEntries(
  Object.entries(tokens.color).map(([k, v]) => [k, v.$value])
);
const spacing = Object.fromEntries(
  Object.entries(tokens.spacing).map(([k, v]) => [k, v.$value])
);

module.exports = { colors, spacing };

Étape 6 — Gérer les projets multi-écrans

Chaque frame de votre fichier Figma devient un fichier screens/<NomDuFrame>.json et un .png correspondant. Pour un projet comportant une douzaine d'écrans, avancez de manière incrémentale. Cursor Composer gère bien un écran par session ; fournissez-lui le JSON et le PNG de l'écran comme références @file explicites :

@design/screens/Settings.json
@design/screens/Settings.png

Implement the Settings screen. Follow the same component structure
as the Home screen already implemented. Use tokens from design/tokens.json.

L'inventaire des composants (design/components/inventory.json) vous permet d'éviter la dérive des noms entre les écrans — chaque composant référencé dans un JSON d'écran possède un id et un name canoniques dans l'inventaire. Si vous générez une bibliothèque de composants partagés, utilisez ces noms comme source de vérité.

À quoi ressemble l'IR en pratique

Le JSON par écran utilise une structure de nœuds récursive. Voici un exemple simplifié pour un composant carte :

{
  "kind": "stack",
  "name": "ProductCard",
  "direction": "vertical",
  "gap": { "$ref": "spacing.4" },
  "padding": { "top": 16, "right": 16, "bottom": 16, "left": 16 },
  "background": { "$ref": "color.surface" },
  "radius": { "$ref": "radius.md" },
  "children": [
    {
      "kind": "leaf",
      "name": "ProductImage",
      "type": "image",
      "width": 320,
      "height": 200
    },
    {
      "kind": "leaf",
      "name": "ProductTitle",
      "type": "text",
      "text": { "$ref": "strings.product.card.title" },
      "style": { "$ref": "typography.heading.sm" }
    }
  ]
}

Les références aux tokens utilisent des chaînes $ref qui correspondent aux clés de tokens.json. Le modèle peut les résoudre sans étape de recherche supplémentaire. Consultez l'IR par écran expliqué pour le schéma complet des nœuds.

Maintenir le contexte à jour

Les fichiers de design évoluent. Une bonne habitude : relancez figmascope à chaque révision significative du design, validez le dossier design/ mis à jour, et notez la version dans la description de votre pull request. Le fichier _meta.json inclut un horodatage et le champ lastModified du fichier Figma, ce qui vous permet de comparer la date de dernière génération du bundle avec la date de dernière modification du fichier.

// _meta.json
{
  "figmascopeVersion": "1.0.0",
  "fileKey": "ABC123",
  "exportedAt": "2026-05-11T09:14:00Z",
  "figmaLastModified": "2026-05-10T18:30:00Z",
  "frameCount": 12,
  "warnings": []
}

Si warnings n'est pas vide, traitez les avertissements avant de transmettre le contexte à l'agent. Avertissements courants : strings-collision (deux nœuds ont produit la même clé de ressource) et layout-mode-none-inferred (un conteneur sans mise en page automatique explicite, pour lequel figmascope a inféré la disposition à partir des positions absolues des enfants).

Flux de travail courants avec Cursor

Mises à jour basées sur les différences

Lorsque le design a subi une révision mineure — par exemple, une valeur d'espacement est passée de spacing.4 à spacing.6 sur le composant carte — vous pouvez demander à Cursor d'appliquer uniquement le delta plutôt que de régénérer l'écran entier :

The design/tokens.json was updated. spacing.4 is now 24px instead of 16px.
Find all components using spacing.4 and update them. Do not touch anything else.

Cela fonctionne parce que vos composants générés référencent les noms de tokens sous forme de classes Tailwind (gap-spacing-4) plutôt que des valeurs en pixels bruts. Un changement de token est un remplacement global, pas une refonte.

Ajouter un nouvel écran à une base de code existante

Lorsque vous ajoutez l'écran N à une base de code qui comporte déjà les écrans 1 à N-1, l'ajout clé au prompt est d'ancrer l'agent dans la bibliothèque de composants existante :

@design/screens/Checkout.json
@design/screens/Checkout.png

Implement the Checkout screen. Reuse existing components from src/components/
wherever the component name matches design/components/inventory.json.
Only create new component files for components not already implemented.
Use design/tokens.json for all token values.

L'inventaire des composants est le pont entre le nom du composant dans le design et le nom du fichier dans la base de code. Sans lui, l'agent inventera des chemins d'import et créera des composants en double.

Générer une base de système de design

Avant d'implémenter quelque écran que ce soit, utilisez le bundle de contexte pour générer une base de système de design : la configuration des tokens, un composant de palette de couleurs, et les styles typographiques de base. Cela ancre toutes les implémentations d'écrans ultérieures sur la même fondation :

Read design/tokens.json and design/CONTEXT.md.

Generate:
1. tailwind.config.ts theme.extend block from all tokens
2. src/styles/tokens.css with CSS custom properties for the same tokens
3. src/components/foundations/ColorPalette.tsx showing all color tokens
4. src/styles/typography.css with the typography token classes

Name all classes and variables using the token key paths
(e.g. --color-accent, text-ink, bg-surface).

Une fois cette base en place, chaque implémentation d'écran peut s'y référer. L'agent ne re-dérivera pas les couleurs depuis le design à chaque session — il utilisera les classes déjà générées.

Limitations à connaître d'emblée

Le bundle de contexte de figmascope capture la structure statique. Quelques éléments qu'il ne peut pas représenter :

Le fichier CONTEXT.md indique quels frames ont été exclus et pourquoi, afin que l'agent ne tente pas d'implémenter quelque chose qui était intentionnellement hors périmètre.