React + Tailwind uit een Figma Context-bundel

Het standaard exportdoel van figmascope is Jetpack Compose. Maar de bundel is agent-agnostisch — de IR-knooppuntsoorten, het tokenformaat en de stringreferenties mappen even schoon naar React + Tailwind. Je vertelt de agent gewoon om JSX als doel te gebruiken in plaats van Kotlin.

Deze handleiding behandelt de IR-naar-JSX-mapping, hoe je tailwind.config.js uitbreidt met tokens uit tokens.json, en de promptpatronen die de minste drift opleveren aan de React-kant.

Eén belangrijke kanttekening vooraf

Compose is waar figmascope het meest op test. De IR, het tokenformaat en de CONTEXT.md-beperkingen zijn ontworpen met Compose in gedachten. React + Tailwind werkt — de IR mapt schoon — maar je ziet iets meer drift, met name rondom typografie en overlay-lay-outs. Markeer alles wat er vreemd uitziet en voer een tokencontrole uit na de eerste ronde.

Stap 1: Genereer en pak de bundel uit

unzip ~/Downloads/context-bundle.zip -d ./design/

ls design/
# CONTEXT.md  _meta.json  components/  screens/  strings.json  tokens.json

Stap 2: Breid de Tailwind-configuratie uit met design-tokens

Voordat je een prompt geeft, wijs je tokens.json toe aan je tailwind.config.js. Dit is de cruciale stap die Tailwind token-bewust maakt — in plaats van hardgecodeerde hexwaarden in className-strings krijg je semantische namen die terugverwijzen naar het ontwerp.

// tailwind.config.js
const tokens = require('./design/tokens.json')

// Bouw kleurenkaart: { 'brand-7f5cfe': '#7F5CFE', ... }
const colors = Object.fromEntries(
  Object.entries(tokens.color).map(([key, val]) => [
    `brand-${key}`, val
  ])
)

// Bouw spatiëeringskaart: { 'ds-4': '4px', 'ds-8': '8px', ... }
const spacing = Object.fromEntries(
  Object.entries(tokens.spacing).map(([key, val]) => [
    `ds-${key}`, `${val}px`
  ])
)

// Bouw border-radius-kaart
const borderRadius = Object.fromEntries(
  Object.entries(tokens.radius).map(([key, val]) => [
    `ds-${key}`, val === 9999 ? '9999px' : `${val}px`
  ])
)

module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors,
      spacing,
      borderRadius,
    }
  }
}

Dit levert Tailwind-klassen op zoals bg-brand-7f5cfe, p-ds-16, rounded-ds-12. Niet de mooiste klassenamen, maar ze zijn traceerbaar — elke klasse verwijst terug naar een tokensleutel.

Als je liever semantische aliassen hebt, voeg je een aliaslaag toe:

// in theme.extend.colors:
primary: tokens.color['7f5cfe'],
background: tokens.color['f6f2ea'],
surface: tokens.color['ffffff'],

Geef de agent beide — de ruwe tokenconfiguratie en de semantische aliassen — zodat hij in de juiste context de juiste naam kan kiezen.

Stap 3: Geef de agent de opdracht om React + Tailwind als doel te gebruiken

CONTEXT.md vermeldt Compose als standaarddoel. Overschrijf dit expliciet in je prompt:

Implementeer ./design/screens/home.json als een React-functionele component met Tailwind CSS.

Framework-overschrijving: negeer de Compose-instructies in CONTEXT.md. Gebruik React + Tailwind als doel.

Regels:
- Lees ./design/tokens.json. De tokens zijn uitgebreid in de Tailwind-configuratie —
  gebruik Tailwind-klassen die overeenkomen met tokensleutels (bijv. bg-brand-7f5cfe, p-ds-16).
- UI-strings komen uit ./design/strings.json. Importeer en verwijs ernaar via sleutel.
- IR-knooppuntsoort-mapping:
    stack (axis:vertical)   → <div className="flex flex-col gap-[Xpx]">
    stack (axis:horizontal) → <div className="flex flex-row gap-[Xpx]">
    overlay                 → <div className="relative"> met absoluut gepositioneerde kinderen
    absolute                → <div className="absolute" style={{top, left, width, height}}>
    leaf (text)             → <span> of <p> met Tailwind tekstklassen
    leaf (rectangle)        → <div> met bg- en rounded-klassen
- Codeer geen hexwaarden hard. Alle kleuren moeten Tailwind-klassen uit de tokenconfiguratie gebruiken.
- Codeer geen strings hard. Gebruik de sleutels van strings.json.

Uitvoer naar: src/screens/HomeScreen.tsx

De IR-naar-JSX-mapping

Hier is de volledige mappingtabel voor React + Tailwind:

Gap- en opvulwaarden: gebruik de ds-{n}-spatiëeringsklassen uit de Tailwind-configuratie-uitbreiding. Als de gapwaarde geen schone tokensleutel is, gebruik je de willekeurige waardesyntaxis van Tailwind: gap-[20px].

Een praktijkvoorbeeld: home screen IR naar JSX

Met dezelfde IR als in de Compose-walkthrough:

import strings from '../../design/strings.json'

export function HomeScreen() {
  return (
    <div className="flex flex-col gap-ds-24 p-ds-16 bg-brand-f6f2ea min-h-screen">
      <h1 className="text-2xl font-bold leading-tight text-brand-1a1a2e">
        {strings['home.title'].value}
      </h1>
      <div className="flex flex-col gap-ds-12">
        <div className="bg-white rounded-ds-12 p-ds-16">
          <span className="text-xs font-medium text-brand-7f5cfe">
            {strings['home.card.label'].value}
          </span>
        </div>
      </div>
    </div>
  )
}

Elke className is traceerbaar. gap-ds-24 → spacing.24 → 24px. text-brand-7f5cfe → color.7f5cfe → #7F5CFE. Als een waarde afwijkt (bijv. de agent schrijft gap-6 in plaats van gap-ds-24), is dat direct zichtbaar bij een codereview.

Waarom tokens.json + Tailwind-configuratie werkt

Beide systemen zijn token-first. Tailwind breidt een basisconfiguratie uit met aangepaste waarden; tokens.json is al gestructureerd als een aangepaste waardemap. De uitbreidingsstap (stap 2 hierboven) is eenmalige installatie — daarna gebruikt de agent Tailwind-klassenamen die semantisch zijn gekoppeld aan het ontwerpsysteem in plaats van willekeurige utility-klassen.

Het resultaat: wanneer het design-token verandert (stel, de primaire kleur verschuift van #7F5CFE naar #6B4EE6), werk je één waarde bij in tokens.json, voer je de configuratie-import opnieuw uit en genereert Tailwind opnieuw. De componentcode verandert niet.

Tokenafwijkingscontrole

Vraag de agent na implementatie om op afwijkingen te controleren:

Controleer src/screens/HomeScreen.tsx op tokenafwijking.

Controleer:
1. Eventuele hexkleurwaarden die niet worden verwezen via een Tailwind-klasse uit de tokenconfiguratie.
2. Eventuele hardgecodeerde px- of rem-spatiëeringswaarden die ds-{n}-klassen zouden moeten zijn.
3. Eventuele UI-strings die niet afkomstig zijn uit design/strings.json.

Geef een overzicht van overtredingen. Maak een diff die ze oplost.

Overlay en absolute — de lastige gevallen

Overlay-knooppunten hebben een relative-bovenliggende en absolute-gepositioneerde kinderen nodig. De IR vermeldt kinderen in z-volgorde (eerste = onderste laag). Vertel de agent om deze volgorde in de JSX te bewaren — React rendert in DOM-volgorde en CSS position: absolute stapelt dienovereenkomstig.

Absolute-knooppunten gebruiken ruwe pixelcoördinaten uit Figma. Deze komen bijna altijd van ontwerpen die niet zijn gebouwd met auto-lay-out. Als je veel absolute knooppunten ziet, betekent dit doorgaans dat het Figma-bestand handmatige positionering heeft — de gegenereerde code zal fragiel zijn bij verschillende viewportgroottes. Overweeg dit te markeren en te refactoren naar flex-lay-outs.

Stringverwerking in React

Anders dan bij Android (waar strings.json-sleutels verwijzen naar R.string.*-resource-ID's), importeer je in React de JSON direct:

import strings from '../../design/strings.json'

// gebruik
{strings['home.title'].value}
// of met terugvaloptie
{strings['home.title']?.value ?? strings['home.title']?.fallback ?? 'Untitled'}

Als je i18n-bibliotheken gebruikt (react-i18next, next-intl), mappen de puntnotatieleutels in strings.json direct naar vertaalsleutelnamespaces. Vertel de agent welke i18n-bibliotheek je gebruikt zodat het het juiste aanroeppatroon genereert.

Eerlijke hiaten aan de React-kant

Typografische utilities. De tekstutilities van Tailwind (text-xs, text-2xl) mappen niet 1:1 naar de typography-tokens in tokens.json. Tailwind heeft een vaste typeschaal; het tokenbestand heeft willekeurige groottes. Je moet de fontSize-configuratie van Tailwind uitbreiden met tokenwaarden of willekeurige waarden gebruiken (text-[24px]). Beide werken; de configuratie uitbreiden is netter.

Regelafstand. Hetzelfde probleem — de leading-utilities van Tailwind komen niet overeen met willekeurige lineHeight-waarden. Gebruik leading-[{value}] of breid de configuratie uit.

Verlopen. Niet ondersteund in de IR. Elke verloopvulling verschijnt als een waarschuwing in _meta.json en wordt weggelaten uit de vuleigenschap van het knooppunt. Verwerk handmatig.

Geen van deze zijn blokkers — het zijn bekende hiaten. De token-bewuste basis is solide; de randen vereisen alleen handmatige verwerking.

Begin met figmascope om je bundel te exporteren en gebruik deze handleiding samen met de Cursor-workflow of Claude Code-workflow om de implementatie te sturen.