Figma Make अब एक असली Design-to-Code Tool बन गया है
Figma Make अब React export करता है जो आपके असली design tokens और Code Connect mappings से जुड़ा होता है, बेकार markup की जगह नहीं। 18 जून को क्या बदला, कहाँ अभी भी इंसान की जरूरत है, और एक workflow जो आप इस हफ्ते चला सकते हैं।
संक्षेप में: Figma Make अब आपको वो code देता है जिसे कोई front-end engineer तुरंत delete नहीं करेगा। यही वजह है कि designers इसकी बात कर रहे हैं, और यह किसी और speed bump से बड़ी बात है।
18 जून को Figma ने एक production-grade Make update ship किया। headline यह नहीं है कि "यह तेज है।" headline है fidelity। Make अब components export करता है जो आपके असली design tokens और Code Connect mappings से जुड़े होते हैं, न कि उस ढीले, एक-बार के markup की जगह जो पहले export में निकलती थी।
यही फर्क है एक party trick और एक tool के बीच। बेकार code फेंक दिया जाता है। जो code आपके system को reference करे, वो merge होता है।
वो diffs जो हर कोई post कर रहा है
यह update इसलिए चर्चा में आया क्योंकि लोग सबूत दिखा रहे हैं। @figma announcement thread कुछ ही दिनों में करीब 9,200 reposts पार कर गई, और replies में teams के अपने systems पर चलाए गए Figma-to-React diffs के side-by-side comparisons भर गए।
यही असली संकेत है। सबसे तेज़ आवाज़ Figma की marketing copy नहीं है, वो engineers हैं जो before-and-after diffs post कर रहे हैं और नतीजे से नाखुश नहीं हैं। जब skeptics चुप हो जाएं, तो कुछ बदला है।
Designers ने एक दशक से "design to code" के वादे सुने हैं। वो वादे हमेशा असली codebase से टकराकर मर जाते थे, क्योंकि output उस system को ignore करता था जिस पर codebase बनी थी। इस बार के diffs वो मुठभेड़ झेल जाते हैं।
असल में क्या बदला (raw hex और markup नहीं, tokens और Code Connect)
पुराना Make एक frame पढ़ता था और describe करता था जो उसने देखा। उसे नीला button दिखता था तो वो #2D7FF9 लिखता था। उसे padding दिखती थी तो वो pixel value लिखता था। result सही दिखता था और किसी चीज़ से जुड़ा नहीं था।
नया Make वही frame पढ़ता है और उसे आपके system के खिलाफ resolve करता है। नीला button एक frozen hex value की जगह एक token reference में compile होता है। component आपके असली Code Connect mapping में compile होता है, तो यह आपके codebase में असली component की तरफ point करता है, न कि एक नया ताज़ा बनाता है।
यही पूरा shift है एक वाक्य में। export ने pixels describe करना बंद कर दिया और आपके source of truth को reference करना शुरू कर दिया।
व्यवहार में यह क्यों मायने रखता है: token references का मतलब है कि आपका code theme changes मुफ्त में inherit करता है। token बदलो, हर export उसे track करता है। Code Connect mappings का मतलब है कि export उस Button को reuse करता है जिसे आपकी team पहले से maintain करती है, न कि एक near-duplicate बनाता है जो किसी के touch करते ही drift करने लगे।
पुराना Make output बनाम 18 जून का update
यह comparison देखिए, क्योंकि यही comparison तर्क है।
| पहलू | पिछले साल का Make / export | 18 जून का update |
|---|---|---|
| Color values | Component में baked raw hex | Token references जो theme changes inherit करते हैं |
| Spacing | एक-बार के pixel values | Token-mapped spacing |
| Components | हर frame के लिए नया markup गढ़ा | आपके existing component पर Code Connect mapping |
| आपके system से संबंध | कोई नहीं, output अकेला खड़ा था | आपके tokens और component library से जुड़ा |
| Engineer का पहला कदम | Delete करो और rewrite करो | पढ़ो, structure रखो, refine करो |
| ईमानदार label | Demo | Tool |
दाईं column ही वो है जो pull request में जगह पाती है। बाईं column यही कारण है कि अब तक कोई "design to code" पर भरोसा नहीं करता था।
कहाँ अभी भी आपकी जरूरत है
Make body बनाता है, brain नहीं। इस line को oversell करना किसी के काम नहीं आता, इसलिए 18 जून के update की honest सीमा यह है।
Layout, tokens, और static component scaffolds साफ निकलते हैं। जो भी decision की जरूरत है वो अभी भी आप पर है। export नहीं जानता कि loading state कैसा feel होना चाहिए, error पर क्या हो, या आपका empty state nudge करे या माफी मांगे।
| Make यह अच्छे से करता है | यह अभी भी आप पर है |
|---|---|
| Layout और structure | State logic (loading, error, empty, success) |
| Token-mapped styling | Interaction और motion behavior |
| Static component scaffolds | Obvious से परे accessibility (focus order, ARIA intent, live regions) |
| सही spacing और hierarchy | असली data, edge cases, लंबे strings, missing fields |
| First-pass React structure | System decisions: reuse करें या नया component बनाएं |
Accessibility की अपनी अलग line है। Make alt attributes और semantic-ish tags stamp कर सकता है, लेकिन focus order decide नहीं कर सकता, live region announce नहीं कर सकता, या यह नहीं समझ सकता कि आपके modal को focus trap करना है और वापस return करना है। ये judgment calls हैं कि एक इंसान आपके interface में कैसे move करता है, और judgment export में नहीं होता।
असली data एक और silent killer है। एक frame एक perfect row दिखाता है। Production वो user दिखाता है जिसका नाम 40 characters का है, वो price जो null है, वो list जो day one पर empty है।
Make happy path scaffold करता है। reality आप handle करते हैं।
इस हफ्ते एक सही Figma-Make-in-the-loop workflow
आपको अपना पूरा process rebuild नहीं करना। बस Make को सही जगह slot करना है और seams पर human रखना है। यह एक version है जिसे आप इस हफ्ते एक असली component पर चला सकते हैं।
- पहले अपने tokens और Code Connect को सही map करें। यह बेरौनक prerequisite है। Make उतना ही अच्छा है जितना वो system जिसे वो reference करता है, इसलिए अगर आपके tokens आधे नामकरण में हैं और Code Connect coverage पतली है, तो export को blame करने से पहले यह ठीक करें।
- Make को एक अच्छी तरह बने component पर चलाएं, पूरी screen पर नहीं। कुछ ऐसा चुनें जिसकी clear structure और clean token story हो। आप fidelity test कर रहे हैं, miracle नहीं मांग रहे।
- diff को एक fan की तरह नहीं, code reviewer की तरह पढ़ें। Confirm करें कि यह token references पर resolve हुआ और आपके असली component पर map हुआ। अगर इसने hex value या duplicate component गढ़ा, तो वो frame system-clean नहीं था। source ठीक करें।
- scaffold engineer को दें, state, data, और accessibility work clearly flag करके कि वो उनकी है। export starting structure है। decisions काम है।
- जो आपने सीखा उसे system में वापस feed करें। जहाँ भी Make ने guess किया वो वो जगह है जहाँ आपके tokens या Code Connect mappings ambiguous थे। उन्हें tight करने से अगला export बेहतर होता है। system compound करता है।
pattern human-in-the-loop है, human-out-of-the-job नहीं। Make थकाऊ translation step हटाता है। thinking नहीं हटाता।
यह आपके deliverable को क्या करता है
atlassian.design पर live देखें
यह quietly बदल देता है कि एक designer के लिए "done" का क्या मतलब है। सालों तक deliverable एक pixel-perfect frame और एक शालीन उम्मीद थी कि engineering उसे match करे। match हमेशा lossy रही।
अब frame contract के करीब है। अगर आपका design असली tokens reference करता है और आपके components Code Connect से map होते हैं, तो export आपका intent code में कम drift के साथ carry करता है। handoff translation बंद होकर transfer बनने लगता है।
यह system work की value बढ़ाता है और pretty screenshots की value घटाता है। अगले साल जीतने वाले designers वो हैं जिनकी files इतनी structured हैं कि Make clean output produce करे। messy file तेज़ी से messy code produce करती है, जबकि disciplined system inheritable code देता है।
तो असली upgrade AI नहीं है। वो pressure है कि आखिरकार अपने tokens को सही नाम दें और अपने components को map करें। Make ने बस इस discipline को eventually की जगह immediately payoff करा दिया।
FAQ
18 जून का update उन सवालों के असली जवाब बदलता है जो designers Figma Make के बारे में सबसे ज़्यादा पूछते हैं।
क्या Figma Make अब production-ready React लिखता है?
करीब, लेकिन अकेले नहीं। update ऐसा React produce करता है जो आपके असली tokens और Code Connect mappings से जुड़ा है, जो sound है और रखने लायक है। State, accessibility, और असली data अभी भी आप पर है। इसे strong first draft मानें, finished feature नहीं।
Code Connect क्या है और export के लिए यह क्यों मायने रखता है?
Code Connect आपके Figma file के एक component को आपके codebase के असली component से map करता है। यही फर्क है Make के एक नया button गढ़ने और Make के उस Button को reuse करने में जिसे आपकी team पहले से maintain करती है, ताकि export आपके source of truth की तरफ point करे, duplicate न बनाए।
क्या Make मेरे design tokens use करता है या अपनी values गढ़ता है?
यह आपके tokens use करता है, जो 18 जून के बदलाव का core है। पुराने exports raw hex सीधे markup में bake करते थे। update values को token references पर resolve करता है, ताकि आपका code theme changes inherit करे, न कि snapshot freeze करे। output में raw hex का मतलब है वो frame कभी token पर map नहीं था।
Make अभी कहाँ कम पड़ता है?
पाँच जगह अभी भी human की ज़रूरत है, वही जो ऊपर की table में list हैं:
- State logic: loading, error, empty, success
- Interaction और motion behavior
- Obvious से परे accessibility
- असली data, edge cases, और लंबे strings
- कब component reuse करें बनाम नया बनाएं
Make layout, token-mapped styling, और static scaffolds handle करता है। judgment calls वहाँ हैं जहाँ असली काम है।
क्या मुझे इस हफ्ते अपना workflow बदलना चाहिए?
हाँ, एक छोटे तरीके से। Make को एक single clean component पर चलाएं, diff को engineer की तरह review करें, और जो यह reveal करे उससे अपने tokens और Code Connect coverage को tight करें। पूरी team को रातोंरात AI handoff पर flip न करें।
निष्कर्ष
Figma Make ने 18 जून को demo से tool की line cross की। सबूत करीब 9,200 reposts नहीं हैं @figma announcement thread पर, बल्कि वो production diffs हैं जो engineers ने उसके नीचे post किए और delete नहीं किए।
mechanism simple है। Make ने raw hex और one-off markup से pixels describe करना बंद कर दिया, और आपके असली tokens और Code Connect mappings को reference करना शुरू किया। यही फर्क है उस code में जिसे आप फेंकते हैं और उस code में जिसे आप merge करते हैं।
इसे अपनी team पर oversell न करें। Make skeleton बनाता है। State, interaction, accessibility, और edge cases अभी भी आपका काम है, और हमेशा रहेगा। इस हफ्ते सबसे smart move यह है कि इस update को finally अपने tokens सही नाम देने और अपने components map करने का reason बनाएं, क्योंकि एक clean system ही इस feature को toy से उस tool में बदलता है जिसके साथ आप actually ship कर सकते हैं।
Need a design system your code actually inherits? We build them.
Get Started
