Cursor's AI kan veel UI-code schrijven. Wat het niet kan, is je Figma-bestand lezen. Je plakt een screenshot erin en het raadt — verkeerde afstand, verkeerde kleurwaarden, verzonnen componentnamen. Het probleem zit niet in het model. Het zit in de ontbrekende gestructureerde context.

figmascope overbrugt dat gat. Het exporteert een Figma-bestand als een zip-bundel — ontwerptokens, per-scherm layoutbomen, referentierenderings, componentinventaris, UI-teksten — alles wat een taalmodel nodig heeft om nauwkeurige code te genereren in plaats van plausibel ogende code. De hoofdapp draait volledig in je browser zonder backend of upload.

Deze pagina doorloopt de volledige workflow van Figma URL tot Cursor codegen. Als je Claude Code gebruikt in plaats van Cursor, zie Figma naar Claude Code voor de Claude-specifieke workflow. Voor een bredere kijk op wat overdracht agent-klaar maakt, zie AI-ontwerpoverdracht.

Wat zit er in de contextbundel

Wanneer je figmascope op een Figma-bestand laat draaien, krijg je een .zip met:

Er wordt niets geüpload. Je Personal Access Token blijft alleen in het browsergeheugen en wordt alleen naar api.figma.com gestuurd. De zip wordt aan de clientzijde samengesteld en door de download van je browser aangeboden.

Stap 1 — Haal een Figma Personal Access Token op

Ga naar Figma → Accountinstellingen → Personal Access Tokens en maak een token aan met het bereik Bestandsinhoud: alleen-lezen. Dat is het minimale vereiste.

Het token verlaat je browsersessie nooit; figmascope stuurt het in de X-Figma-Token-header bij verzoeken aan api.figma.com en nergens anders. Zie PAT-beveiliging en figmascope voor het volledige bedreigingsmodel.

Stap 2 — Exporteer de contextbundel

  1. Open figmascope.dev in je browser.
  2. Plak de Figma-bestands-URL (bijv. https://www.figma.com/file/ABC123/MijnOntwerp).
  3. Plak je Personal Access Token.
  4. Klik op Exporteer contextbundel.
  5. Er wordt een figmascope-<fileKey>.zip naar je computer gedownload.

Pak het uit in je project. Een verstandige locatie is een map design/ in de repo-root:

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

Stap 3 — Open het project in Cursor

Open je projectmap in Cursor zoals gewoonlijk. De map design/ maakt nu deel uit van de werkruimte en Cursor's indexer zal deze opnemen.

Lees design/CONTEXT.md zelf even door voordat je het model aanspreekt. Het vertelt je welke frames zijn geëxporteerd, wat het naamgevingsschema van tokens is en geeft eventuele waarschuwingen die tijdens export zijn gegenereerd (bijv. layout-mode-none-inferred voor frames waarbij Figma geen auto-layout rapporteerde). Deze waarschuwingen zijn dezelfde die je agent zal tegenkomen.

Stap 4 — Schrijf een effectieve Cursor-prompt

Het eenvoudigste beginpunt is een referentieprompt die je in Cursor Chat kunt plakken:

Lees eerst design/CONTEXT.md en implementeer vervolgens het Home-scherm.

Gebruik:
- design/tokens.json voor alle kleur-, afstand- en typografiewaarden
- design/screens/Home.json voor de layoutboom
- design/screens/Home.png als visuele referentie
- design/strings.json voor alle tekst (gebruik de resourcesleutels als i18n-identifiers)
- design/components/inventory.json om componentnamen te matchen

Doel: React + Tailwind CSS. Wijs tokenwaarden toe aan Tailwind-configuratie-items in plaats van
hexwaarden hardcoded te gebruiken. Gebruik de componentnamen uit inventory.json als
componentbestandsnamen (PascalCase).

Cursor's Composer volgt de beperkingen van CONTEXT.md, raadpleegt de layoutboom in Home.json, haalt afstand op uit tokens.json en produceert code die overeenkomt met je ontwerpsysteem in plaats van een benadering ervan.

Het model kent je ontwerp niet. Het kent wat je het geeft. Gestructureerde JSON klopt elke keer beter dan een screenshot.

Stap 5 — Wijs tokens toe aan je frameworkconfiguratie

De geëxporteerde tokens.json gebruikt een W3C-achtige geneste structuur:

{
  "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" }
    }
  }
}

Vraag Cursor voor Tailwind om een tailwind.config.js theme.extend-blok rechtstreeks vanuit tokens.json te genereren. Zie Ontwerptoken-export voor AI-agents voor een diepgaande beschrijving van het tokenformaat en frequentie-inferentie. De tokenstructuur is plat genoeg om in één Node-script te doorlopen als je het wilt automatiseren:

// 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 };

Stap 6 — Omgaan met projecten met meerdere schermen

Elk frame in je Figma-bestand wordt een screens/<FrameNaam>.json en een bijpassende .png. Werk voor een project met een dozijn schermen incrementeel. Cursor Composer doet het goed met één scherm per sessie; geef het de scherm-JSON en PNG als expliciete @file-referenties:

@design/screens/Instellingen.json
@design/screens/Instellingen.png

Implementeer het Instellingen-scherm. Volg dezelfde componentstructuur
als het reeds geïmplementeerde Home-scherm. Gebruik tokens uit design/tokens.json.

De componentinventaris (design/components/inventory.json) helpt naamsdrift over schermen te vermijden — elk component waarnaar in een scherm-JSON wordt verwezen heeft een canonieke id en name in de inventaris. Als je een gedeelde componentbibliotheek genereert, gebruik die namen als bron van waarheid.

Hoe de IR er in de praktijk uitziet

De per-scherm JSON gebruikt een recursieve knooppuntstructuur. Een vereenvoudigd voorbeeld voor een kaartcomponent:

{
  "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" }
    }
  ]
}

Tokenreferenties gebruiken $ref-strings die overeenkomen met sleutels in tokens.json. Het model kan ze oplossen zonder een afzonderlijke opzoekstap. Zie per-scherm IR uitgelegd voor het volledige knooppuntschema.

Context actueel houden

Ontwerpbestanden veranderen. Een goede gewoonte: voer figmascope opnieuw uit wanneer het ontwerp een significante revisie heeft gehad, commit de bijgewerkte map design/ en noteer de versie in je PR-beschrijving. De _meta.json bevat een tijdstempel en het veld lastModified van het Figma-bestand, zodat je kunt vergelijken wanneer de bundel voor het laatste is geregenereerd ten opzichte van wanneer het bestand voor het laatste is aangeraakt.

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

Als warnings niet leeg is, pak die dan aan voordat je context aan de agent doorgeeft. Veelvoorkomende waarschuwingen: strings-collision (twee knooppunten met dezelfde slug werden omgezet naar dezelfde sleutel) en layout-mode-none-inferred (een container zonder expliciete auto-layout, waarbij figmascope de layout heeft afgeleid uit de posities van onderliggende knooppunten).

Veelvoorkomende Cursor-workflows

Op diff gebaseerde updates

Wanneer het ontwerp een kleine revisie heeft — stel dat een afstandswaarde veranderd is van spacing.4 naar spacing.6 in het kaartcomponent — kun je Cursor vragen om alleen de delta toe te passen in plaats van het hele scherm opnieuw te genereren:

De design/tokens.json is bijgewerkt. spacing.4 is nu 24px in plaats van 16px.
Zoek alle componenten die spacing.4 gebruiken en werk ze bij. Raak niets anders aan.

Dit werkt omdat je gegenereerde componenten tokennamen als Tailwind-klassen refereren (gap-spacing-4) in plaats van ruwe pixelwaarden. Een tokenwijziging is een zoek-en-vervang, geen herontwerp.

Een nieuw scherm toevoegen aan een bestaande codebase

Wanneer je scherm N toevoegt aan een codebase die al schermen 1 tot en met N-1 heeft geïmplementeerd, is de belangrijkste toevoeging aan de prompt het verankeren van de agent in de bestaande componentbibliotheek:

@design/screens/Afrekenen.json
@design/screens/Afrekenen.png

Implementeer het Afrekenen-scherm. Hergebruik bestaande componenten uit src/components/
waar de componentnaam overeenkomt met design/components/inventory.json.
Maak alleen nieuwe componentbestanden aan voor componenten die nog niet zijn geïmplementeerd.
Gebruik design/tokens.json voor alle tokenwaarden.

De componentinventaris is de brug tussen de ontwerp-componentnaam en de codebase-bestandsnaam. Zonder deze inventaris verzint de agent importpaden en maakt duplicaatcomponenten aan.

Een basisontwerpsysteem genereren

Genereer vóór het implementeren van schermen een basisontwerpsysteem op basis van de contextbundel: de tokenconfiguratie, een kleurenpalet-component en de basisTypografiesstijlen. Dit verankert alle volgende schermenimplementaties op dezelfde basis:

Lees design/tokens.json en design/CONTEXT.md.

Genereer:
1. tailwind.config.ts theme.extend-blok van alle tokens
2. src/styles/tokens.css met CSS-aangepaste eigenschappen voor dezelfde tokens
3. src/components/foundations/ColorPalette.tsx met alle kleurtokens
4. src/styles/typography.css met de typografie-tokenklassen

Noem alle klassen en variabelen met de sleutelpadroutes van tokens
(bijv. --color-accent, text-ink, bg-surface).

Zodra deze basis bestaat, kan elke schermenimplementatie ernaar verwijzen. De agent zal per sessie geen kleuren opnieuw afleiden uit het ontwerp — het gebruikt de reeds gegenereerde klassen.

Beperkingen om van tevoren te kennen

De contextbundel van figmascope legt statische structuur vast. Een paar dingen die het niet kan weergeven:

Het bestand CONTEXT.md vermeldt welke frames zijn uitgesloten en waarom, zodat de agent niet probeert iets te implementeren dat bewust buiten bereik viel.