Figma Context Bundle से React + Tailwind

figmascope का default export target Jetpack Compose है। लेकिन bundle agent-agnostic है — IR node kinds, token format, और string refs उतनी ही cleanly React + Tailwind पर map होते हैं। आप बस agent को Kotlin की बजाय JSX target करने के लिए कहते हैं।

यह guide IR-to-JSX mapping, tokens.json से tokens के साथ tailwind.config.js को कैसे extend करें, और prompting patterns cover करता है जो React side पर कम से कम drift produce करते हैं।

पहले एक महत्वपूर्ण caveat

Compose वह है जिसे figmascope सबसे ज्यादा test करता है। IR, token format, और CONTEXT.md constraints Compose को ध्यान में रखकर designed थे। React + Tailwind काम करता है — IR cleanly map होता है — लेकिन आप थोड़ा ज्यादा drift देखेंगे, especially typography और overlay layouts के आसपास। जो कुछ भी off लगे उसे flag करें और first pass के बाद token check run करें।

Step 1: Bundle generate और unzip करें

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

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

Step 2: Design tokens के साथ Tailwind config extend करें

Prompting से पहले, tokens.json को अपने tailwind.config.js में map करें। यह key step है जो Tailwind को token-aware बनाता है — className strings में hardcoded hex values की बजाय आपको semantic names मिलते हैं जो design तक trace होते हैं।

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

// Color map build करें: { 'brand-7f5cfe': '#7F5CFE', ... }
const colors = Object.fromEntries(
  Object.entries(tokens.color).map(([key, val]) => [
    `brand-${key}`, val
  ])
)

// Spacing map build करें: { 'ds-4': '4px', 'ds-8': '8px', ... }
const spacing = Object.fromEntries(
  Object.entries(tokens.spacing).map(([key, val]) => [
    `ds-${key}`, `${val}px`
  ])
)

// Border-radius map build करें
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,
    }
  }
}

यह bg-brand-7f5cfe, p-ds-16, rounded-ds-12 जैसे Tailwind classes produce करता है। सबसे prettier class names नहीं, लेकिन traceable हैं — हर class एक token key पर map होता है।

अगर आप semantic aliases prefer करते हैं, तो एक aliasing layer add करें:

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

Agent को दोनों दें — raw token config और semantic aliases — ताकि वह context में सही नाम pick कर सके।

Step 3: Agent को React + Tailwind target करने के लिए prompt करें

CONTEXT.md कहता है default target Compose है। इसे अपने prompt में explicitly override करें:

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-to-JSX mapping

React + Tailwind के लिए full mapping table:

Gap और padding values: Tailwind config extension से ds-{n} spacing classes use करें। अगर gap value clean token key नहीं है, Tailwind का arbitrary value syntax use करें: gap-[20px]।

एक real उदाहरण: home screen IR से JSX तक

Compose walkthrough से वही IR use करते हुए:

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

हर className traceable है। gap-ds-24 → spacing.24 → 24px। text-brand-7f5cfe → color.7f5cfe → #7F5CFE। अगर कोई value drift करती है (जैसे agent gap-ds-24 की बजाय gap-6 लिखता है), यह code review में immediately visible है।

tokens.json + Tailwind config क्यों काम करता है

दोनों systems token-first हैं। Tailwind एक base config को custom values के साथ extend करता है; tokens.json already custom value map के रूप में structured है। Extension step (ऊपर Step 2) एक one-time setup है — उसके बाद, agent ऐसे Tailwind class names use करता है जो design system से semantically tied हैं बजाय arbitrary utility classes के।

Result: जब design token बदलता है (मान लें primary color #7F5CFE से #6B4EE6 shift होता है), आप tokens.json में एक value update करते हैं, config import re-run करते हैं, और Tailwind regenerate करता है। Component code नहीं बदलता।

Token drift check

Implementation के बाद, agent से drift के लिए audit करने को कहें:

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 और absolute — tricky cases

Overlay nodes को relative parent और absolute-positioned children चाहिए। IR children को z-order में list करता है (first = bottom layer)। Agent को JSX में यह order preserve करने के लिए कहें — React DOM order में render करता है और CSS position: absolute accordingly stack होता है।

Absolute nodes Figma से raw pixel coordinates use करते हैं। ये almost always ऐसे designs से आते हैं जो auto-layout के साथ नहीं बने थे। अगर आप बहुत से absolute nodes देख रहे हैं, तो इसका मतलब usually है Figma file में manual positioning है — generated code अलग-अलग viewport sizes पर brittle होगा। इसे flag करने और flex layouts पर refactor करने पर consider करें।

React में string handling

Android के विपरीत (जहां strings.json keys R.string.* resource IDs से map होते हैं), React में आप JSON directly import करते हैं:

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

// usage
{strings['home.title'].value}
// या fallback के साथ
{strings['home.title']?.value ?? strings['home.title']?.fallback ?? 'Untitled'}

अगर आप i18n libraries (react-i18next, next-intl) use कर रहे हैं, strings.json में dot-notation keys directly translation key namespaces से map होते हैं। Agent को बताएं कि आप कौन सी i18n library use कर रहे हैं ताकि वह सही call pattern generate करे।

React side पर ईमानदार gaps

Typography utilities। Tailwind के text utilities (text-xs, text-2xl) tokens.json में typography tokens से 1:1 map नहीं होते। Tailwind का fixed type scale है; token file में arbitrary sizes हैं। आपको या तो token values के साथ Tailwind का fontSize config extend करना होगा या arbitrary values (text-[24px]) use करने होंगे। दोनों काम करते हैं; config extend करना cleaner है।

Line height। Same issue — Tailwind के leading utilities arbitrary lineHeight values से match नहीं करते। leading-[{value}] use करें या config extend करें।

Gradients। IR में supported नहीं। कोई भी gradient fill _meta.json में warning के रूप में appear होती है और node की fill property से omit होती है। Manually handle करें।

इनमें से कोई भी blockers नहीं हैं — ये known gaps हैं। Token-aware foundation solid है; edges को बस manual handling चाहिए।

Bundle export करने के लिए figmascope से शुरू करें, फिर implementation drive करने के लिए इस guide को Cursor workflow या Claude Code workflow के साथ use करें।