Localhost to Figma: Chrome extension से कोई भी पेज capture करें

URL import तब काम करता है जब पेज public हो। लेकिन Figma में आपको जिन screens की असल में ज़रूरत होती है, उनमें से बहुत-सी public नहीं होतीं: localhost:3000 पर चल रही feature branch, login के पीछे का admin dashboard, office network पर staging server, या cart में पहले से items वाला checkout।

इनके लिए HTML to Frames के पास एक free Chrome extension है। यह पेज को आपके अपने browser से, ठीक वैसा ही जैसा आप देखते हैं, capture करता है और Figma plugin को सौंपता है, जो उसे Auto Layout के साथ एडिटेबल frames, text, vectors और images में बदल देता है। यह guide बताती है कि localhost to Figma कैसे करें, logged-in पेज और ख़ास states कैसे capture करें, और कुछ गड़बड़ हो तो क्या करें।

URL के बजाय Chrome extension कब इस्तेमाल करें

Plugin का Link source पेजों को HTML to Frames capture service के एक isolated browser में render करता है। वह browser वही देखता है जो public internet पर एक anonymous visitor देखता है। वह आपकी machine, आपके private network या आपके logged-in session तक नहीं पहुंच सकता।

Extension तब इस्तेमाल करें जब पेज:

• Local रूप से चल रहा हो, जैसे localhost, 127.0.0.1 या आपके network पर कोई dev server।
• Login के पीछे हो, जैसे SaaS dashboards, admin panels, account settings या client portals।
• Private network पर हो, जैसे VPN पर staging environments या intranet tools।
• किसी ख़ास state में हो, जैसे खुला dropdown, भरा हुआ form, modal, products वाला cart, या submit के बाद error message।

Public पेजों के लिए, URL to Figma import अब भी सबसे आसान रास्ता है, और यह एक click में responsive sets support करता है।

Extension क्या है (और क्या नहीं)

Extension आपके browser में चलता है। इसके लिए कोई account नहीं चाहिए, इसमें कोई analytics नहीं है और यह कोई remote code load नहीं करता। जब तक आप Send to Figma न चुनें, यह HTML to Frames को कुछ नहीं भेजता। तब भी, capture सिर्फ़ तब तक memory में रखा जाता है जब तक आपका plugin उसे न ले ले, अधिकतम 30 मिनट तक।

एक capture आपके plan पर एक import गिना जाता है। Extension स्वयं free है। और पढ़ें Chrome extension पेज पर।

Step by step: localhost to Figma

1. HTML to Frames Chrome extension इंस्टॉल करें और उसे toolbar पर pin करें।
2. अपना dev server शुरू करें और पेज Chrome में खोलें, उदाहरण के लिए http://localhost:3000/settings।
3. Window की width अपनी चाही screen पर set करें (इस पर और नीचे)।
4. पेज को अपनी चाही state में लाएं: logged in, data loaded, menu खुला।
5. Extension icon पर click करें और पूरा पेज capture करना या element चुनना select करें।
6. Capture को Figma तक पहुंचाएं, clipboard या .h2f file से, या Send to Figma से।
7. Figma में, plugin layers बनाता है और frames, layers, Auto Layout share और कोई भी warnings वाली result screen दिखाता है।

पूरा पेज बनाम एक element

Extension दो capture modes देता है।

पूरा पेज capture करें

यह उन screens के लिए default है जिन्हें आप पूरी तरह review या redesign करना चाहते हैं: dashboard, settings पेज, development में चल रहा landing पेज। आपको पेज का एक frame मिलता है, जिसमें DOM को दर्शाने वाले nested frames होते हैं।

एक element चुनें

अक्सर आपको सिर्फ़ एक component चाहिए: pricing card, navigation bar, data table, modal। Element selection चुनें और:

• पेज पर hover करें; cursor के नीचे का element highlight होता है।
• Parent element पर जाने के लिए ↑, child पर जाने के लिए ↓ दबाएं।
• Highlight हुए element को capture करने के लिए Enter दबाएं।
• रद्द करने के लिए Esc दबाएं।

Live product से component reference बनाने, या बाकी पेज के बिना एक widget को review के लिए designer को भेजने का यह सबसे तेज़ तरीका है।

पहुंचाने के दो तरीके: clipboard/.h2f या Send to Figma

Clipboard और .h2f

Capture आपके clipboard पर copy होता है, या .h2f file के रूप में save होता है। Figma में plugin खोलें, Browser tab पर जाएं और paste करें। .h2f file तब काम आती है जब पेज कोई और capture करता है (मान लें, client dashboard का access रखने वाला कोई PM) और designer उसे बाद में import करता है।

Send to Figma

अगर आप अक्सर capture करते हैं, तो extension को one-time code से अपने plugin से एक बार connect करें। इसके बाद, captures बिना paste step के सीधे खुले plugin में जाते हैं। काम करते समय Figma में plugin खुला रखें।

एक capture = मौजूदा window width पर एक screen

Extension वही capture करता है जो आपका browser render करता है, इसलिए एक capture मौजूदा window width पर एक screen है। अगर आपकी window 1440 px चौड़ी है, तो आपको 1440 का desktop frame मिलता है।

दूसरे breakpoints capture करने के लिए, window resize करें और फिर से capture करें:

• Tablet: लगभग 768 px चौड़ाई पर resize करके capture करें।
• Mobile: लगभग 390 px चौड़ाई पर resize करके capture करें।

सटीक widths set करने के लिए Chrome DevTools का device toolbar सुविधाजनक तरीका है। हर capture एक import गिना जाता है। अगर पेज public है, तो plugin का Link source इसके बजाय एक ही import में पूरा responsive set (Desktop + Tablet + Mobile) बना सकता है।

वे states capture करना जिन्हें URL नहीं दोहरा सकता

Extension पेज की मौजूदा state capture करता है, जिससे वे screens मिलती हैं जिन्हें दोबारा बनाना वरना थकाऊ होता:

• खुले menus और dropdowns. Menu खोलें, फिर पेज capture करें या menu element चुनें।
• भरे हुए forms और validation errors. Fields भरें, errors लाने के लिए submit करें, फिर capture करें।
• Carts और checkouts. Products जोड़ें और असली line items वाला cart capture करें।
• Empty, loading और populated states. State inventory के लिए एक ही dashboard को data के साथ और बिना capture करें।
• Modals और toasts. उन्हें trigger करें और screen पर रहते हुए capture करें।

Product teams के लिए, redesign या usability review से पहले किसी flow की हर state को Figma में document करने का यह सबसे तेज़ तरीका है।

क्या-क्या आता है

Extension हर दूसरे source वाले conversion engine को ही data देता है, इसलिए आपको features पेज पर बताए सभी features मिलते हैं: layout, mixed-style text, gradients, images, एडिटेबल vectors के रूप में SVG, borders, shadows, blur, ::before/::after, form fields, shadow DOM और z-index order।

Auto Layout browser की मापी गई geometry से निकाला जाता है और verify किया जाता है: हर child की position 2 px के भीतर जांची जाती है, और अगर वह नहीं टिकती, तो आसान plan आज़माया जाता है या frame समझदार constraints के साथ absolute positions रखता है। हमारे tests में, site के हिसाब से लगभग 86 से 97 प्रतिशत frames पर Auto Layout निकाला गया। अगर आप front end ख़ुद लिखते हैं, तो यह mapping guide दिखाती है कि साफ़ import होने वाली CSS कैसे लिखें।

जो embedded content layers नहीं बन सकता, जैसे maps वाले iframes, बिना poster के videos या WebGL canvases, वह उस box की screenshot image के रूप में आता है।

Capture से पहले की छोटी checklist

काम दोहराने से बचने के लिए हर capture session से पहले यह list देख लें:

• Width: क्या window आपके चाहे breakpoint पर है, और browser zoom 100% पर?
• Data: क्या पेज पूरी तरह load हो चुका है, charts, images और lazy sections सहित?
• State: क्या menus, modals या form errors ठीक वैसे दिख रहे हैं जैसे आप Figma में चाहते हैं?
• Content: जहां वरना असली customer data दिखता, क्या आपने test account या seed data पर switch कर लिया है?
• Scope: क्या आपको पूरा पेज चाहिए, या review के लिए एक element ज़्यादा साफ़ रहेगा?
• Delivery: अगर आप Send to Figma इस्तेमाल कर रहे हैं, तो क्या Figma में plugin खुला है?

यहां दो मिनट लगाने से वही screen बार-बार capture करने के कई rounds बच जाते हैं।

Logged-in और internal पेजों के लिए privacy

Dashboard capture करने का मतलब है उस पर जो भी है उसे capture करना। कुछ व्यावहारिक नियम:

• Capture आपके browser में होता है। जब तक आप Figma में paste न करें या Send to Figma इस्तेमाल न करें, कुछ भी बाहर नहीं जाता।
• Send to Figma अस्थायी है। Capture memory में तब तक इंतज़ार करता है जब तक आपका plugin उसे न ले ले, अधिकतम 30 मिनट, और disk पर नहीं लिखा जाता।
• पहले संवेदनशील data छिपाएं। जब हो सके test accounts या seed data इस्तेमाल करें, क्योंकि screen पर जो है वह आपकी Figma file में text layers बन जाता है।
• आपकी Figma file पढ़ी नहीं जाती। Plugin सिर्फ़ layers लिखता है और अपने frames का metadata पढ़ता है।

पूरी policy के लिए security पेज देखें।

Troubleshooting

Capture में देर से load होने वाला content नहीं है

Capture करने से पहले पेज के पूरी तरह load होने का इंतज़ार करें, lazy sections और charts सहित। अगर content scroll पर load होता है, तो पेज को एक बार scroll करें।

Layout मेरे देखे से अलग दिखता है

Window की width जांचें; capture मौजूदा width को ठीक-ठीक दर्शाता है। यह भी पक्का करें कि कोई browser zoom लागू न हो।

Send to Figma कुछ नहीं करता

पक्का करें कि Figma में plugin खुला है। अगर आपने काफ़ी पहले pair किया था या machine बदली है, तो नए one-time code से फिर से pair करें। Captures 30 मिनट तक इंतज़ार करते हैं, इसलिए उस समय के भीतर plugin खोलने पर भी वे deliver हो जाते हैं।

Browser tab में paste काम नहीं करता

हो सकता है आपका clipboard किसी और copy से overwrite हो गया हो। फिर से capture करें, या .h2f file के रूप में save करके उसे load करें।

Fonts गलत दिखते हैं

Local या licensed web fonts शायद आपकी machine पर installed नहीं हैं। Plugin की Missing fonts screen build करने से पहले replacements सुझाती है और हर site के लिए आपकी पसंद याद रखती है।

कुछ frames Auto Layout नहीं हैं

Results screen बताती है कि कोई frame absolute क्यों रहा। अक्सर इसकी वजह overlapping content या negative margins होती है। Frame फिर भी पेज से मेल खाता है; बस वह constraints के साथ absolute positions रखता है।

Developer workflow में localhost to Figma

Front-end developers के लिए, extension design handoff को दोनों तरफ़ चलने वाला रास्ता बना देता है:

1. Feature को local रूप से बनाएं।
2. नई screens को desktop और mobile widths पर capture करें।
3. उन्हें मूल डिज़ाइन के बगल में Figma में भेजें।
4. Designers असली implementation की review करते हैं, comment करते हैं, और adjust करते हैं।
5. आप ठीक करते हैं, फिर से capture करते हैं और तुलना करते हैं।

अगर आप AI tools से बनाते हैं, तो एक सीधा रास्ता भी है: Claude Code, Claude Desktop या Cursor MCP के ज़रिए plugin को HTML भेज सकते हैं। MCP के ज़रिए AI to Figma देखें।

शुरुआत करें

Chrome extension इंस्टॉल करें, अपना local build खोलें, और यह देखने के लिए कि वह कैसे आता है, पहले एक element capture करें, कोई card या button। फिर पूरा पेज desktop और mobile widths पर capture करें। Docs pairing और Browser tab को विस्तार से कवर करते हैं, और pricing बताता है कि captures आपके imports में कैसे गिने जाते हैं।