React + Tailwind från ett Figma kontextpaket

figmascopes standardexportmål är Jetpack Compose. Men paketet är agentagnos — IR-nodtyperna, tokenformatet och strängreferenserna mappar lika rent till React + Tailwind. Du säger bara till agenten att rikta mot JSX istället för Kotlin.

Den här guiden täcker IR-till-JSX-mappningen, hur man utökar tailwind.config.js med tokens från tokens.json och promptmönstren som producerar minst drift på React-sidan.

En viktig varning i förväg

Compose är vad figmascope testar mest. IR, tokenformatet och CONTEXT.md-begränsningarna designades med Compose i åtanke. React + Tailwind fungerar — IR mappar rent — men du ser något mer drift, speciellt kring typografi och overlay-layouter. Flagga allt som ser konstigt ut och kör en tokenkontroll efter det första passet.

Steg 1: Generera och packa upp paketet

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

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

Steg 2: Utöka Tailwind-konfigurationen med design tokens

Innan du skickar en prompt, mappa tokens.json till din tailwind.config.js. Det här är nyckelsteget som gör Tailwind tokenmedveten — istället för hårdkodade hexvärden i className-strängar får du semantiska namn som spårar tillbaka till designen.

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

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

// Bygg avståndskarta: { 'ds-4': '4px', 'ds-8': '8px', ... }
const spacing = Object.fromEntries(
  Object.entries(tokens.spacing).map(([key, val]) => [
    `ds-${key}`, `${val}px`
  ])
)

// Bygg border-radius-karta
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,
    }
  }
}

Det här producerar Tailwind-klasser som bg-brand-7f5cfe, p-ds-16, rounded-ds-12. Inte de snyggaste klassnamnen, men de är spårbara — varje klass mappar tillbaka till en tokennyckel.

Om du föredrar semantiska alias, lägg till ett aliaslager:

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

Ge agenten båda — den råa tokenkonfigurationen och de semantiska aliaserna — så att den kan välja rätt namn i kontexten.

Steg 3: Prompta agenten att rikta mot React + Tailwind

CONTEXT.md säger att standardmålet är Compose. Åsidosätt det explicit i din prompt:

Implement ./design/screens/home.json as a React functional component using Tailwind CSS.

Framework override: ignore the Compose instructions in CONTEXT.md. Target React + Tailwind.

Rules:
- Read ./design/tokens.json. The tokens are extended into Tailwind config —
  use Tailwind classes that correspond to token keys (e.g. bg-brand-7f5cfe, p-ds-16).
- UI strings come from ./design/strings.json. Import and reference them by key.
- IR node kind 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"> with absolute-positioned children
    absolute                → <div className="absolute" style={{"{{"}}top, left, width, height{{"}}"}}>
    leaf (text)             → <span> or <p> with Tailwind text classes
    leaf (rectangle)        → <div> with bg and rounded classes
- Do not hardcode hex values. All colors must use Tailwind classes from the token config.
- Do not hardcode strings. Use the strings.json keys.

Output to: src/screens/HomeScreen.tsx

IR-till-JSX-mappningen

Här är den fullständiga mappningstabellen för React + Tailwind:

Gap- och utfyllnadsvärden: använd ds-{n}-avståndklasserna från Tailwind-konfigurationsutökningen. Om gap-värdet inte är en ren tokennyckel, använd Tailwinds godtyckliga värdesyntax: gap-[20px].

Ett verkligt exempel: hemskärm IR till JSX

Med samma IR som i Compose-genomgången:

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>
  )
}

Varje className är spårbar. gap-ds-24 → spacing.24 → 24px. text-brand-7f5cfe → color.7f5cfe → #7F5CFE. Om ett värde driftar (t.ex. agenten skriver gap-6 istället för gap-ds-24) är det omedelbart synligt i en kodgranskning.

Varför tokens.json + Tailwind-konfiguration fungerar

Båda systemen är token-first. Tailwind utökar en baskonfiguration med anpassade värden; tokens.json är redan strukturerat som en anpassad värdekarta. Utökningssteget (Steg 2 ovan) är en engångsinställning — efter det använder agenten Tailwind-klassnamn som är semantiskt kopplade till designsystemet snarare än godtyckliga utility-klasser.

Resultatet: när designtoken ändras (säg, primärfärg skiftar från #7F5CFE till #6B4EE6), uppdaterar du ett värde i tokens.json, kör om konfigurationsimporten och Tailwind regenererar. Komponentkoden ändras inte.

Tokendriftkontroll

Efter implementering, be agenten granska för drift:

Audit src/screens/HomeScreen.tsx for token drift.

Check:
1. Any hex color values not referenced through a Tailwind class from the token config.
2. Any hardcoded px or rem spacing values that should be ds-{n} classes.
3. Any UI strings not sourced from design/strings.json.

List violations. Produce a diff that fixes them.

Overlay och absolute — de knepiga fallen

Overlay-noder behöver en relative-förälder och absolute-positionerade underordnade. IR listar underordnade i z-ordning (första = bottenlager). Säg till agenten att bevara den ordningen i JSX — React renderar i DOM-ordning och CSS position: absolute staplar i enlighet.

Absolute-noder använder råa pixelkoordinater från Figma. Dessa kommer nästan alltid från designer som inte byggdes med auto-layout. Om du ser många absolute-noder betyder det vanligtvis att Figma-filen har manuell positionering — den genererade koden kommer vara bräcklig vid olika visningsportsstorlekar. Överväg att flagga det här och refaktorera till flex-layouter.

Stränghantering i React

Till skillnad från Android (där strings.json-nycklar mappar till R.string.*-resurs-ID:n) importerar du i React JSON-filen direkt:

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

// användning
{strings['home.title'].value}
// eller med fallback
{strings['home.title']?.value ?? strings['home.title']?.fallback ?? 'Untitled'}

Om du använder i18n-bibliotek (react-i18next, next-intl) mappar punktnotationsnycklarna i strings.json direkt till översättningsnyckelns namnrymder. Säg till agenten vilket i18n-bibliotek du använder så att det genererar rätt anropsmönster.

Ärliga luckor på React-sidan

Typografihelpmedel. Tailwinds texthjälpmedel (text-xs, text-2xl) mappar inte 1:1 till typography-tokens i tokens.json. Tailwind har en fast typskala; tokenfilen har godtyckliga storlekar. Du behöver antingen utöka Tailwinds fontSize-konfiguration med tokenvärden eller använda godtyckliga värden (text-[24px]). Båda fungerar; att utöka konfigurationen är renare.

Radhöjd. Samma problem — Tailwinds leading-hjälpmedel matchar inte godtyckliga lineHeight-värden. Använd leading-[{value}] eller utöka konfigurationen.

Gradienter. Stöds inte i IR. Eventuella gradientfyllningar visas som en varning i _meta.json och utelämnas från nodens fyllningsegenskap. Hantera manuellt.

Inget av det här är blockerare — de är kända luckor. Den tokenmedvetna grunden är solid; kanterna behöver bara manuell hantering.

Börja med figmascope för att exportera ditt paket, använd sedan den här guiden tillsammans med Cursor-arbetsflödet eller Claude Code-arbetsflödet för att driva implementeringen.