Figma से Cursor — Cursor AI के लिए Design Context Export करें

Cursor का AI काफी सारा UI code लिख सकता है। लेकिन वो आपकी Figma file नहीं पढ़ सकता। आप एक screenshot paste करते हैं और वो अंदाज़ा लगाता है — गलत spacing, गलत color values, मनमाने component names। यह कमी model की नहीं है। असली समस्या है — structured context का न होना।

figmascope यही gap भरता है। यह एक Figma file को zip bundle के रूप में export करता है — design tokens, per-screen layout trees, reference renders, component inventory, UI strings — वो सब कुछ जो एक language model को सटीक code बनाने के लिए चाहिए, न कि बस "कुछ-सा-दिखने-वाला" code। main app पूरी तरह आपके browser में चलता है, कोई backend या upload नहीं।

यह पेज Figma URL से Cursor codegen तक का पूरा workflow बताता है। अगर आप Cursor की जगह Claude Code इस्तेमाल करते हैं, तो Claude-specific workflow के लिए Figma से Claude Code देखें। AI-ready handoff की broader तस्वीर के लिए AI Design Handoff पढ़ें।

Context bundle में क्या होता है

जब आप figmascope को किसी Figma file पर चलाते हैं, तो आपको एक .zip मिलता है जिसमें होता है:

CONTEXT.md — एक spec document जो agent पहले पढ़ता है। इसमें constraints, scope notes, version annotations, और file से निकाले गए worked examples होते हैं।
tokens.json — typed design tokens (color, spacing, radius, typography) W3C-ish nested structure में। Figma Variables से लिए जाते हैं जब मौजूद हों; नहीं तो usage frequency से infer किए जाते हैं।
screens/*.json — per-screen intermediate representation। हर node typed है (stack, overlay, absolute, या leaf), spatially preserved है, और tokens से cross-referenced है।
screens/*.png — visual ground-truth के लिए 2× reference renders।
components/inventory.json — file में हर component के लिए { id, name, type }।
strings.json — सभी UI strings, consolidated, dot-notation resource keys के साथ (onboarding.welcome.title)।
_meta.json — build manifest: timestamp, fileKey, frameCount, कोई भी warnings।

कुछ भी upload नहीं होता। आपका Personal Access Token सिर्फ browser memory में रहता है और केवल api.figma.com को भेजा जाता है। Zip client-side में बनाया जाता है और browser के download को दे दिया जाता है।

Step 1 — Figma Personal Access Token लें

Figma → Account Settings → Personal Access Tokens पर जाएं और File content: read-only scope के साथ एक token बनाएं। यही minimum requirement है।

Token आपके browser session से बाहर नहीं जाता; figmascope इसे api.figma.com को requests में X-Figma-Token header के रूप में भेजता है, कहीं और नहीं। पूरे threat model के लिए PAT security और figmascope देखें।

Step 2 — Context bundle export करें

अपने browser में figmascope.dev खोलें।
Figma file URL paste करें (जैसे https://www.figma.com/file/ABC123/MyDesign)।
अपना Personal Access Token paste करें।
Export Context Bundle पर click करें।
एक figmascope-<fileKey>.zip आपकी machine पर download होगी।

इसे अपने project में unzip करें। एक अच्छी जगह है repo root में design/ folder:

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

Step 3 — Project को Cursor में खोलें

अपना project folder सामान्य तरीके से Cursor में खोलें। design/ directory अब workspace का हिस्सा है और Cursor का indexer इसे include करेगा।

Model को prompt करने से पहले, design/CONTEXT.md खुद एक बार पढ़ें। यह बताता है कि कौन से frames export हुए, token naming scheme क्या है, और export के दौरान कौन सी warnings आईं (जैसे layout-mode-none-inferred उन frames के लिए जहां Figma ने कोई auto-layout नहीं बताया)।

Step 4 — एक प्रभावी Cursor prompt लिखें

सबसे सरल शुरुआत एक reference prompt है जो आप Cursor Chat में paste कर सकते हैं:

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

Cursor का Composer CONTEXT.md की constraints follow करेगा, Home.json में layout tree देखेगा, tokens.json से spacing लेगा, और ऐसा code produce करेगा जो आपके design system से match करता हो।

Model आपके design को नहीं जानता। वो वही जानता है जो आप उसे देते हैं। Structured JSON हर बार screenshot से बेहतर है।

Step 5 — Tokens को अपने framework config से जोड़ें

Export किया गया tokens.json W3C-ish nested shape use करता है:

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

Tailwind के लिए, Cursor से कहें कि tokens.json से सीधे एक tailwind.config.js theme.extend block generate करे। Token format और frequency inference पर deep dive के लिए AI Agents के लिए Design Token Export देखें। Token structure इतना flat है कि एक single Node script में traverse किया जा सकता है:

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

Step 6 — Multi-screen projects को handle करें

आपकी Figma file का हर frame एक screens/<FrameName>.json और matching .png बनाता है। दर्जनों screens वाले project के लिए, incrementally काम करें। Cursor Composer एक session में एक screen अच्छे से handle करता है; screen JSON और PNG को explicit @file references के रूप में दें:

@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.

Component inventory (design/components/inventory.json) screens के बीच name drift से बचने में मदद करता है — हर component जो screen JSON में referenced है, उसका inventory में एक canonical id और name है।

IR व्यवहार में कैसा दिखता है

Per-screen JSON एक recursive node structure use करता है। एक card component का simplified example:

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

Token references $ref strings use करते हैं जो tokens.json में keys से match करते हैं। Model इन्हें बिना किसी separate lookup step के resolve कर सकता है। Full node schema के लिए per-screen IR explained देखें।

Context को fresh कैसे रखें

Design files बदलती हैं। एक अच्छी आदत: जब भी design में significant revision हो, figmascope फिर से चलाएं, updated design/ folder commit करें, और अपनी PR description में version note करें। _meta.json में एक timestamp और Figma file का lastModified field होता है, जिससे आप देख सकते हैं कि bundle कब last regenerate हुई बनाम file कब last touch हुई।

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

अगर warnings non-empty है, तो agent को context देने से पहले उन्हें address करें। Common warnings: strings-collision (दो nodes का same slug same key पर resolve हुआ) और layout-mode-none-inferred (explicit auto-layout के बिना एक container, जहां figmascope ने child positions से layout infer किया)।

Common Cursor workflows

Diff-based updates

जब design में minor revision हो — जैसे card component पर spacing value spacing.4 से spacing.6 हो गई — तो आप Cursor से पूरी screen regenerate करने के बजाय सिर्फ delta apply करने को कह सकते हैं:

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.

यह काम करता है क्योंकि आपके generated components raw pixel values की बजाय Tailwind classes (gap-spacing-4) के रूप में token names reference करते हैं। Token change एक find-and-replace है, पूरा redesign नहीं।

Existing codebase में नई screen जोड़ना

जब आप एक ऐसे codebase में screen N जोड़ रहे हों जिसमें screens 1 से N-1 पहले से implement हो चुकी हैं, तो key prompt addition है agent को existing component library से ground करना:

@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.

Component inventory design component name और codebase file name के बीच bridge है। इसके बिना, agent import paths बना देगा और duplicate components create करेगा।

Design system baseline बनाना

कोई भी screen implement करने से पहले, context bundle use करके एक baseline design system बनाएं: token configuration, color palette component, और base typography styles। यह सभी subsequent screen implementations को एक ही foundation से anchor करता है:

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

एक बार यह baseline बन जाए, हर screen implementation इसे reference कर सकती है। Agent हर session में design से colors re-derive नहीं करेगा — वो already-generated classes use करेगा।

पहले से जानने वाली limitations

figmascope का context bundle static structure capture करता है। कुछ चीज़ें जो यह represent नहीं कर सकता:

Hover और focus states — Figma के interactive components और prototyping connections include नहीं हैं। इन्हें आपको prompt में describe करना होगा या convention से implement करना होगा।
Responsive breakpoints — IR एक viewport capture करता है (frame की dimensions)। Multi-breakpoint layouts के लिए separate frames या manual prompt guidance चाहिए।
Complex animations — Figma के Smart Animate और transition settings surface नहीं होते। Static entry/exit states अलग frames के रूप में visible हैं अगर designer ने बनाए हों।
Non-frame nodes — figmascope Figma frames (top-level design screens) process करता है। Slices, groups जो pages के direct children हैं, और Figma sections filter out हो जाते हैं।

CONTEXT.md file note करती है कि कौन से frames exclude हुए और क्यों, ताकि agent कुछ ऐसा implement करने की कोशिश न करे जो intentionally out of scope था।