HTML to Design: Designers और agencies के लिए redesign workflow

Design आमतौर पर एक दिशा में बहता है: Figma का mockup, browser में HTML बन जाता है। लेकिन बहुत-सा असली काम उल्टी दिशा में चलता है। कोई client आपको live site सौंपकर redesign मांगता है। तीन साल की shipping में कोई product अपने मूल mockups से भटक चुका है। किसी developer ने feature सीधे code में बना दिया, और अब design team को उसकी ज़िम्मेदारी लेनी है।

वह उल्टी दिशा — HTML to design — का मतलब है browser में जो मौजूद है उसे लेकर वापस एडिटेबल design file में बदलना। अच्छे से किया जाए, तो यह हाथ से दोबारा बनाने के कई दिन बचाता है और आपको screenshots के mood board से बेहतर चीज़ देता है: असली frames, text, styles और components वाली working file।

यह लेख HTML to Frames के साथ, पहले audit से लेकर clickable prototype तक, designers और agencies के लिए एक व्यावहारिक workflow बताता है।

"HTML to design" का असल मतलब क्या है

यह शब्द किसी भी ऐसी प्रक्रिया को कवर करता है जो live code या website को ऐसी design file में बदलती है जिसे आप edit कर सकें। इसके तीन मोटे तरीके हैं:

1. हाथ से rebuild — site खोलें, DevTools में मापें, हर frame हाथ से दोबारा बनाएं।
2. Screenshots — हर पेज की images capture करें और उन्हें reference के रूप में Figma में paste करें।
3. एडिटेबल layers — render हुए पेज को असली Figma frames, text, vectors और images में बदलें।

हर तरीके की अपनी जगह है, लेकिन लागत में और बाद में आप क्या कर सकते हैं, इसमें वे बहुत अलग हैं।

Reference के लिए screenshots ठीक हैं। किसी एक छोटे पेज के लिए जिसे आप शुरू से restructure करना चाहते हैं, हाथ से rebuild अब भी समझदारी है। इससे बड़ी किसी भी चीज़ के लिए, एडिटेबल layers वह शुरुआती बिंदु है जो scale करता है।

यह workflow किसके लिए है

• Redesigns, audits या inspiration teardowns करने वाले UI/UX और web designers।
• Design agencies जिन्हें redesign proposal तैयार करने के लिए client की site मिनटों में Figma में चाहिए। Team plan एक license key के तहत पांच seats share करता है।
• Production में भटक चुके colors, type और components को एकीकृत करने वाली design-system teams।
• Front-end developers जो localhost build को Figma file के रूप में designer को सौंपना चाहते हैं।
• Product managers और marketers जिन्हें planning के लिए logged-in dashboards या ख़ास states Figma में चाहिए।

Workflow, step by step

हम यह क्रम सुझाते हैं। आप steps छोड़ सकते हैं, लेकिन क्रम मायने रखता है: हर step पिछले पर टिका है।

Step 1: जो मौजूद है उसका audit करें

कुछ भी import करने से पहले तय करें कि कौन-से पेज मायने रखते हैं। ज़्यादातर sites के लिए यह एक छोटी list होती है:

• home पेज,
• एक-दो मुख्य landing या product पेज,
• pricing या checkout,
• blog post जैसा कोई content template,
• redesign के दायरे में आने वाली कोई भी logged-in screens।

यह भी लिखें कि आपको कौन-सी states चाहिए — खुला navigation menu, validation errors वाला form, भरा हुआ cart। उन तक सिर्फ़ URL से नहीं पहुंचा जा सकता; आप उन्हें Chrome extension से capture करेंगे।

Step 2: Responsive set import करें

अब पेज लाएं। Public पेजों के लिए:

1. HTML to Frames खोलें और Multiple चुनें।
2. 10 links तक paste करें। वे एक के बाद एक process होते हैं, और हर पेज canvas पर एक row बनता है।
3. Responsive set चुनें — एक click में Desktop, Tablet और Mobile (Pro और Team पर हर import में चार screens तक)।
4. Hide cookie banners & popups on करें ताकि overlays content को न ढकें।
5. अगर अगले step में design system निकालने की योजना है, तो Styles & variables (Pro) on करें।

Desktop screen Site width इस्तेमाल करती है: plugin अंदाज़ा लगाने के बजाय पेज की असली design width मापता है। Full-bleed sites centred content के साथ 1920 पर आती हैं, boxed sites अपनी box width पर, और fluid sites 1440 पर। एक site को सभी पेजों पर एक ही width मिलती है।

गिनती का नियम याद रखें: एक import = सभी screens वाला एक पेज। पांच पेजों का responsive set पांच imports है, पंद्रह नहीं।

पहले import के बाद, Import linked pages से आप उसी site के और पेज list से चुन सकते हैं। Logged-in पेजों या localhost के लिए Chrome extension और Send to Figma इस्तेमाल करें। जो पेज सिर्फ़ files के रूप में हैं, उनके लिए HTML file, पूरा site folder या .zip import करने को Local file इस्तेमाल करें। HTML to Figma guide हर source को विस्तार से कवर करती है।

Step 3: Design system निकालें

यहीं import site की तस्वीर से आगे बढ़कर एक काम करने लायक आधार बन जाता है। Styles & variables (Pro) on होने पर, plugin बनाता है:

• कम से कम दो बार इस्तेमाल हुए colors और site की CSS custom properties से color variables — --brand-primary, brand/primary बन जाता है — एक Colors · <domain> collection में (96 तक)।
• Text styles (48 तक)।
• Shadow styles (sm, md, lg, xl)।

दो details इसे असली projects के लिए व्यावहारिक बनाती हैं:

• Reuse. अगर आपकी file में मेल खाती values वाले variables या styles पहले से हैं, तो plugin उन्हें reuse करता है। एक ही site को दो बार import करने पर कुछ नया नहीं बनता।
• Snap to my file's styles (Pro)। अगर आपके पास पहले से design system है, तो exact match न होने पर import किए गए colors और text आपकी file की सबसे क़रीबी style से snap हो सकते हैं, perceptual OKLab color distance और मेल खाती font family, weight, और 10% के भीतर size के आधार पर।

अगर site dark mode support करती है, तो Light + Dark (Pro) चुनें। पेज दोनों color schemes में capture होता है, और आपको Light और Dark modes वाला एक variable collection मिलता है, साथ ही हर screen की एक dark copy। ध्यान दें कि Figma Free files में हर collection में एक mode की अनुमति है, इसलिए वहां dark mode एक note के साथ skip हो जाता है।

Output इस बात की ईमानदार inventory है कि site असल में क्या इस्तेमाल करती है — अक्सर पूरे audit की सबसे उपयोगी चीज़। एक collection में लगभग एक जैसे grays की लंबी कतार देखना, किसी भी slide से बेहतर तरीके से consolidation की ज़रूरत साबित करता है।

Step 4: दोहराव को components में बदलें

Components & hover states (Pro) के साथ, बार-बार आने वाली structures — cards, buttons, menu items — text और image overrides बनाए रखते हुए components और instances बन जाती हैं। जिन elements का hover look होता है, वे on-hover prototype interaction के साथ Default और Hover variants वाला component set बन जाते हैं। Main components एक Components · <site> frame में इकट्ठा होते हैं।

इससे आपको व्यवस्थित करने के लिए component inventory मिलती है। आम अगले कदम:

• लगभग-duplicate button components को variants वाले एक set में merge करें,
• Components के नाम अपनी naming convention के हिसाब से बदलें,
• जहां आपकी library के components पहले से मौजूद हैं, वहां instances को उनसे swap करें।

Step 5: असली structure पर iterate करें

अब डिज़ाइन करें। क्योंकि जहां plugin verify कर सका वहां layout Auto Layout वाले nested frames के रूप में आता है, बदलाव वैसे ही व्यवहार करते हैं जैसे आपकी अपनी बनाई file में:

• headlines edit करें और stack को reflow होते देखें,
• किसी एक section का gap या padding बदलें,
• एक color variable बदलें और हर इस्तेमाल update होते देखें,
• frame resize करें और Fill व Center को अपना काम करने दें।

असली sites पर हमारे tests में, लगभग 86–97% frames पर Auto Layout निकाला गया। जो frames absolute रहते हैं उन्हें समझदार constraints मिलते हैं, और results screen बताती है कि कोई frame absolute क्यों रहा। Auto Layout explainer details में जाता है।

एक उपयोगी आदत: मूल import को अपने अलग पेज पर "before" के रूप में रखें और redesign के लिए उसे duplicate करें। Live पेज से साथ-साथ तुलना के लिए hidden, locked image layer चाहिए, तो import के दौरान Reference screenshot (Pro) on करें।

Step 6: Prototype

Import किए गए पेज पहले से आंशिक रूप से जुड़े होते हैं:

• Links clickable रहते हैं (Open link)।
• Import किए गए पेजों के बीच के links, Navigate interactions बन जाते हैं, इसलिए multi-page import शुरू से ही एक clickable flow है।
• Fixed और sticky headers और horizontal scroll areas Present mode में काम करते हैं।
• Step 4 के hover variants on-hover interactions के साथ आते हैं।

यानी आप client presentation में "before" prototype को "after" prototype के बगल में रख सकते हैं, किसी को भी शुरू से जोड़े बिना।

Step 7: इसे sync में रखें

Sites बदलती रहती हैं। हर import किया गया frame अपना source URL save रखता है, इसलिए live पेज बदलने पर Re-import एक click का काम है। क्योंकि मौजूदा variables और styles reuse होते हैं, re-import आपकी file को duplicates से नहीं भरता।

व्यवहार में use cases

Agency redesign proposals

Redesign pitch करने वाली agency को client की मौजूदा site जल्दी Figma में चाहिए। मुख्य पेजों को responsive set के रूप में import करें, design system निकालें, और एक भी नया आइडिया दिखाने से पहले आपके पास एक तथ्यपरक "आज आपके पास यह है" section होता है — असली color और type inventory के साथ। Team plan पांच seats share करता है, इसलिए कई designers एक ही license से काम कर सकते हैं। Website to Figma और redesign guide देखें।

Design–code drift audits

Production पेज import करें और उसे मूल mockup के बगल में रखें। Spacing, colors और type के अंतर layer दर layer दिखते हैं, और generate किए variables बताते हैं कि palette से बाहर के कितने colors घुस आए।

Developer के बनाए features

किसी developer ने localhost पर feature का prototype बनाया। उसे Chrome extension से capture करें, Figma में भेजें, और designer उसे बाकी product वाली उसी file में निखारता है।

AI-generated पेज

अगर शुरुआत Claude या Cursor के HTML से है, तो assistant को MCP से connect करें और पेज आपके खुले plugin में आ जाता है। AI to Figma देखें।

सीखना और teardown

Students अच्छी बनी sites import करके — एक-एक layer — देख सकते हैं कि sections कैसे structure होते हैं, type कैसे scale होती है, और spacing कैसे दोहराई जाती है।

Client के काम के लिए privacy

Agencies अक्सर client sites import करती हैं, इसलिए यह मायने रखता है कि data का क्या होता है। पेज एक isolated, sandboxed browser में render होते हैं; नतीजा एक बार deliver होता है और फिर memory से delete हो जाता है, कभी disk पर नहीं लिखा जाता। Upload की गई local files import पूरा होते ही delete हो जाती हैं। Plugin आपकी Figma file का content नहीं पढ़ता। पूरी policy security पेज पर है।

शुरुआत करें

यह workflow आपके लिए सही है या नहीं, यह जानने का सबसे तेज़ तरीका है इसे किसी असली पेज पर आज़माना जिस पर आप काम कर रहे हैं। Free में हर महीने 10 imports शामिल हैं; Pro ऊपर बताए गए design-system और component features जोड़ता है। Pricing पर plans की तुलना करें, docs देखें, या alternatives पेज पर देखें कि दूसरे tools कैसे तुलना करते हैं।