Free Chrome extension
Chrome extension to Figma — logged-in पेजों और localhost के लिए
आपका अपना browser जो दिखाता है उसे capture करें, जिसमें dashboards, local builds और खुले menus शामिल हैं, और उसे एडिटेबल Figma layers में बदलें।
- Logins, localhost और private networks के साथ काम करता है
- पूरा पेज या एक element capture करें
- कोई account नहीं, कोई analytics नहीं, कोई remote code नहीं
जल्द ही Chrome Web Store पर
Chrome extension to Figma उन स्थितियों को हल करता है जहां URL import नहीं पहुंच सकता। HTML to Frames capture service पेजों पर एक anonymous visitor के रूप में जाती है, इसलिए वह आपका admin dashboard, आपके login के पीछे का app, आपके laptop पर चल रहा localhost build या private network पर staging server नहीं देख सकती। Free HTML to Frames Chrome extension इसके बजाय आपके अपने browser से capture करता है, उसी session का इस्तेमाल करके जिसमें आप पहले से signed in हैं।
यह पेज की मौजूदा state भी capture करता है। अगर कोई dropdown खुला है, कोई form आधा भरा है, कोई modal दिख रहा है या cart में तीन items हैं, तो Figma में वही पहुंचता है। Flows document करने वाले product managers और असली states का audit करने वाले designers के लिए, अक्सर यही इन screens को दोबारा बनाए बिना design file में लाने का एकमात्र व्यावहारिक तरीका है।
आप पूरा पेज capture कर सकते हैं, या एक component पकड़ने के लिए element picker पर switch कर सकते हैं। Highlight करने के लिए hover करें, parent या child element पर जाने के लिए arrow keys इस्तेमाल करें, capture के लिए Enter और रद्द करने के लिए Esc दबाएं। Capture आपके clipboard पर, या एक .h2f file में जाता है, और आप उसे plugin के Browser tab में paste करते हैं। या extension को एक one-time code से अपने plugin से एक बार connect करें और Send to Figma इस्तेमाल करें, जो captures को सीधे खुले plugin में पहुंचाता है।
नतीजे में मिलने वाले layers किसी भी दूसरे import जैसे ही होते हैं: एडिटेबल text, vectors, images और verified Auto Layout। एक capture एक import गिना जाता है।
Front-end developers को पूरी walkthrough Chrome extension से localhost to Figma में मिलेगी। Public पेजों के लिए URL to Figma को किसी extension की ज़रूरत नहीं, और security पेज ठीक-ठीक बताता है कि extension क्या भेजता है।
Extension से tab capture करना
- 01
Chrome extension इंस्टॉल करें
Free HTML to Frames extension को Chrome में जोड़ें; इसके लिए किसी account की ज़रूरत नहीं।
- 02
पेज को उसी state में खोलें जो आप चाहते हैं
Sign in करें, अपना local server शुरू करें, menu खोलें या form ठीक वैसे भरें जैसे आप उसे capture करना चाहते हैं।
- 03
पेज या एक element capture करें
पूरा पेज लें, या picker से एक element highlight करके चुनें।
- 04
Paste करें या Figma में भेजें
Plugin के Browser tab में paste करें, या one-time code से एक बार pair करने के बाद Send to Figma इस्तेमाल करें।
Extension कहां तक पहुंच सकता है
Logged-in पेज
Dashboards, admin panels और account पेज, आपके पहले से मौजूद session के साथ capture।
localhost और private networks
Local dev servers, staging और intranet पेज, जिन तक बाहरी service नहीं पहुंच सकती।
सटीक UI states
खुले menus, भरे हुए forms, modals और carts वैसे ही capture होते हैं जैसे वे screen पर हैं।
Element picker
Highlight के लिए hover करें, parent और child के बीच जाने के लिए ऊपर या नीचे arrow, capture के लिए Enter।
Send to Figma
One-time code से एक बार pair करें और captures सीधे आपके खुले plugin में जाते हैं।
Privacy डिज़ाइन में ही
कोई account नहीं, कोई analytics नहीं, कोई remote code नहीं; जब तक आप Send to Figma इस्तेमाल न करें, कुछ भी नहीं भेजा जाता।
Front-end developers के लिए localhost to Figma
Developers को अक्सर designers को दिखाना होता है कि असल में क्या बना है, या review के लिए coded prototype को Figma में लाना होता है। आम विकल्प हैं screenshots, जिन्हें कोई edit नहीं कर सकता, या screen को हाथ से दोबारा बनाना। Extension तीसरा विकल्प देता है: सीधे localhost capture करें।
क्योंकि यह आपके अपने browser में चलता है, extension ठीक वही देखता है जो आपका dev server render करता है, जिसमें शामिल हैं:
- Feature branches जो अभी कहीं deploy नहीं हुई हैं
- Local data या mocked APIs पर निर्भर पेज
- VPN या private network पर staging environments
- Component playgrounds और isolated story पेज
पूरे पेज के बजाय एक component capture करने के लिए element picker इस्तेमाल करें। उसे highlight करें, अगर padding चाहिए तो उसके container पर जाने के लिए up arrow दबाएं, और Enter दबाएं। नतीजा rendered CSS से निकाले गए Auto Layout वाला एक frame है, इसलिए एक flexbox row अपने gaps और padding के साथ horizontal Auto Layout frame के रूप में आती है।
इससे handoff दोनों तरफ़ चलने वाला रास्ता बन जाता है: designers को असली implementation के एडिटेबल frames मिलते हैं और वे ship हुई चीज़ पर comment या उसमें बदलाव कर सकते हैं। CSS flexbox और grid से Auto Layout guide दिखाती है कि layouts कैसे map होते हैं।
Paste बनाम Send to Figma
Chrome से Figma में capture लाने के दो तरीके हैं, और दोनों एक जैसे layers बनाते हैं।
Paste
Capture के बाद, नतीजा आपके clipboard पर रखा जाता है। Figma पर जाएं, HTML to Frames खोलें, Browser tab पर जाएं और paste करें। चाहें तो capture को .h2f file के रूप में save करें और बाद में plugin में लाएं। इस flow में कुछ भी आपके computer से बाहर नहीं जाता।
Send to Figma
One-time code से extension को अपने plugin से एक बार connect करें। इसके बाद, हर capture clipboard वाले step के बिना सीधे खुले plugin में जाता है, जो लगातार कई states capture करते समय ज़्यादा तेज़ है।
Send to Figma के साथ, capture हमारी तरफ़ memory में तब तक रखा जाता है जब तक आपका plugin उसे न ले ले, अधिकतम 30 मिनट तक। इसे disk पर नहीं लिखा जाता।
| Paste | Send to Figma | |
|---|---|---|
| Setup | कुछ नहीं | One-time pairing code |
| Data आपके computer से बाहर जाता है | नहीं | 30 मिनट तक memory में रखा जाता है |
| किसके लिए सबसे अच्छा | कभी-कभार के captures | कई states जल्दी capture करना |
दोनों ही तरह, एक capture आपके plan में एक import गिना जाता है, और आपको मिलने वाले layers बिल्कुल एक जैसे होते हैं।
Extension आपके data के साथ क्या करता है और क्या नहीं
Logged-in पेज पढ़ सकने वाले extension की बारीकी से जांच होनी चाहिए। HTML to Frames Chrome extension को जितना हो सके उतना कम करने के लिए डिज़ाइन किया गया है:
- यह आपके browser में चलता है। Captures आपके देखे जा रहे पेज से local रूप से बनते हैं।
- कोई account नहीं। इसे इस्तेमाल करने के लिए आपको sign up या sign in नहीं करना पड़ता।
- कोई analytics नहीं। Extension में कोई usage tracking नहीं है।
- कोई remote code नहीं। Extension किसी server से code download करके नहीं चलाता।
- Default रूप से कुछ नहीं भेजा जाता। Data हम तक सिर्फ़ तभी पहुंचता है जब आप Send to Figma चुनते हैं, और तब वह अधिकतम 30 मिनट तक आपके plugin के लिए memory में इंतज़ार करता है।
Capture में सिर्फ़ वही शामिल होता है जो उस पेज पर है जिसे आप capture करना चुनते हैं। Personal या customer data दिखाने वाले पेज को capture करने से पहले सोचें कि क्या वह data किसी shared Figma file में पहुंचना चाहिए, और सिर्फ़ ज़रूरी हिस्सा पकड़ने के लिए element picker इस्तेमाल करें।
Figma की तरफ़, plugin आपकी file का content नहीं पढ़ता। यह नए layers लिखता है और सिर्फ़ अपने frames का metadata पढ़ता है। Security पेज पूरा setup बताता है, और docs installation और pairing को कवर करते हैं। Extension को Chrome Web Store के लिए तैयार किया जा रहा है।
अक्सर पूछे जाने वाले सवाल
URL import हमारी capture service से पेजों को एक anonymous visitor के रूप में load करता है, इसलिए यह logged-in पेजों, localhost या private networks तक नहीं पहुंच सकता, और हमेशा default state ही देखता है। Extension आपके अपने browser से, आपके session के साथ और पेज जिस भी state में हो उसी में, capture करता है।
हाँ। Element picker पर switch करें, किसी element को highlight करने के लिए hover करें, उसके parent पर जाने के लिए up arrow या child पर जाने के लिए down arrow इस्तेमाल करें, और capture के लिए Enter दबाएं। रद्द करने के लिए Esc दबाएं। Element एडिटेबल layers वाले अपने अलग frame के रूप में आता है।
One-time code से extension को अपने plugin के साथ एक बार pair करें। इसके बाद, हर capture सीधे खुले plugin में deliver होता है। Capture अधिकतम 30 मिनट तक memory में इंतज़ार करता है जब तक plugin उसे न ले ले, और कभी disk पर नहीं लिखा जाता।
नहीं। इसमें कोई account नहीं, कोई analytics नहीं और कोई remote code नहीं है। जब तक आप किसी capture के लिए Send to Figma इस्तेमाल न करें, यह हमें कुछ नहीं भेजता। जब आप इसके बजाय paste करते हैं, तो capture आपके clipboard या एक .h2f file से होकर जाता है और कभी आपके computer से बाहर नहीं जाता।
हाँ। Extension से हर capture आपके plan पर एक import गिना जाता है। Free plan में हर महीने 10 imports शामिल हैं, और Pro और Team fair-use सीमा के भीतर unlimited हैं। Usage counters हर महीने UTC में reset होते हैं, और एक capture सिर्फ़ एक बार गिना जाता है।
हाँ। HTML to Frames Chrome extension स्वयं free है और इसके लिए किसी account की ज़रूरत नहीं। Captures Figma plugin के ज़रिए import होते हैं और आपके plan में गिने जाते हैं, जो Free tier से शुरू होता है। Extension को Chrome Web Store पर प्रकाशन के लिए तैयार किया जा रहा है।
संबंधित
Web को दोबारा बनाना बंद करें।
Link paste करें और कुछ ही सेकंड में असली, एडिटेबल, रिस्पॉन्सिव Figma layers पाएं। शुरुआत free — हर महीने 10 imports।
कोई credit card नहीं। Pro, Figma के अंदर ही खरीदा जाता है।
जल्द ही Figma Community पर