MarkupGen यूज़र गाइड
Figma डिज़ाइन्स को प्रोडक्शन-रेडी कोड में बदलने के लिए आपको जो कुछ भी जानना है — फीचर्स, प्लान्स, लिमिट्स, और बेहतरीन नतीजे कैसे पाएं।
MarkupGen में आपका स्वागत है
MarkupGen क्या है, यह किसके लिए है, और इसे अलग क्या बनाता है।
MarkupGen क्या है?
MarkupGen एक प्लेटफ़ॉर्म है जो Figma डिज़ाइन्स को प्रोडक्शन-रेडी फ्रंट-एंड कोड में बदल देता है। एक साथी Figma plugin आपके काम कर रहे फ्रेम को एक्सपोर्ट करता है; MarkupGen उसे HTML और CSS में, और — पेड प्लान्स पर — React, Vue, Svelte, या Angular कॉम्पोनेंट में बदल देता है। एक बिल्ट-इन डुअल-मोड एडिटर (Code Editor और क्लिक-टू-एडिट Visual Editor) एक्सपोर्ट करने से पहले आपको नतीजे को बेहतर बनाने देता है।
यह किसके लिए है
वे फ्रंटएंड डेवलपर और फ्रीलांसर जो हर लेआउट को डिज़ाइन फ़ाइल से हाथ से ट्रांसलेट नहीं करना चाहते, छोटी एजेंसियां जो क्लाइंट डिज़ाइन्स को तेज़ी से काम करने वाले पेजेज़ में बदलती हैं, और वे लोग जिन्हें ऐसा HTML ईमेल टेम्पलेट बनाना है जो Gmail, Outlook, और Apple Mail में सही दिखे।
यह किस समस्या को हल करता है
किसी Figma फ़ाइल को हाथ से काम करने वाले markup में बदलना दोहराव भरा है और इसमें बारीक गलतियां होना आसान है। MarkupGen का बेस रूपांतरण एक पूर्वानुमानित, नियम-आधारित इंजन पर चलता है जो आपके Figma लेयर नामों और Auto Layout सेटिंग्स से संचालित होता है, इसलिए एक ही डिज़ाइन हर बार एक जैसे ही तरीके से बदलता है। उसके ऊपर AI फीचर्स का एक फोकस्ड सेट काम करता है — इंटरैक्टिविटी, रिस्पॉन्सिव वेरिएंट्स, क्वालिटी स्कोरिंग, और वन-क्लिक फिक्स के लिए — ठीक वहीं जहां AI असली वैल्यू जोड़ता है।
मुख्य उपयोग के मामले
- किसी एक Figma फ्रेम या कॉम्पोनेंट को स्टैंडअलोन HTML पेज में बदलना।
- एक रिस्पॉन्सिव लैंडिंग पेज बनाना जो डेस्कटॉप और मोबाइल दोनों पर अच्छे से दिखे।
- क्रॉस-क्लाइंट कम्पैटिबिलिटी के लिए इनलाइन स्टाइल्स वाला HTML ईमेल टेम्पलेट जनरेट करना।
- अपने खुद के कोडबेस के लिए डिज़ाइन को React, Vue, Svelte, या Angular कॉम्पोनेंट के रूप में एक्सपोर्ट करना (पेड प्लान्स)।
- Templates के साथ फिर से इस्तेमाल होने वाले स्टार्टिंग पॉइंट्स की एक निजी या टीम लाइब्रेरी बनाना।
शुरुआत करें
अकाउंट बनाने से लेकर अपने पहले जनरेट किए गए पेज को रिव्यू करने तक।
- 1
अकाउंट बनाएं
एक क्लिक में Google से साइन अप करें, या ईमेल और पासवर्ड से। ईमेल वाले तरीके में लॉग इन करने से पहले एक क्विक वेरिफिकेशन चेक पास करना और अपना ईमेल कन्फर्म करना ज़रूरी है।
- 2
साइन इन करें
उसी तरीके का इस्तेमाल करें जिससे आपने साइन अप किया था। पांच बार गलत पासवर्ड डालने पर आपका अकाउंट 15 मिनट के लिए लॉक हो जाता है — इसे किसी भी समय ईमेल से रीसेट करने के लिए "Forgot password" का इस्तेमाल करें।
- 3
अपना डैशबोर्ड एक्सप्लोर करें
आपका डैशबोर्ड एक Create from Figma बटन, आपकी प्रोजेक्ट काउंट और औसत AI क्वालिटी स्कोर, एक Quick Convert लॉन्चर, और आपके सबसे हाल ही में अपडेट किए गए प्रोजेक्ट्स दिखाता है।
- 4
वर्कस्पेस को समझें
हर प्रोजेक्ट एक Workspace के अंदर रहता है — यह आपके और आपके किसी भी टीममेट के लिए एक शेयर्ड स्पेस है। किसी प्रोजेक्ट के अंदर, आप Code Editor (हर प्लान पर) और Visual Editor (Starter, Pro, Business) के बीच स्विच कर सकते हैं।
- 5
अपना पहला प्रोजेक्ट बनाएं
Figma Community से MarkupGen plugin इंस्टॉल करें, इसे Figma में खोलें, एक फ्रेम या कॉम्पोनेंट चुनें, और Export & Send पर क्लिक करें।
आपके MarkupGen डैशबोर्ड में एक नया प्रोजेक्ट दिखाई देगा।
- 6
अपना पहला रूपांतरण चलाएं
नया प्रोजेक्ट खोलें और Generate Code पर क्लिक करें। देखें कैसे MarkupGen आपके डिज़ाइन डेटा से कनेक्ट होकर लेयर्स का विश्लेषण करता है, इमेजेज़ निकालता है, और HTML/CSS लिखता है।
एक काम करने वाला HTML/CSS पेज, साथ में एक ऑटोमैटिक 0–10 क्वालिटी स्कोर।
- 7
नतीजे को रिव्यू करें
स्प्लिट-व्यू HTML/CSS/JS एडिटर के लिए Code टैब का इस्तेमाल करें, या Desktop (1280px), Tablet (768px), और Mobile (375px) व्यू चेक करने के लिए Preview पैनल का।
- 8
अपना कोड एक्सपोर्ट करें
किसी भी प्लान पर सिंपल HTML/CSS डाउनलोड करें। पेड प्लान्स एक फ्रेमवर्क कॉम्पोनेंट, या सभी फ्रेमवर्क एक साथ ZIP बंडल के रूप में एक्सपोर्ट कर सकते हैं।
मुख्य फीचर्स
प्रोडक्ट का हर फीचर, इसके लिए किस प्लान की ज़रूरत है, और यह कैसे काम करता है।
Figma Plugin इम्पोर्ट
Figma से एक चुने हुए फ्रेम, कॉम्पोनेंट, या ग्रुप को एक्सपोर्ट करता है — इसमें वेक्टर आइकन असली SVG के रूप में, बैकग्राउंड इमेजेज़, फ़ॉन्ट्स, और Auto Layout स्ट्रक्चर शामिल हैं।
Figma Community से इंस्टॉल करें, एक बार लॉग इन करें, एक फ्रेम चुनें, और Export & Send पर क्लिक करें।
प्रति एक्सपोर्ट एक फ्रेम — अभी मल्टी-फ्रेम या पूरे पेज का बैच इम्पोर्ट उपलब्ध नहीं है।
Code Editor
आपके जनरेट किए गए HTML, CSS, और JS के लिए एक प्रोफेशनल स्प्लिट-व्यू कोड एडिटर, सिंटैक्स हाइलाइटिंग और ऑटो-फॉर्मेटिंग के साथ।
Visual Editor
लाइव प्रीव्यू पर सीधे क्लिक-टू-एडिट: एलिमेंट्स इंस्पेक्ट करें, ड्रैग-एंड-ड्रॉप स्टाइल एडिटिंग, इनलाइन टेक्स्ट एडिटिंग, सेफ लिंक मैनेजमेंट, और ट्रांज़िशन्स के साथ शो/हाइड।
एक्टिव पेड सब्सक्रिप्शन ज़रूरी है, जो सर्वर पर लागू किया जाता है।
AI Semantic Element Conversion
AI का इस्तेमाल करके स्टैटिक लेआउट बॉक्सेस को असली इंटरैक्टिव फॉर्म कंट्रोल्स में अपग्रेड करता है — बटन, इनपुट, टेक्स्टएरिया, सिलेक्ट।
तीन प्रिसिज़न लेवल:
मौजूदा HTML स्ट्रक्चर, स्टाइलिंग, और प्रीव्यू इमेज का विश्लेषण करता है।
अतिरिक्त सटीकता के लिए मूल डिज़ाइन को क्रॉस-रेफरेंस करता है।
जटिल कॉम्पोनेंट्स को सही ढंग से वर्गीकृत करने के लिए पूरा स्ट्रक्चरल विश्लेषण।
AI JavaScript और इंटरैक्टिव कॉम्पोनेंट्स
UI पैटर्न पहचानता है — स्लाइडर, कैरोसेल, अकॉर्डियन, मॉडल, टैब्स, फॉर्म वैलिडेशन — और इनके लिए काम करने वाला JS और CSS जनरेट करता है।
AI Responsive Layout Generator
डेस्कटॉप रूपांतरण को किसी दूसरे स्क्रीन साइज़ के लिए ऑप्टिमाइज़्ड लेआउट में पुनर्गठित करता है, साथ में एक साइड-बाय-साइड बिफोर/आफ्टर प्रीव्यू।
दो टारगेट दिशाओं को सपोर्ट करता है — मोबाइल और डेस्कटॉप — एक कॉन्फ़िगर करने योग्य ब्रेकपॉइंट (320–2000px) के साथ।
AI Quality Scoring और तुलना
आपके जनरेट किए गए कोड को मूल डिज़ाइन के मुकाबले छह भारित मापदंडों — Layout, Spacing, Typography, Color, Content, और Details — पर 0 से 10 तक स्कोर करता है।
स्कोर कलर कन्वेंशन
उत्कृष्ट
मूल डिज़ाइन से लगभग पूरी तरह मेल खाता है।
अच्छा
कुछ ध्यान देने योग्य अंतरों के साथ, कुल मिलाकर करीब।
सुधार की ज़रूरत है
मूल डिज़ाइन से काफी अंतर।
Smart 1-Click Code Fix
Quality Score में मिली गड़बड़ियों के लिए टारगेटेड AI-जनरेटेड पैच लगाता है, बिना आपके बाकी कोड को छेड़े।
ऑटोमेटेड सिंटैक्स और कोड वैलिडेशन
सेव करने से पहले जनरेट किए गए HTML/CSS सिंटैक्स इशूज़ को जांचता और ठीक करता है।
हाई-स्पीड प्रायोरिटी प्रोसेसिंग
अधिक प्रति-मिनट और प्रति-दिन जनरेशन लिमिट्स, Business प्लान पर तेज़ प्रोसेसिंग के साथ।
कॉम्पोनेंट एक्सपोर्ट
आपके जनरेट किए गए डिज़ाइन को सिंपल HTML/CSS, एक फ्रेमवर्क कॉम्पोनेंट, या एक पूरे मल्टी-फ्रेमवर्क बंडल के रूप में डाउनलोड करता है।
React (JSX/TSX), Vue 3 SFC, Svelte 5, या Angular Standalone, साथ में एक ZIP बंडल और एक ईमेल-क्लाइंट टेस्ट ऑप्शन।
CSS Framework आउटपुट
आपके CSS को छह में से किसी एक स्टाइल में जनरेट करता है: Vanilla, Tailwind, Bootstrap, Bulma, Materialize, या Pico CSS।
Vanilla, Tailwind, और Bootstrap हर प्लान पर उपलब्ध हैं। Bulma, Materialize, और Pico CSS के लिए पेड प्लान ज़रूरी है।
आउटपुट मोड्स
Standard Web Page (सीधा Flexbox/Grid रूपांतरण), Responsive Layout (फ्लूइड मल्टी-स्क्रीन), या Email Template (Gmail, Outlook, और Apple Mail के लिए इनलाइन-CSS टेबल्स)।
Email Template मोड रोटेशन, नॉन-स्टैंडर्ड ब्लेंड मोड्स, या शैडो/ब्लर इफेक्ट्स को रीक्रिएट नहीं कर सकता — इनके बजाय इन्हें सिंपलिफाई किया जाता है या इमेज के रूप में रैस्टराइज़ किया जाता है।
Templates
आपके किसी भी प्रोजेक्ट को दोबारा इस्तेमाल करने योग्य Template के तौर पर मार्क करता है, जो आपके वर्कस्पेस के लिए एक खोजने योग्य गैलरी में दिखता है।
Figma से Code वर्कफ़्लो
किसी डिज़ाइन को शुरू से आखिर तक कैसे तैयार करें, रूपांतरित करें, और जांचें।
साफ़ Figma अंदर, साफ़ कोड बाहर
यह सिर्फ प्रोत्साहन नहीं है — यह इंजन के काम करने का तरीका है। Semantic HTML टैग्स, एक्सेसिबल लेबल्स, और हेडिंग लेवल्स सीधे आपके Figma लेयर नामों और Auto Layout स्ट्रक्चर से पता लगाए जाते हैं। वर्णनात्मक नामों और लगातार Auto Layout वाली फ़ाइल, डिफ़ॉल्ट नामों — जैसे "Rectangle 4" — वाले अनग्रुप्ड शेप्स से भरी फ़ाइल से नापने लायक बेहतर रूपांतरित होगी।
अपनी Figma फ़ाइल तैयार करना
लेयर्स के नाम इस आधार पर रखें कि वे क्या हैं — "Header", "Add to Cart Button", "Hero Image" — न कि Figma के ऑटो-जनरेटेड नामों पर। जहां भी संभव हो Auto Layout का इस्तेमाल करें: Auto Layout फ्रेम्स सीधे CSS Flexbox में बदल जाते हैं, जबकि इसके बिना वाले फ्रेम्स फिक्स्ड-साइज़ बॉक्स के रूप में एक्सपोर्ट होते हैं। हर फ्रेम को लगभग 2,000 लेयर्स और 120 मेगापिक्सेल रेंडर्ड एरिया से काफी नीचे रखें — बड़े डिज़ाइन्स को छोटे फ्रेम्स में बांट दें।
इम्पोर्ट करना
एक्सपोर्ट Figma plugin के ज़रिए होता है, प्रति एक्सपोर्ट एक फ्रेम, कॉम्पोनेंट, या ग्रुप। अभी एक ही एक्शन में कई फ्रेम्स या पूरा पेज इम्पोर्ट करने का कोई तरीका नहीं है — हर फ्रेम को अपने खुद के MarkupGen प्रोजेक्ट के रूप में रूपांतरित करें।
कॉन्फ़िगरेशन विकल्प
अपना आउटपुट मोड चुनें (Standard Web Page, Responsive Layout, या Email Template), अपना CSS फ्रेमवर्क (हर प्लान पर Vanilla, Tailwind, और Bootstrap; पेड प्लान्स पर Bulma, Materialize, और Pico CSS), और एक्सपोर्ट किए गए एसेट्स के लिए एक इमेज फॉर्मेट (Original, PNG, AVIF, WebP, या JPG)।
जनरेट किए गए HTML को जांचना
इंजन असली सिमैंटिक टैग्स आउटपुट करता है — header, nav, main, footer, aside, article, section — जो आपके लेयर नामों से पता लगाए जाते हैं, और हेडिंग लेवल्स फ़ॉन्ट साइज़ और वेट से। सिर्फ आइकन वाले बटन को असली ARIA लेबल मिलते हैं, कंटेंट इमेजेज़ को वर्णनात्मक alt टेक्स्ट मिलता है, और डेकोरेटिव या वेक्टर इमेजेज़ को सही तरीके से एक खाली alt और aria-hidden मिलता है।
CSS को जांचना
Auto Layout फ्रेम्स matching gap, padding, और alignment के साथ Flexbox बन जाते हैं। बिना Auto Layout वाले फ्रेम्स आपकी Figma फ़ाइल से फिक्स्ड पिक्सेल डायमेंशन और पोज़िशन बनाए रखते हैं।
रिस्पॉन्सिव व्यवहार
बेस रूपांतरण आपके Figma फ्रेम को एक फिक्स्ड साइज़ पर मिरर करता है — यह अपने आप रिस्पॉन्सिव नहीं होता। ऐसे लेआउट के लिए जो डिवाइसेज़ के हिसाब से ढल सके, Responsive आउटपुट मोड चुनें या AI Responsive Layout Generator (मोबाइल और डेस्कटॉप दिशाएं) का इस्तेमाल करें।
टाइपोग्राफी, रंग, स्पेसिंग, इमेजेज़, और आइकन
हेडिंग लेवल्स फ़ॉन्ट साइज़ और वेट से पता लगाए जाते हैं। रंग सीधे आपके Figma फिल्स से पढ़े जाते हैं। स्पेसिंग Auto Layout के gap, padding, और alignment को फॉलो करती है, या Auto Layout इस्तेमाल न होने पर फिक्स्ड पोज़िशन्स को। इमेजेज़ आपके चुने हुए फॉर्मेट में एक्सपोर्ट होती हैं; आइकन जहां भी मुमकिन हो असली SVG के रूप में निकाले जाते हैं, जटिल फिल्स या मास्क्स को PNG कम्पोज़िट्स के रूप में रैस्टराइज़ किया जाता है।
कॉम्पोनेंट्स, लेआउट, और कंस्ट्रेंट्स
Figma कॉम्पोनेंट्स और कॉम्पोनेंट सेट्स एक्सपोर्ट के दौरान पढ़े जाते हैं, लेकिन MarkupGen अभी हर Figma कॉम्पोनेंट के लिए एक शेयर्ड, फिर से इस्तेमाल होने वाली कॉम्पोनेंट डेफिनिशन नहीं बनाता — हर रूपांतरण एक स्टैंडअलोन पेज या फ्रैगमेंट है। लेआउट Auto Layout और एब्सोल्यूट बाउंडिंग बॉक्सेस से आता है; Figma की कंस्ट्रेंट सेटिंग्स (pin left/right, scale) अभी पढ़ी या रीक्रिएट नहीं की जातीं।
Semantic HTML, एक्सेसिबिलिटी, और SEO
Semantic HTML और एक्सेसिबिलिटी असली, लागू किए गए फीचर्स हैं, जिनका ज़िक्र ऊपर और Core Features में किया गया है। SEO आउटपुट शामिल नहीं है — MarkupGen जनरेट किए गए कोड में पेज टाइटल, मेटा डिस्क्रिप्शन, Open Graph टैग्स, या स्ट्रक्चर्ड डेटा नहीं जोड़ता। अपने प्रोजेक्ट में आउटपुट को इंटीग्रेट करने के बाद इसे खुद जोड़ें।
सटीकता को क्या प्रभावित करता है, और बेहतरीन आउटपुट कैसे पाएं
Figma लेयर नेमिंग की क्वालिटी सिमैंटिक और एक्सेसिबल आउटपुट के लिए सबसे बड़ा फैक्टर है, इसके बाद आता है Auto Layout का इस्तेमाल, फ्रेम की जटिलता, और क्या आपका डिज़ाइन ऐसे इफेक्ट्स इस्तेमाल करता है जिन्हें चुना गया आउटपुट मोड रीक्रिएट कर सकता है (खासकर Email Template मोड रोटेशन, ब्लेंड मोड्स, या शैडो को रीक्रिएट नहीं कर सकता)।
आउटपुट क्वालिटी
MarkupGen क्या नियंत्रित करता है, क्या आपके इनपुट पर निर्भर करता है, और क्या मापा जाता है।
MarkupGen नियंत्रित करता है
- रूपांतरण इंजन और सिमैंटिक-टैग हेयुरिस्टिक्स
- एक्सेसिबल लेबल और alt-टेक्स्ट जनरेशन
- AI स्कोरिंग, फिक्स, रिस्पॉन्सिव, और JS लेयर्स (पेड प्लान्स)
आपका इनपुट नियंत्रित करता है
- Figma लेयर नेमिंग की क्वालिटी
- Auto Layout का इस्तेमाल
- फ्रेम की जटिलता और इफेक्ट्स का इस्तेमाल
सटीकता और विज़ुअल फिडेलिटी
AI Quality Score (पेड प्लान्स) के ज़रिए ऑटोमेटिकली मापी जाती है: Layout, Spacing, Typography, Color, Content, और Details पर 0–10। इसमें कोई अलग, ग्लोबल एक्युरेसी परसेंटेज नहीं है — क्वालिटी डिज़ाइन पर निर्भर करती है।
HTML स्ट्रक्चर और सिमैंटिक्स
असली सिमैंटिक टैग्स और हेडिंग लेवल्स, इस बात पर निर्भर कि आपके Figma लेयर्स कितने वर्णनात्मक तरीके से नाम किए गए हैं।
CSS क्वालिटी और मेंटेनेबिलिटी
Auto Layout फ्रेम्स के लिए Flexbox-आधारित, बाकी के लिए फिक्स्ड-पोज़िशन। मेंटेनेबिलिटी आपके चुने हुए CSS फ्रेमवर्क, क्लास-नेमिंग स्टाइल, और लेयर नेमिंग पर निर्भर करती है।
रिस्पॉन्सिव व्यवहार, एक्सेसिबिलिटी, और SEO तैयारी
रिस्पॉन्सिव लेआउट Responsive आउटपुट मोड के ज़रिए ऑप्ट-इन है। एक्सेसिबिलिटी में असली, ऑटो-जनरेटेड ARIA लेबल्स और alt टेक्स्ट शामिल हैं। SEO मेटाडेटा शामिल नहीं है — एक्सपोर्ट के बाद इसे खुद जोड़ें।
समर्थित भाषाएं
इंटरफ़ेस दस भाषाओं में उपलब्ध है।
English, Tiếng Việt, Français, 中文 (简体), 日本語, हिन्दी, Italiano, Español, ไทย, और Русский। English डिफ़ॉल्ट है; ऐप आपकी ब्राउज़र भाषा के आधार पर अपने आप स्विच नहीं होता, इसलिए कोई शेयर किया हुआ लिंक हमेशा तय की गई भाषा में खुलता है।
Settings → Language से अपनी भाषा बदलें। MarkupGen आपके Figma लेयर्स के अंदर जो भी टेक्स्ट है उसे जैसा है वैसा ही रूपांतरित करता है — फीचर उपलब्धता पूरी तरह आपके प्लान से तय होती है, आपकी इंटरफ़ेस भाषा से नहीं।
प्लान्स और प्राइसिंग
नीचे दिए गए सभी आंकड़े सीधे बिलिंग कॉन्फ़िगरेशन से लिए गए हैं।
| फीचर | Free | Starter | Pro | Business |
|---|---|---|---|---|
| कीमत | $0 | $10 / माह | $20 / माह | $100 / माह |
| कोड जनरेशन | 5 / महीना | 50 / दिन | 150 / दिन | 1,000 / दिन |
| नए प्रोजेक्ट्स | 10 / महीना | 100 / दिन | 300 / दिन | 2,000 / दिन |
| जनरेशन स्पीड लिमिट | 2 req/min | 10 req/min | 20 req/min | 60 req/min, तेज़ AI मॉडल |
| CSS फ्रेमवर्क | Vanilla, Tailwind, Bootstrap | सभी 6 फ्रेमवर्क | सभी 6 फ्रेमवर्क | सभी 6 फ्रेमवर्क |
| Visual Editor | शामिल नहीं | शामिल | शामिल | शामिल |
| AI क्वालिटी स्कोरिंग और फिक्स | शामिल नहीं | शामिल | शामिल | शामिल |
| कॉम्पोनेंट एक्सपोर्ट | सिर्फ HTML / CSS | एक बार में 1 फ्रेमवर्क | सभी फ्रेमवर्क + Export Studio | सभी फ्रेमवर्क + Export Studio |
| सहायता | कम्युनिटी | ईमेल सहायता | प्राथमिकता ईमेल सहायता | समर्पित 1-on-1 सहायता |
सभी पेड प्लान्स सिर्फ मासिक बिल होते हैं — कोई वार्षिक विकल्प नहीं है। कानून द्वारा ज़रूरी न होने पर फीस रिफंड योग्य नहीं है। Stripe या Lemon Squeezy के ज़रिए कार्ड से भुगतान करें, या SePay के ज़रिए इंस्टेंट वियतनामी बैंक-ट्रांसफर QR से।
Free प्लान
प्रोडक्ट आज़माने या कभी-कभार होने वाले किसी एक रूपांतरण के लिए सबसे अच्छा: महीने में 5 AI-असिस्टेड रूपांतरण, सिंपल HTML/CSS डाउनलोड, और Vanilla, Tailwind, या Bootstrap CSS। Visual Editor, AI क्वालिटी स्कोरिंग, और फ्रेमवर्क एक्सपोर्ट इसमें शामिल नहीं हैं।
पेड प्लान्स
Starter सोलो बिल्डर्स और फ्रीलांस प्रोजेक्ट्स के लिए उपयुक्त है। Pro प्रोफेशनल्स और छोटी एजेंसियों के लिए पूरा Export Studio बंडल जोड़ता है जो एक साथ कई क्लाइंट प्रोजेक्ट्स चलाती हैं। Business टीमों के लिए सबसे ज़्यादा वॉल्यूम और सबसे तेज़ प्रोसेसिंग देता है। जब आप अपनी जनरेशन कैप पर पहुंचें, Visual Editor या क्वालिटी स्कोरिंग की ज़रूरत हो, या raw HTML की जगह असली फ्रेमवर्क कॉम्पोनेंट चाहिए हो, तो अपग्रेड करें।
क्रेडिट्स, उपयोग और लिमिट्स
MarkupGen पॉइंट्स-स्टाइल क्रेडिट सिस्टम इस्तेमाल नहीं करता — यह प्रति प्लान एक सिंपल जनरेशन काउंट इस्तेमाल करता है।
- यह कैसे गिना जाता है — एक "Generate Code" एक्शन आपके जनरेशन कोटा के खिलाफ एक यूनिट के बराबर है।
- रीसेट साइकल — Free कैलेंडर महीने पर रीसेट होता है; हर पेड प्लान रोज़ाना रीसेट होता है।
- रोलओवर — कोई नहीं; इस्तेमाल न किया गया कोटा अगले पीरियड में कैरी नहीं होता।
- एक्सपायरी — कोटा बस हर पीरियड में रीसेट हो जाता है; यह पीरियड के बीच में एक्सपायर नहीं होता।
प्रोजेक्ट क्रिएशन कोटा
यह जनरेशन कोटा से अलग है, और हमेशा उसी पीरियड के लिए आपके प्लान की जनरेशन लिमिट का ठीक दोगुना होता है (उदाहरण के लिए, Free: 10 प्रोजेक्ट्स/महीना; Pro: 300 प्रोजेक्ट्स/दिन)। अगर आप ठीक अपनी लिमिट पर हैं, तो एक और प्रोजेक्ट अब भी सेव हो सकता है ताकि आपका काम कभी न खोए — लेकिन यह Quota Locked स्थिति में रखा जाता है और तब तक कोड जनरेट नहीं कर सकता जब तक आप अपग्रेड न करें या पीरियड रीसेट न हो। किसी प्रोजेक्ट को डिलीट करने से उस पीरियड के लिए कोटा फ्री नहीं होता।
| प्रति-एक्सपोर्ट लिमिट्स | |
|---|---|
| Figma फ्रेम लेयर काउंट | ~2,000 लेयर्स प्रति एक्सपोर्ट |
| Figma फ्रेम एक्सपोर्ट एरिया | ~120 मेगापिक्सेल |
| प्रति एक्सपोर्ट कुल अपलोड साइज़ | 50 MB |
| Plugin अपलोड टाइमआउट | 3 मिनट |
| कस्टम AI इंस्ट्रक्शन लंबाई | 3,000 अक्षर |
अकाउंट और सब्सक्रिप्शन
आप खुद क्या बदल सकते हैं, और बिलिंग कैसे काम करती है।
अकाउंट सेटिंग्स
Settings से आप अपनी प्रोफ़ाइल एडिट कर सकते हैं, अपना पासवर्ड बदल सकते हैं (यह तब भी काम करता है जब आपने Google से साइन अप किया हो — आप यहां से पहली बार पासवर्ड सेट कर सकते हैं), अपना प्लान और बिलिंग मैनेज कर सकते हैं, और अपनी भाषा बदल सकते हैं।
अपग्रेड करना
Pricing पेज से अपग्रेड करें। अपग्रेड तुरंत लागू होते हैं, प्रोरेटेड बिलिंग के साथ।
डाउनग्रेड करना
Settings → Billing से, किसी लोअर पेड टियर पर जाने का शेड्यूल बनाएं, जो आपकी मौजूदा बिलिंग पीरियड के अंत में लागू होता है, बिना किसी आंशिक रिफंड के। Starter के पास डाउनग्रेड करने के लिए कोई लोअर पेड टियर नहीं है।
कैंसल करना
अपनी सब्सक्रिप्शन कैंसल करने के लिए, support@markupgen.com पर संपर्क करें। अगर आप Pro या Business पर हैं, तो आप इस बीच Settings → Billing से किसी लोअर पेड टियर पर डाउनग्रेड भी शेड्यूल कर सकते हैं।
बिलिंग और भुगतान
Stripe या Lemon Squeezy के ज़रिए कार्ड से भुगतान करें, या SePay के ज़रिए इंस्टेंट वियतनामी बैंक-ट्रांसफर QR से (15 मिनट की विंडो)।
रिफंड
कानून द्वारा ज़रूरी न होने पर सभी फीस रिफंड योग्य नहीं हैं। इसकी कोई अलग मनी-बैक गारंटी नहीं है।
अकाउंट डिलीशन
अभी कोई सेल्फ-सर्विस "Delete my account" बटन नहीं है। आप support@markupgen.com पर ईमेल करके किसी भी समय अपने अकाउंट और उसके डेटा को डिलीट करने का अनुरोध कर सकते हैं।
सुरक्षा और गोपनीयता
MarkupGen की Privacy Policy, Terms of Use, और ऑथेंटिकेशन डिज़ाइन से संक्षेप में लिया गया।
कौन सा डेटा एकत्र किया जाता है
आपका नाम, ईमेल, और अकाउंट क्रेडेंशियल्स, साथ ही सिर्फ वे खास Figma फ्रेम्स जिन्हें आप जानबूझकर एक्सपोर्ट करते हैं — MarkupGen के पास आपके पूरे Figma अकाउंट तक स्थायी एक्सेस नहीं है। कुकीज़ के ज़रिए बुनियादी तकनीकी डेटा (IP, ब्राउज़र, डिवाइस) एकत्र किया जाता है।
आपके डिज़ाइन और जनरेट किया गया कोड
आप जो Figma डिज़ाइन्स और कंटेंट इम्पोर्ट करते हैं, उनके अधिकार आपके पास ही रहते हैं। MarkupGen दूसरे कस्टमर्स के लिए AI मॉडल्स को ट्रेन करने के लिए आपके निजी डिज़ाइन्स का इस्तेमाल नहीं करता।
डेटा रिटेंशन और डिलीशन
जब तक आपका अकाउंट एक्टिव है, या कानूनी, अकाउंटिंग, या सुरक्षा कारणों से ज़रूरी हो, डेटा रखा जाता है। आप support@markupgen.com के ज़रिए किसी भी समय डिलीशन का अनुरोध कर सकते हैं।
अकाउंट सुरक्षा
पासवर्ड हैश किए जाते हैं; लॉगिन और रजिस्ट्रेशन दोनों में CAPTCHA चेक ज़रूरी है; पांच बार गलत लॉगिन प्रयास करने पर अकाउंट 15 मिनट के लिए लॉक हो जाता है; पासवर्ड-आधारित अकाउंट्स के लिए ईमेल वेरिफिकेशन ज़रूरी है। टू-फैक्टर ऑथेंटिकेशन और एक्टिव-सेशन मैनेजमेंट अभी उपलब्ध नहीं हैं।
थर्ड-पार्टी सर्विसेज़
कार्ड भुगतान के लिए Stripe और Lemon Squeezy, वियतनामी बैंक ट्रांसफर के लिए SePay, और उपयोग विश्लेषण के लिए Google Analytics।
ट्रबलशूटिंग
समस्या, संभावित कारण, और समाधान — श्रेणी के हिसाब से व्यवस्थित।
रूपांतरण की समस्याएं
Generate Code ग्रे हो गया है या रिजेक्ट हो रहा है।
→ आप अपने प्लान की जनरेशन या प्रोजेक्ट-क्रिएशन लिमिट पर पहुंच गए हैं, या प्रोजेक्ट पहले के किसी ओवरफ़्लो से Quota Locked है।
अपने अगले रीसेट का इंतज़ार करें, या अपग्रेड करें — अपग्रेड करने से लॉक्ड प्रोजेक्ट्स तुरंत अनलॉक हो जाते हैं।
Figma plugin से एक्सपोर्ट फेल हो जाता है या टाइमआउट हो जाता है।
→ फ्रेम लगभग 2,000 लेयर्स या 120 मेगापिक्सेल से ज़्यादा है, या अपलोड ने 3-मिनट की लिमिट पार कर दी है।
फ्रेम को छोटे हिस्सों में बांटें और हर हिस्से को अलग से एक्सपोर्ट करें।
आउटपुट जेनेरिक दिखता है, सिंपल divs और बेकार alt टेक्स्ट के साथ।
→ आपके Figma लेयर्स अब भी "Rectangle 4" या "Group" जैसे डिफ़ॉल्ट नाम इस्तेमाल कर रहे हैं।
लेयर्स के नाम वर्णनात्मक तरीके से रखें और फिर से एक्सपोर्ट करें।
आउटपुट की समस्याएं
किसी Email एक्सपोर्ट में रोटेशन, शैडो, या ब्लेंड इफेक्ट्स गायब हैं।
→ ईमेल क्लाइंट्स इन्हें भरोसेमंद तरीके से रेंडर नहीं कर सकते, इसलिए Email Template मोड इन्हें सिंपलिफाई या रैस्टराइज़ कर देता है।
अगर आपको ये इफेक्ट्स असली CSS के रूप में चाहिए तो Standard या Responsive मोड इस्तेमाल करें।
लेआउट स्क्रीन साइज़ के हिसाब से ढलता नहीं है।
→ बेस रूपांतरण एक फिक्स्ड साइज़ को मिरर करता है।
इसके बजाय Responsive आउटपुट मोड चुनें।
ऑथेंटिकेशन की समस्याएं
लॉग इन नहीं हो पा रहा है।
→ पांच बार गलत प्रयास करने पर अकाउंट 15 मिनट के लिए लॉक हो जाता है, या आपका ईमेल अभी वेरिफाई नहीं हुआ है।
15 मिनट इंतज़ार करें, या वेरिफिकेशन ईमेल के लिए अपना इनबॉक्स (और स्पैम फ़ोल्डर) चेक करें।
पासवर्ड भूल गए।
लॉगिन पेज पर "Forgot password" का इस्तेमाल करें; रीसेट लिंक एक घंटे के लिए मान्य है।
भुगतान की समस्याएं
एक SePay बैंक-ट्रांसफर भुगतान "pending" पर अटका है।
→ QR कोड 15 मिनट के बाद एक्सपायर हो जाता है।
ऑर्डर स्टेटस पेज चेक करें, या अगर यह एक्सपायर हो गया है तो चेकआउट फिर से शुरू करें।
कार्ड से भुगतान फेल हो जाता है।
→ कार्ड डिक्लाइन हो गया था या डिटेल्स गलत डाली गई थीं।
अपने बैंक के साथ अपने कार्ड की डिटेल्स वेरिफाई करें, या दूसरा पेमेंट प्रोवाइडर आज़माएं। अगर आपसे चार्ज लिया गया लेकिन आपका प्लान अपडेट नहीं हुआ, तो सहायता से संपर्क करें।
सब्सक्रिप्शन की समस्याएं
कोई "Cancel Subscription" बटन नहीं है।
→ यह अभी सेल्फ-सर्विस कंट्रोल नहीं है।
कैंसल करने के लिए support@markupgen.com पर ईमेल करें।
Starter प्लान पर कोई डाउनग्रेड विकल्प नहीं है।
→ Starter सबसे कम कीमत वाला पेड टियर है।
यह अपेक्षित है — ऐप के अंदर डाउनग्रेड करने के लिए इससे नीचे कुछ भी नहीं है।
डाउनलोड और एक्सपोर्ट की समस्याएं
फ्रेमवर्क एक्सपोर्ट (React/Vue/Svelte/Angular) लॉक्ड है।
→ सिंगल-फ्रेमवर्क एक्सपोर्ट के लिए किसी भी पेड प्लान की ज़रूरत है।
Starter या उससे ऊपर अपग्रेड करें।
Export Studio लॉक्ड है, Starter पर भी।
→ ऑल-फ्रेमवर्क्स बंडल के लिए खास तौर पर Pro या Business ज़रूरी है।
Pro में अपग्रेड करें।
बेस्ट प्रैक्टिस
ठोस आदतें जो रूपांतरण की क्वालिटी को नापने लायक तरीके से बेहतर बनाती हैं।
- जहां भी संभव हो Auto Layout इस्तेमाल करें — यह फ्लूइड CSS को फिक्स्ड-पोज़िशन बॉक्सेस से अलग करने वाला सबसे बड़ा फैक्टर है।
- लेयर्स के नाम आसान भाषा में रखें — "Header", "Add to Cart Button", "Hero Image" — इंजन HTML टैग्स, ARIA लेबल्स, और alt टेक्स्ट चुनने के लिए इन्हीं नामों को पढ़ता है।
- संबंधित एलिमेंट्स को फ्री-फ्लोटिंग, एब्सोल्यूटली-पोज़िशन्ड शेप्स के रूप में छोड़ने की बजाय एक Auto Layout फ्रेम के अंदर ग्रुप करें।
- हेडिंग्स बनाम बॉडी टेक्स्ट के लिए लगातार, सोच-समझकर चुने गए टाइप साइज़ इस्तेमाल करें — हेडिंग लेवल्स इन्हीं से तय होते हैं।
- कंटेंट इमेजेज़ और डेकोरेटिव एसेट्स को विज़ुअली अलग रखें — MarkupGen आउटपुट में इन्हें पहले से ही अलग तरीके से हैंडल करता है।
- अपना आउटपुट मोड पहले से तय कर लें। Standard-मोड रूपांतरण के बाद में रिस्पॉन्सिव बन जाने की उम्मीद न करें — अगर डेस्टिनेशन को मोबाइल पर काम करना है तो Responsive मोड से शुरुआत करें।
- साइज़िंग व्यवहार के लिए Figma कंस्ट्रेंट्स पर निर्भर रहने से बचें — इन्हें रीक्रिएट नहीं किया जाता; इसके बजाय Auto Layout से वह व्यवहार दोबारा बनाएं।
- ईमेल आउटपुट के लिए, रोटेशन, ब्लेंड मोड्स, और शैडो या ब्लर इफेक्ट्स से बचें — ये ईमेल-क्लाइंट रेंडरिंग में सही से नहीं दिखेंगे।
- एक्सपोर्ट करने से पहले हमेशा Preview में Desktop, Tablet, और Mobile चेक करें, और क्या ठीक करना है इस पर एक खास, वेटेड जानकारी के लिए AI Quality Score (पेड प्लान्स) चलाएं।
- एक्सपोर्ट करने के बाद अपना खुद का SEO मेटाडेटा जोड़ने की योजना बनाएं — MarkupGen टाइटल टैग्स, मेटा डिस्क्रिप्शन, या स्ट्रक्चर्ड डेटा जनरेट नहीं करता।
अक्सर पूछे जाने वाले सवाल
वेरिफाई किए गए प्रोडक्ट व्यवहार पर आधारित।
सीमाएं
MarkupGen किसमें अच्छा है, और अभी क्या नहीं करता।
MarkupGen अच्छे से क्या करता है
किसी अच्छी तरह से बने, Auto-Layout-आधारित Figma फ्रेम को तेज़ी से और पूर्वानुमानित तरीके से साफ़, सिमैंटिक-टैग्ड HTML/CSS में बदलता है, साथ में इंटरैक्टिविटी, रिस्पॉन्सिवनेस, क्वालिटी स्कोरिंग, और वन-क्लिक फिक्स के लिए वैकल्पिक AI लेयर्स।
यह क्या नहीं करता
Figma प्रोटोटाइप या इंटरैक्शन डेटा को अपने आप रीक्रिएट करना; Figma कंस्ट्रेंट-आधारित रीसाइज़िंग (pin, scale) का पालन करना; एक ही एक्शन में कई फ्रेम्स या पूरा पेज इम्पोर्ट करना; जनरेट किए गए कोड में SEO मेटाडेटा जोड़ना; या हर Figma कॉम्पोनेंट के लिए एक शेयर्ड, फिर से इस्तेमाल होने वाली कॉम्पोनेंट डेफिनिशन एक्सपोर्ट करना।
जहां आउटपुट को मैन्युअल एडिटिंग की ज़रूरत पड़ सकती है
जेनेरिक या बिना नाम वाले Figma लेयर्स जो जेनेरिक markup बनाते हैं; Email Template मोड में जटिल विज़ुअल इफेक्ट्स; ऐसी इंटरैक्टिविटी जो AI JS-सुझाव फीचर के पहचाने गए पैटर्न से आगे जाती है।
तकनीकी सीमाएं
सटीक आंकड़ों के लिए Credits, Usage & Limits देखें — प्रति एक्सपोर्ट लगभग 2,000 लेयर्स, 120 मेगापिक्सेल, और 50 MB, 3-मिनट का अपलोड टाइमआउट, और कस्टम AI इंस्ट्रक्शन्स पर 3,000-अक्षर की कैप।
शब्दावली
इस गाइड में इस्तेमाल की गई शब्दावली।
- Frame
- Figma में एक टॉप-लेवल कंटेनर — लगभग एक स्क्रीन या सेक्शन के बराबर। MarkupGen एक बार में एक फ्रेम, कॉम्पोनेंट, या ग्रुप एक्सपोर्ट करता है।
- Auto Layout
- Figma का बिल्ट-इन रिस्पॉन्सिव-स्टैकिंग फीचर; MarkupGen इसे सीधे CSS Flexbox में मैप करता है।
- Constraints
- Auto Layout आने से पहले के Figma के pin और scale रीसाइज़िंग नियम; अभी MarkupGen इन्हें नहीं पढ़ता।
- Conversion / Generation
- किसी प्रोजेक्ट पर एक "Generate Code" रन — वह यूनिट जिसमें आपके प्लान का कोटा मापा जाता है।
- Project
- आपके डैशबोर्ड में ट्रैक किया गया एक सिंगल Figma एक्सपोर्ट, जो एक Workspace के अंदर आपके स्वामित्व में है।
- Workspace
- एक शेयर्ड टीम स्पेस जिससे प्रोजेक्ट्स जुड़े होते हैं; मेंबरशिप के साथ एक रोल आता है जो परमिशन्स को नियंत्रित करता है।
- Template
- आपके किसी भी प्रोजेक्ट को आपके वर्कस्पेस की Templates गैलरी में फिर से इस्तेमाल के लिए मार्क किया गया।
- Export
- जनरेट किए गए कोड को सिंपल HTML/CSS, एक फ्रेमवर्क कॉम्पोनेंट, या एक पूरे मल्टी-फ्रेमवर्क बंडल के रूप में डाउनलोड करना।
- Subscription
- आपका रिकरिंग मासिक पेड प्लान — Starter, Pro, या Business।
- Quota Locked
- एक ऐसा प्रोजेक्ट जो आपके प्लान की क्रिएशन लिमिट पहले ही पूरी होने के बाद बनाया गया — सेव है, लेकिन तब तक कोड जनरेट नहीं कर सकता जब तक आप अपग्रेड न करें या पीरियड रीसेट न हो।
क्विक स्टार्ट चीट शीट
Figma से प्रोडक्शन-रेडी कोड तक।
- 1Figma Community से MarkupGen plugin इंस्टॉल करें।
- 2Figma में एक साफ़, अच्छे नाम वाला, Auto-Layout फ्रेम चुनें।
- 3plugin से Export & Send करें (ब्राउज़र के ज़रिए एक बार लॉग इन करें)।
- 4अपने डैशबोर्ड पर नया प्रोजेक्ट खोलें।
- 5अपना आउटपुट मोड और CSS फ्रेमवर्क चुनें, फिर Generate Code पर क्लिक करें।
- 6Preview में नतीजा रिव्यू करें और AI Quality Score चेक करें (पेड प्लान्स)।
- 7Code Editor में मैन्युअली फिक्स करें, या Visual Editor और Smart 1-Click Fix के लिए अपग्रेड करें।
- 8HTML/CSS के रूप में, या पेड प्लान पर फ्रेमवर्क कॉम्पोनेंट के रूप में एक्सपोर्ट करें, फिर इसे अपने प्रोजेक्ट में इंटीग्रेट करें।
अपने डिज़ाइन-टू-कोड वर्कफ़्लो को तेज़ करने के लिए तैयार हैं?
आज ही फ़्री में शुरू करें, या Visual Editor, AI क्वालिटी स्कोरिंग, और पूरे फ्रेमवर्क एक्सपोर्ट के लिए अपग्रेड करें।