Figma Variables 2023 में platform के design tokens के लिए long-overdue answer के रूप में आए। Feature powerful है: primitive values के named collections — colors, numbers, strings, booleans — जिन्हें आप किसी भी component में किसी भी property से bind कर सकते हैं। Variable बदलें, हर instance update हो जाता है। Dark mode collection add करें, हर variable binding automatically swap हो जाती है।
AI codegen के लिए, Variables सिर्फ useful नहीं हैं। वे वह mechanism हैं जो Figma file को pixel-perfect mockup से एक ऐसी spec में convert करते हैं जिसे आपका agent correctly implement कर सकता है। जब किसी color का एक नाम हो — color/brand/primary, न कि #7F5CFE — तो agent उसे code token से map कर सकता है, dark mode correctly implement कर सकता है, और ऐसा output produce कर सकता है जो आपके actual design system में participate करता है।
Problem यह है: आज active use में अधिकांश Figma files में Variables setup नहीं हैं। figmascope दोनों cases handle करता है। यह post explain करती है कैसे।
Variables actually क्या हैं
Figma Variable एक named scalar है जो collection से bound है। Collections variables को mode के हिसाब से organize करती हैं — "Light" और "Dark" canonical example हैं। Collection में हर variable का per-mode अलग value हो सकती है: color/surface/background Light में #FFFFFF है और Dark में #0D0D0D। Binding propagate होती है: हर fill जो color/surface/background reference करती है modes switch करने पर update होती है।
Variables colors, numbers, strings, या booleans हो सकते हैं। Practice में सबसे impactful colors और numbers हैं — जो एक typical design system में अधिकांश token surface area cover करते हैं: color palette, spacing scale, border radii, font sizes, elevation values।
Happy path: Variables present हैं
जब Figma file में Variables हों, figmascope उन्हें API से पढ़ता है और W3C Design Tokens Community Group-compatible structure following करते हुए tokens.json build करता है। हर token में $value और $type होता है। Color tokens को optional alpha के साथ hex values मिलती हैं। Spacing tokens को px unit hint के साथ numeric values मिलती हैं। Token name variable की collection और name path follow करता है:
{
"color": {
"brand": {
"primary": { "$value": "#7F5CFE", "$type": "color" }
},
"surface": {
"background": { "$value": "#FFFFFF", "$type": "color" }
}
},
"spacing": {
"4": { "$value": 4, "$type": "number" },
"8": { "$value": 8, "$type": "number" },
"16": { "$value": 16, "$type": "number" }
}
}जब per-screen IR build होता है, हर fill जिसमें boundVariables reference था उसे hex की बजाय token name मिलता है:
"fills": [{ "type": "SOLID", "tokenRef": "color/brand/primary" }]Semantic naming वह difference है जो well-aging code और drifting code के बीच है। Source में hex value एक liability है; token reference एक contract है। Variables वह हैं जो Figma files को pixels नहीं बल्कि contracts express करने में capable बनाते हैं।
Reality: अधिकांश files में Variables नहीं हैं
Variables के लिए Figma Professional plan या उससे ऊपर चाहिए। इन्हें एक designer की ज़रूरत होती है जिसने उन्हें setup किया हो — जिसका मतलब है collections create करना, variables name करना, और manually उन्हें हर component property से bind करना। Mature, well-maintained design system file पर यह हो चुका होता है। Startup के product Figma पर, freelancer की client file पर, या किसी भी file पर जो Variables feature से पहले की है — typically नहीं।
figmascope उन files के लिए भी useful होने के लिए design किया गया था। यह gracefully degrade करता है: जब Variables absent हों, यह frequency-based token inference पर fall back करता है।
Fallback: inferred-from-frequency
Inference algorithm इस तरह काम करता है:
- हर exported frame में हर leaf node walk करें।
- सभी fill colors, spacing values, और border radii collect करें।
- हर unique value की occurrences count करें।
- Frequency threshold से ऊपर appear होने वाले values inferred tokens में promote हो जाते हैं।
- हर token को value-derived name मिलता है:
color.7f5cfe,spacing.16,radius.8।
Output tokens.json structurally Variables path जैसा दिखता है, लेकिन names semantic की बजाय value-derived हैं:
{
"color": {
"7f5cfe": { "$value": "#7F5CFE", "$type": "color" },
"f6f2ea": { "$value": "#F6F2EA", "$type": "color" }
},
"spacing": {
"16": { "$value": 16, "$type": "number" },
"8": { "$value": 8, "$type": "number" }
}
}Agent फिर भी token-referenced code generate करता है। var(--color-7f5cfe) उतना readable नहीं है जितना var(--color-brand-primary), लेकिन यह फिर भी एक token है।
tokensSource field
हर figmascope bundle में एक _meta.json होता है जो document करता है कि bundle में क्या है और इसे कैसे produce किया गया। tokensSource field के तीन possible values हैं:
figma-variables— Variables present थे और use किए गए। Token names semantic हैं।inferred-from-frequency— कोई Variables नहीं मिले। Tokens value frequency से infer किए गए। Names value-derived हैं।none— कोई tokens extract या infer नहीं किए जा सके। IR directly resolved values use करता है।
Honest metadata underrated है। जो tools silently infer करते हैं बिना यह flag किए कि यह inference है, वे false confidence create करते हैं। figmascope inference chain को explicitly surface करता है ताकि आप जान सकें कि आप किसके साथ काम कर रहे हैं।
Frequency inference क्यों बेहतर है कुछ न होने से
Frequency inference का alternative हर जगह resolved literal values output करना है। यह ऐसा code produce करता है जो refactor करना harder है, audit करना harder है, और design system से connect करना harder है जब eventually एक add हो।
Frequency inference कम से कम उन values का set extract करता है जो design actually use करता है। अगर #7F5CFE design में 47 बार appear होता है, यह एक signal है: यह primary color है, accent नहीं। Token name यह नहीं जानता — यह बस color.7f5cfe है — लेकिन frequency data story बताती है।
Designers को अभी भी क्या करना चाहिए
Frequency inference एक compatibility layer है, Variables का substitute नहीं। सही path यह है कि designers उन सभी values के लिए Variables adopt करें जो design system में participate करती हैं: brand colors, neutral scale, spacing scale, border radii, elevation, typography। एक बार वे place में हों, figmascope bundle scaffold-quality tokens से production-quality tokens पर जाता है।
Variables bundle में theming भी unlock करते हैं: per-token multiple mode values। Light/Dark modes वाली file एक tokens.json produce करती है जिसमें per-mode values हैं जो directly CSS custom properties में feed होती हैं। यह एक single design snapshot से infer करना impossible है — इसके लिए explicit designer intent चाहिए, Variables के through expressed।
Upgrade path incremental है। Team आज inference-quality tokens से शुरू कर सकती है, जैसे-जैसे design system mature होता है Variables gradually adopt कर सकती है, और automatically बेहतर bundles पा सकती है। tokensSource field track करता है कि आप उस progression में कहाँ हैं।
figmascope app से अपना bundle export करें यह देखने के लिए कि आपकी file कौन सा tokensSource produce करती है। फिर accurate, token-referenced code generation के लिए bundle को Claude Code या Cursor के साथ use करें।