Figma डिज़ाइन को साफ़-सुथरे HTML और CSS में कैसे बदलें (स्टेप-बाय-स्टेप गाइड)

किसी डेवलपर को Figma फ़ाइल सौंपने का आमतौर पर मतलब होता है कि किसी को बैठकर हर फ़्रेम को HTML और CSS में मैन्युअली दोबारा बनाना पड़े: स्पेसिंग नापना, ब्रेकपॉइंट्स का अंदाज़ा लगाना, और यह उम्मीद करना कि दर्जनों छोटे-छोटे फ़ैसलों के बाद भी फ़ाइनल पेज डिज़ाइन से मेल खाए। यह गाइड एक तेज़ रास्ता दिखाती है — एक तैयार Figma डिज़ाइन से सीधे साफ़, सिमैंटिक मार्कअप तक पहुँचना।

मैन्युअल Figma-to-HTML हैंड-ऑफ़ धीमा क्यों होता है

हैंड-ऑफ़ पर लगने वाला ज़्यादातर समय क्रिएटिव काम नहीं, बल्कि ट्रांसलेशन का काम होता है:

• Auto Layout सेटिंग्स पढ़कर उन्हें हाथ से Flexbox रूल्स में फिर से लागू करना।
• पैडिंग, गैप और फ़ॉन्ट साइज़ को दोबारा नापना, जबकि ये सब पहले से ही Figma फ़ाइल में तय होते हैं।
• यह तय करना कि रेस्पॉन्सिव ब्रेकपॉइंट्स कहाँ रखे जाएँ, क्योंकि Figma फ़्रेम्स आमतौर पर एक ही फ़िक्स्ड चौड़ाई के होते हैं।
• मार्कअप को साफ़ करना ताकि वह दस लेवल तक नेस्टेड, बिना किसी सिमैंटिक मतलब वाले <div> टैग्स का ढेर न बने।

इनमें से कोई भी काम मुश्किल नहीं है, लेकिन ये सब बार-बार दोहराए जाने वाले हैं, और यही रिपिटिटिव मैन्युअल काम है जहाँ गलतियाँ और असंगतियाँ चुपके से घुस जाती हैं।

स्टेप 1: Figma से फ़्रेम एक्सपोर्ट करें

स्टैटिक इमेज एक्सपोर्ट करने या एक-एक लेयर की स्टाइल कॉपी करने के बजाय, जिस फ़्रेम को कन्वर्ट करना है उसे सिलेक्ट करें और उसे अपने वर्कस्पेस में भेजने के लिए MarkupGen के Figma प्लगइन का इस्तेमाल करें। यह प्लगइन फ़्रेम की स्ट्रक्चर, स्टाइल्स और इमेजेज़ को एक साथ कैप्चर करता है, इसलिए कुछ भी शुरू से दोबारा बनाने की ज़रूरत नहीं पड़ती।

स्टेप 2: स्ट्रक्चर को खुद-ब-खुद कोड में मैप होने दें

यहीं पर ज़्यादातर मैन्युअल काम गायब हो जाता है। कुछ उदाहरण जो अपने-आप ट्रांसलेट हो जाते हैं:

• Auto Layout → Flexbox। Figma की Auto Layout प्रॉपर्टीज़ (डायरेक्शन, गैप, पैडिंग, अलाइनमेंट) हाथ से अंदाज़ा लगाने के बजाय सीधे एक बराबर CSS Flexbox स्ट्रक्चर में मैप हो जाती हैं।
• कॉन्स्ट्रेंट्स → रेस्पॉन्सिव ब्रेकपॉइंट्स। लेआउट के रीसाइज़िंग कॉन्स्ट्रेंट्स से एक ही फ़िक्स्ड-चौड़ाई वाले पेज की बजाय फ़्लूइड, रेस्पॉन्सिव रूल्स बनते हैं।
• लेयर्स → सिमैंटिक HTML। आउटपुट गहराई से नेस्टेड, बिना लेबल वाले <div> सूप के बजाय मतलब वाले एलिमेंट्स को प्राथमिकता देता है: एक पेज ब्लॉक <section> बन जाता है, एक नेव बार <nav> बन जाता है, एक हेडिंग सही क्रम में <h1>–<h3> बन जाती है, एक पैराग्राफ़ <p> बन जाता है, एक बटन उसके बिहेवियर के हिसाब से <button> या <a> बन जाता है, और एक इमेज alt के साथ <img> बन जाती है। कोई ऐसा जेनेरिक लेआउट कंटेनर जिसका अपना कोई मतलब न हो, वह अब भी <div> ही रहता है — हर Figma लेयर के लिए कोई पहले से तैयार सिमैंटिक टैग नहीं होता, इसलिए सही टैग चुनना इस पर निर्भर करता है कि कंटेंट का असल मतलब क्या है, न कि किसी फ़िक्स्ड लुकअप टेबल पर।

स्टेप 3: अपना आउटपुट फ़ॉर्मेट चुनें

हर प्रोजेक्ट को एक जैसा कोड नहीं चाहिए होता। आप जिस स्टैक पर शिप कर रहे हैं उसके हिसाब से, आप इस रूप में एक्सपोर्ट कर सकते हैं:

• वैनिला HTML/CSS — स्टैटिक साइट्स या बिना बिल्ड-स्टेप वाले प्रोजेक्ट्स के लिए।
• Tailwind CSS — डिज़ाइन के असली स्पेसिंग, कलर और टाइपोग्राफ़ी टोकन्स से जनरेट हुई यूटिलिटी क्लासेज़; ज़्यादा जानकारी के लिए देखें Figma से Tailwind CSS: एक व्यावहारिक कन्वर्जन गाइड।
• React — ऐसे कॉम्पोनेंट्स जिन्हें आप सीधे किसी मौजूदा ऐप में डाल सकते हैं; ज़्यादा जानकारी के लिए देखें Figma से React: डेवलपर्स के लिए एक प्रैक्टिकल वर्कफ़्लो।

स्टेप 4: एक्सपोर्ट करने से पहले फ़ाइन-ट्यून करें

ऑटोमेटेड कन्वर्ज़न आपको ज़्यादातर रास्ता तय करा देता है, लेकिन डिज़ाइन-टू-कोड शायद ही कभी 100% मैकेनिकल होता है — कॉपी में थोड़ा बदलाव चाहिए हो सकता है, या किसी सेक्शन को मैन्युअल लेआउट एडजस्टमेंट की ज़रूरत पड़ सकती है। एडिटर आपको फ़ाइनल पैकेज जनरेट करने से पहले कॉन्टेंट, फ़ॉन्ट्स और लेआउट को विज़ुअली फ़ाइन-ट्यून करने देता है, और हर एक्सपोर्ट का ऑटोमैटिकली स्कोर तय होता है ताकि आप एक नज़र में देख सकें कि आउटपुट प्रोडक्शन-रेडी है या नहीं।

रेस्पॉन्सिव हैंडल करना: यह सिर्फ़ डेस्कटॉप पिक्सेल वैल्यूज़ कॉपी करना नहीं है

एक Figma फ़्रेम आमतौर पर एक ख़ास चौड़ाई दिखाता है — जैसे 1440px का डेस्कटॉप फ़्रेम, शायद साथ में एक अलग मोबाइल फ़्रेम भी हो। इसका मतलब यह नहीं कि उस चौड़ाई को CSS में हार्डकोड कर दिया जाए और transform: scale() से पूरे पेज को सिकोड़ दिया जाए। Figma अपने-आप रेस्पॉन्सिव CSS जनरेट नहीं करता — यह सिर्फ़ संकेत देता है, और उन्हें असली रेस्पॉन्सिव बिहेवियर में बदलना अभी भी डेवलपर या कन्वर्ज़न सिस्टम का काम है:

• Auto Layout की hug / fill / fixed साइज़िंग बताती है कि किसी एलिमेंट को अपने कंटेंट के हिसाब से सिकुड़ना चाहिए या अपने कंटेनर को भरना चाहिए — यही width: auto, width: 100% / flex: 1, या एक फ़िक्स्ड max-width चुनने का आधार है।
• कॉन्स्ट्रेंट्स (pin left/right, scale with container...) उन एलिमेंट्स के लिए बिहेवियर जोड़ते हैं जिन्हें Auto Layout मैनेज नहीं करता।
• मीडिया क्वेरीज़ अब भी ज़रूरी हैं हर उस चौड़ाई पर जहाँ लेआउट का शेप असल में बदलता है — कॉलम्स का एक ही कॉलम में स्टैक हो जाना, नेविगेशन का कोलैप्स हो जाना — क्योंकि एक Figma फ़्रेम सिर्फ़ कुछ गिनी-चुनी फ़िक्स्ड व्यूपोर्ट साइज़ेज़ को कैप्चर करता है, उनके बीच की पूरी रेंज को नहीं।

मक़सद यह है कि डिज़ाइन का तय किया हुआ रेस्पॉन्सिव बिहेवियर सभी स्क्रीन साइज़ेज़ पर दोबारा तैयार हो, न कि जो भी फ़्रेम खुला हो उसके ठीक-ठीक पिक्सेल वैल्यूज़ कॉपी कर दिए जाएँ।

यहाँ "साफ़-सुथरा" कोड का असल मतलब क्या है

"साफ़-सुथरा कोड" सिर्फ़ एक मार्केटिंग शब्द नहीं है — ये कुछ खास, जांची जा सकने वाली ख़ूबियाँ हैं:

1. किसी एक एलिमेंट के चारों ओर बेवजह <div> रैपर न होना।
2. सब कुछ हेडिंग जैसा दिखने के लिए स्टाइल करने के बजाय, सही हेडिंग हायरार्की (h1 → h2 → h3)।
3. जहाँ ज़रूरत हो वहाँ सिमैंटिक टैग्स का इस्तेमाल — जो इत्तेफ़ाक़ से वही होता है जिसकी सर्च इंजन और स्क्रीन रीडर्स को पेज समझने के लिए ज़रूरत होती है।

वो आख़िरी पॉइंट दिखने से कहीं ज़्यादा मायने रखता है — जो मार्कअप ब्राउज़र और क्रॉलर के लिए पार्स करना आसान होता है, वही मार्कअप अगले डेवलपर के लिए पढ़ना भी आसान होता है। स्ट्रक्चरल रूप से एक्सेसिबिलिटी भी ज़्यादातर इसी पर निर्भर करती है; सिमैंटिक टैग्स से आगे अभी भी किन चीज़ों को मैन्युअली चेक करना ज़रूरी है — ARIA, फॉर्म्स, कंट्रास्ट, कीबोर्ड नेविगेशन — यह जानने के लिए देखें Figma से एक्सेसिबल HTML तक: एक प्रैक्टिकल गाइड।

एक छोटा उदाहरण: Auto Layout से असली मार्कअप तक

एक साधारण कार्ड लीजिए — एक आइकन, एक टाइटल और एक "Learn more" लिंक, जो Auto Layout (vertical, 16px gap, 24px padding) के साथ लेआउट किया गया है। हाथ से दोबारा बनाने पर, बिना लेबल वाले <div> के ढेर तक पहुँच जाना आसान है। फ़्रेम की असली स्ट्रक्चर से कन्वर्ट करने पर, वही कार्ड इस तरह आता है:

<article class="feature-card">
  <img src="/icons/rocket.svg" alt="" class="feature-card__icon" />
  <h3 class="feature-card__title">Fast setup</h3>
  <a href="/docs/getting-started" class="feature-card__link">Learn more</a>
</article>

.feature-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
}

कुछ बातें ध्यान देने लायक हैं: कार्ड एक जेनेरिक रैपर नहीं, बल्कि एक <article> है, क्योंकि यह कंटेंट का एक सेल्फ़-कंटेन्ड टुकड़ा है। आइकन को alt="" मिलता है क्योंकि यह डेकोरेटिव है — हेडिंग टेक्स्ट पहले से बता देता है कि कार्ड किस बारे में है। "Learn more" एक असली <a href> है, क्लिक हैंडलर वाला <div> नहीं, क्योंकि यह किसी दूसरे पेज पर नेविगेट करता है। Auto Layout की vertical डायरेक्शन और 16px गैप सीधे flex-direction: column और gap: 16px में मैप होते हैं — कोई अंदाज़ा लगाने की ज़रूरत नहीं। यह सबसे कॉमन मैपिंग है, लेकिन सही तरीक़े से समझने के लिए और भी बहुत कुछ है (पैडिंग, अलाइनमेंट, hug/fill साइज़िंग, नेस्टेड Auto Layout); पूरी मैपिंग के लिए देखें Figma Auto Layout से CSS: यह Flexbox से कैसे मैप होता है (और कब Grid चुनें)।

Figma को HTML में बदलते समय होने वाली आम गलतियाँ

Figma डिज़ाइन को हाथ से कोड में बदलते समय कुछ गलतियाँ बार-बार सामने आती हैं:

• हर लेयर को <div> बना देना। कंटेंट असल में क्या है (नेविगेशन, एक हेडिंग, एक बटन...) इसे नज़रअंदाज़ करने से मार्कअप को समझना स्क्रीन रीडर्स और सर्च इंजन दोनों के लिए मुश्किल हो जाता है।
• position: absolute का ज़्यादा इस्तेमाल करना। यह Figma कैनवस की ठीक-ठीक पिक्सेल पोज़िशन तो दोबारा बना देता है, लेकिन कंटेंट या स्क्रीन साइज़ बदलते ही टूट जाता है।
• Auto Layout को नज़रअंदाज़ करके हाथ से स्पेसिंग का अंदाज़ा लगाना। डिज़ाइन फ़ाइल में पहले से तय प्रॉपर्टीज़ से सीधे ट्रांसलेट करने के मुक़ाबले यह कहीं ज़्यादा ग़लती-प्रवण और मेंटेन करना मुश्किल है।
• डेस्कटॉप डाइमेंशन्स को हार्डकोड करना और रेस्पॉन्सिव को शुरू से फ़्लेक्सिबल लेआउट बनाने के बजाय बाद की सोच बना देना।
• गड़बड़ हेडिंग हायरार्की — सही h1 → h2 → h3 क्रम के बजाय फ़ॉन्ट साइज़ को सिर्फ़ दिखने के हिसाब से चुनना।
• बेवजह रैपर <div>s ऐसे एलिमेंट के इर्द-गिर्द जो पहले से ही अपने-आप में मतलब रखता है, या "विज़ुअली एक जैसा दिखना" और "सिमैंटिकली एक ही मतलब रखना" को आपस में मिला देना।

असली वर्कफ़्लो में यह कहाँ फ़िट बैठता है

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

FAQ

Figma को HTML में कैसे बदलें? जिस फ़्रेम को कन्वर्ट करना है उसे सिलेक्ट करें, उसकी लेयर स्ट्रक्चर और Auto Layout सेटिंग्स पढ़ें, फिर उन्हें सिमैंटिक HTML और मैचिंग CSS में ट्रांसलेट करें — Auto Layout, Flexbox बन जाता है, कॉन्स्ट्रेंट्स रेस्पॉन्सिव बिहेवियर बन जाते हैं। यह आप हाथ से भी कर सकते हैं, या MarkupGen जैसे ऑटोमेशन टूल का इस्तेमाल करके बार-बार दोहराए जाने वाले ट्रांसलेशन काम को हटा सकते हैं।

क्या Figma को रेस्पॉन्सिव HTML और CSS में बदला जा सकता है? हाँ, लेकिन पूरी तरह ऑटोमैटिक नहीं। Auto Layout और कॉन्स्ट्रेंट्स रीसाइज़िंग बिहेवियर (shrink, fill, fixed) के बारे में संकेत देते हैं, लेकिन ख़ास ब्रेकपॉइंट्स तय करना और सभी स्क्रीन साइज़ेज़ पर लेआउट चेक करना अभी भी किसी व्यक्ति या कन्वर्ज़न सिस्टम की समझ की माँग करता है।

Figma का Auto Layout CSS में किसमें मैप होता है? ज़्यादातर CSS Flexbox में: डायरेक्शन flex-direction में, गैप gap में, पैडिंग padding में, और अलाइनमेंट justify-content/align-items में मैप होता है। ज़्यादा डिटेल्ड मैपिंग के लिए, और Flexbox की जगह कब CSS Grid चुनें यह जानने के लिए, देखें Figma Auto Layout से CSS: यह Flexbox से कैसे मैप होता है (और कब Grid चुनें)।

क्या Figma को HTML में बदलते समय सिमैंटिक HTML का इस्तेमाल करना चाहिए? हाँ। सिमैंटिक HTML (nav, article, button, एक सही हेडिंग हायरार्की...) स्क्रीन रीडर्स और सर्च इंजन को पेज का स्ट्रक्चर सही तरीक़े से समझने में मदद करता है — यह सिर्फ़ कोड की दिखावट का मामला नहीं है।

क्या Figma को HTML में बदलने का काम ऑटोमेट किया जा सकता है? इसका ज़्यादातर हिस्सा किया जा सकता है — लेयर स्ट्रक्चर पढ़ना, Auto Layout को Flexbox में मैप करना, कॉन्स्ट्रेंट्स से ब्रेकपॉइंट्स जनरेट करना — लेकिन फ़ाइनल रिव्यू (कॉन्टेंट, एज केसेज़, किसी कोडबेस में इंटीग्रेट करना) के लिए अभी भी इंसान की नज़र चाहिए।

सीधे अपनी डिज़ाइन को बदलना शुरू करना चाहते हैं? MarkupGen से अपनी Figma डिज़ाइन को HTML/CSS में बदलें →