Figma to Code: MarkupGen का React, Vue और CSS फ्रेमवर्क सपोर्ट

किसी भी डिज़ाइन hand-off में सबसे ज़्यादा समय लेने वाला फ़ैसला यह नहीं होता कि डिज़ाइन दिखने में अच्छा है या नहीं — बल्कि यह होता है कि जनरेट हुए कोड को किस स्टैक पर चलना है। एक React टीम को typed props के साथ JSX चाहिए, एक Vue टीम को एक ठीक-ठाक Single File Component चाहिए, और किसी static लैंडिंग पेज को शायद किसी फ्रेमवर्क की ज़रूरत ही न हो। MarkupGen आपको हर प्रोजेक्ट के लिए एक ही आउटपुट स्टैक में लॉक नहीं करता — आउटपुट फ्रेमवर्क उसी Figma डिज़ाइन के ऊपर, हर एक्सपोर्ट के साथ चुना जाने वाला फ़ैसला है।

कन्वर्ज़न कैसे काम करता है

फ्रेमवर्क चुनने तक पहुँचने से पहले, MarkupGen डिज़ाइन को चार स्टेप्स में प्रोसेस करता है:

1. Figma से फ़्रेम एक्सपोर्ट करें। MarkupGen का Figma प्लगइन आपके चुने हुए फ़्रेम की structure, styles और images को सीधे आपके workspace में भेज देता है — कोई स्क्रीनशॉट नहीं जिसे आपको आँख से दोबारा बनाना पड़े।
2. AI असल डिज़ाइन से HTML/CSS बनाता है। Layout, spacing, रंग और Auto Layout सीधे Figma फ़ाइल से पढ़े जाते हैं, सामान्य तरीक़े से अंदाज़ा नहीं लगाया जाता।
3. अपना आउटपुट फ़ॉर्मैट चुनें। यहीं पर आप फ्रेमवर्क तय करते हैं: Vanilla HTML/CSS, React, Vue, Svelte, Angular, और सिर्फ़ CSS के लिए Tailwind, Bootstrap, Bulma, Materialize या Pico।
4. रिफ़ाइन करें, फिर एक्सपोर्ट करें। फ़ाइनल कोड लेने से पहले visual editor में content, fonts और layout एडजस्ट करें, साथ ही एक अपने-आप बनने वाला AI quality score भी मिलता है, जिससे पता चलता है कि एक्सपोर्ट तैयार है या नहीं।

चूँकि structure और styling सोर्स डिज़ाइन से सिर्फ़ एक बार पढ़ी जाती है, आप स्टेप 3 पर आउटपुट फ़ॉर्मैट बदल सकते हैं, बिना हर बार डिज़ाइन को शुरू से दोबारा बनाए।

React में एक्सपोर्ट करना

React चुनें और MarkupGen एक्सपोर्ट टाइम पर मौजूद टॉगल के हिसाब से, TypeScript (TSX) या plain JavaScript (JSX) में JSX के साथ एक functional component बनाता है। Props टाइप किए हुए होते हैं, और अगर आपको एक शेयर्ड stylesheet की बजाय per-component scoping चाहिए, तो styles को inline styles की बजाय CSS Modules के तौर पर भी एक्सपोर्ट किया जा सकता है। Figma का Auto Layout सीधे कंपोनेंट की styles में Flexbox में मैप होता है, इसलिए आपको ऐसा कंपोनेंट मिलता है जिसमें responsive structure पहले से बना हुआ है, न कि props जोड़ा हुआ कोई static HTML ब्लॉक। पूरे वर्कफ़्लो को क़रीब से देखने के लिए Figma से React: डेवलपर्स के लिए एक प्रैक्टिकल वर्कफ़्लो देखें।

Vue में एक्सपोर्ट करना

Vue चुनें और नतीजे में आपको एक ठीक-ठाक Vue 3 Single File Component (.vue) मिलता है, जो prop declarations के लिए defineProps इस्तेमाल करता है और <template>/<script>/<style> वाला वही structure बनाए रखता है जो ज़्यादातर मौजूदा Vue codebase पहले से फ़ॉलो करते हैं। React की तरह ही, Figma के Auto Layout से जनरेट हुआ लेआउट कंपोनेंट की styles में अपना Flexbox structure बनाए रखता है, और आप उसी एक्सपोर्ट स्क्रीन से कंपोनेंट का नाम सेट कर सकते हैं और TypeScript बनाम plain JavaScript के बीच टॉगल कर सकते हैं। Vue export में क्या शामिल होता है, इसकी अधिक जानकारी के लिए Figma to Vue कन्वर्ज़न पेज देखें।

Svelte और Angular भी

React और Vue के अलावा, MarkupGen Svelte (4/5) और Angular (17+, एक standalone component के तौर पर) भी एक्सपोर्ट करता है — यह तब काम आता है जब आपकी टीम इन दो सबसे आम स्टैक में से किसी पर नहीं है, लेकिन फिर भी static HTML की बजाय एक कंपोनेंट चाहती है।

हर कंपोनेंट के साथ मिलने वाले CSS फ्रेमवर्क

अगर आपको किसी ख़ास JS फ्रेमवर्क के कंपोनेंट की ज़रूरत नहीं है, तो आप सीधे HTML/CSS में एक्सपोर्ट कर सकते हैं और अपने प्रोजेक्ट की configuration में एक CSS फ्रेमवर्क चुन सकते हैं: Vanilla CSS, Tailwind, Bootstrap, Bulma, Materialize या Pico। AI लेआउट को उस फ्रेमवर्क के असल grid, spacing और class कन्वेंशन पर दोबारा मैप करता है, न कि कोई सामान्य class जोड़कर उसे ठीक करना आप पर छोड़ देता है। आउटपुट साइज़, डिज़ाइन सटीकता और learning curve जैसे मामलों में सभी छह के बीच ट्रेड-ऑफ़ का विस्तृत विश्लेषण देखने के लिए MarkupGen जिन 6 CSS फ्रेमवर्क को सपोर्ट करता है देखें।

अपने प्रोजेक्ट के लिए क्या चुनें

• किसी मौजूदा React या Vue codebase के अंदर काम कर रहे हैं? सीधे React या Vue कंपोनेंट्स में एक्सपोर्ट करें, और अपनी टीम के कन्वेंशन के हिसाब से इसे Tailwind या CSS Modules के साथ जोड़ें।
• बस बिना bundler वाला एक static पेज चाहिए? Vanilla HTML/CSS या Pico — कोई runtime dependency नहीं।
• pre-built components (navbar, modal, form) के साथ तेज़ी से एक काम करता हुआ UI चाहिए? Bootstrap या Materialize।
• आपकी टीम Svelte या Angular इस्तेमाल करती है? दोनों ठीक-ठाक कंपोनेंट्स के तौर पर एक्सपोर्ट होते हैं, न कि कुछ ऐसा जिसे आपको HTML से हाथ से कन्वर्ट करना पड़े।

हर प्रोजेक्ट के लिए कोई एक ही सही जवाब नहीं होता — बात यह है कि MarkupGen आपको एक ही सोर्स डिज़ाइन पर, हर एक्सपोर्ट के हिसाब से फ्रेमवर्क चुनने देता है, बजाय इसके कि आपको एक ही स्टैक में लॉक कर दे। अपनी Figma फ़ाइल पर इसे मुफ़्त में आज़माएँ और देखें कि जिस स्टैक पर आप असल में काम करते हैं, उसके लिए कोड कैसा दिखता है।