Figma plugin
HTML to Figma — screenshot नहीं, एडिटेबल layers के रूप में
HTML to Frames किसी भी web पेज को असली Figma frames, text, vectors और images में बदलता है, और Auto Layout को रखने से पहले उसकी जांच करता है।
- पांच sources: link, कई links, local files, Chrome tab, AI tools
- Auto Layout हर child के स्तर पर verified, ताकि डिज़ाइन कभी न टूटे
- हर महीने 10 imports वाला Free plan
जल्द ही Figma Community पर
HTML को Figma में बदलना तब तक आसान लगता है जब तक आप नतीजा नहीं खोलते: एक flat image जिसे आप edit नहीं कर सकते, या absolute position वाले boxes का ढेर जो frame resize करते ही बिखर जाता है। EUREKA! का Figma plugin, HTML to Frames, अलग रास्ता अपनाता है। यह आपके पेज को एक असली browser में render करता है, हर element को मापता है, और उसे आपके canvas पर native Figma layers के रूप में दोबारा बनाता है: frames, mixed styles वाला एडिटेबल text, vectors में बदले गए SVG, और अपने मूल fit और tiling वाली images।
Plugin पहले पेज को absolute positions के साथ pixel-exact बनाता है। फिर यह frames को अंदर से बाहर की ओर देखता है और browser की geometry से stacks, wrapping rows, gaps, padding और alignment निकालता है। हर Auto Layout plan लागू किया जाता है और हर child की position 2 px की tolerance के भीतर verify की जाती है। अगर कोई plan टिकता नहीं, तो आसान plan आज़माया जाता है; अगर कुछ भी फिट न हो, तो वह frame समझदार constraints के साथ अपनी absolute positions रखता है। आपको ऐसी file मिलती है जो किसी designer की बनाई चीज़ की तरह व्यवहार करती है, किसी trace की तरह नहीं।
आप HTML को वहीं से ला सकते हैं जहां वह मौजूद है: एक public URL, एक batch में 10 links तक, एक local HTML file, एक site folder या .zip, paste किया गया code, आपके अपने Chrome का कोई tab, या MCP से connected कोई AI tool। Features overview में वह सब कुछ है जो convert होता है, gradients और shadows से लेकर ::before pseudo-elements और shadow DOM तक।
अगर आप इस प्रक्रिया में नए हैं, तो step-by-step guide HTML को Figma में कैसे बदलें आपको पहले import से गुज़ारती है। अगर आप मुख्य रूप से live sites से काम करते हैं, तो URL to Figma देखें; login के पीछे वाले या localhost पर चल रहे पेजों के लिए Chrome extension सही रास्ता है। Pricing हर महीने 10 imports के साथ $0 से शुरू होती है, और pricing पेज बताता है कि Pro में क्या जुड़ता है।
चार steps में HTML को Figma में कैसे बदलें
- 01
Plugin खोलें और source चुनें
आपका HTML कहां है, उसके हिसाब से Link, Multiple, Local file, Browser या AI चुनें।
- 02
Screens और options चुनें
Desktop, Laptop, Tablet या Mobile चुनें, और Auto Layout, Images या Hide cookie banners & popups जैसे options on/off करें।
- 03
Missing fonts सुलझाएं
कुछ भी बनने से पहले, एक Missing fonts screen replacements सुझाती है और हर site के लिए आपकी पसंद याद रखती है।
- 04
नतीजे की समीक्षा करें
Results screen पर frames, layers, Auto Layout share और warnings दिखती हैं, यह भी कि कोई frame absolute क्यों रहा।
Conversion को एडिटेबल क्या बनाता है
Native layers, pixels नहीं
Frames, text, vectors और images, जिन्हें आप हाथ से बनाई किसी भी चीज़ की तरह select, rename और restyle कर सकते हैं।
Verified Auto Layout
Stacks, gaps, padding और alignment मापी गई geometry से निकाले जाते हैं और रखने से पहले 2 px के भीतर जांचे जाते हैं।
असली text styling
Mixed styles, links, letter-spacing, line-height और text-transform, एडिटेबल text के रूप में आते हैं।
Gradients, shadows, blur
Linear, radial और conic gradients, inner और outer shadows, blend modes, blur और backdrop-blur बरकरार रहते हैं।
Responsive screens
Desktop, Laptop 1280, Tablet 768 और Mobile 390 capture करें, या Pro पर एक click में पूरा responsive set।
पांच रास्ते
Link, 10 links तक, local files, Chrome tab या MCP के ज़रिए AI tool से import करें।
एडिटेबल layers बनाम screenshot
HTML to Figma conversion का वादा करने वाले कई tools पेज की एक तस्वीर paste कर देते हैं। Mood board के लिए यह चल जाता है, लेकिन बात वहीं रुक जाती है: आप headline नहीं बदल सकते, color swap नहीं कर सकते, card नहीं हिला सकते। HTML to Frames इसके बजाय structure को दोबारा बनाता है।
| Screenshot import | HTML to Frames | |
|---|---|---|
| Text | Pixels | Mixed styles वाला एडिटेबल text |
| Icons और logos | Pixels | एडिटेबल vectors में बदले गए SVG |
| Layout | Flat image | Verified Auto Layout वाले nested frames |
| Colors | आंख से अंदाज़ा | सटीक values, optional color variables (Pro) |
| Resizing | Image खिंच जाती है | Auto Layout और constraints प्रतिक्रिया देते हैं |
एक ईमानदार अपवाद है। जो content layers के रूप में मौजूद नहीं हो सकता, जैसे embedded map iframe, बिना poster का video, या WebGL scene, वह उसी box की screenshot image के रूप में आता है। उसके आसपास बाकी पेज एडिटेबल रहता है, इसलिए background video वाला hero भी आपको एडिटेबल headlines, buttons और navigation देता है।
अगर फिर भी आपको pixel reference चाहिए, तो Pro में Reference screenshot option है: import के नीचे रखी एक hidden, locked layer, ताकि आप कभी भी rebuild की तुलना मूल से कर सकें। इस अंतर को गहराई से समझने के लिए HTML to canvas बनाम एडिटेबल layers पढ़ें।
पांच sources, एक नतीजा
हर source का output एक जैसा होता है, इसलिए आप अपनी स्थिति के हिसाब से कोई भी चुन सकते हैं।
Link और Multiple
एक public URL paste करें, या 10 links तक जो एक के बाद एक process होते हैं। हर पेज canvas पर अपनी अलग row में आता है। Multiple import, Free सहित हर plan पर उपलब्ध है।
Local file
एक HTML file, पूरा site folder (फिर चुनें कि कौन-से पेज), एक .zip drop करें, या सीधे HTML और CSS paste करें। Uploads 30 MB तक हो सकते हैं और import पूरा होते ही delete हो जाते हैं।
Browser
Free Chrome extension वही capture करता है जो आपका browser देखता है: logged-in dashboards, localhost, private networks और पेज की मौजूदा state, जैसे खुला menu या भरा हुआ form। देखें Chrome extension to Figma।
AI tools
Plugin के AI tab से Claude Code, Claude Desktop, Cursor या कोई और MCP client connect करें, और generate किए गए पेज आपके खुले plugin में आ जाते हैं। Details AI to Figma पर हैं।
आप कोई भी source चुनें, एक import सभी screens वाला एक पेज गिना जाता है, इसलिए एक ही पेज का Desktop, Tablet और Mobile capture एक ही import है। हर frame अपना source URL save रखता है, यानी live पेज बदलने पर आप उसे एक click में re-import कर सकते हैं।
Converter क्या-क्या संभालता है
Modern CSS वह जगह है जहां ज़्यादातर HTML to Figma tools की fidelity गिर जाती है। HTML to Frames browser का computed result पढ़ता है, इसलिए यह properties की एक बड़ी range संभालता है:
- Flexbox और grid से layout, जहां टिकता है वहां Auto Layout में बदला गया (देखें CSS flexbox और grid से Auto Layout)
- Borders, अलग color वाली एक side सहित, और corner radius
object-fit,background-size, tiling और high-ressrcsetवाली imagesclip-path,mask-image,::beforeऔर::after, CSS counters और Chrome की तरह बने list markers- CSS rotation और scale, opacity,
filter: grayscale/opacity - Form fields, superscript और subscript, shadow DOM और z-index order
कुछ चीज़ें अभी supported नहीं हैं: skew और 3D transforms, path() clip-paths, multi-layer masks और Display-P3 colors। हम इन्हें खुलकर बताते हैं ताकि import से पहले आपको पता रहे कि क्या उम्मीद करनी है। पूरी list features पेज पर है, और setup के सवालों के जवाब docs में हैं।
जब किसी चीज़ को ठीक-ठीक नहीं दिखाया जा सकता, तो results screen आपको बताती है। इसमें missing fonts, warnings, Auto Layout पाने वाले frames का हिस्सा, और absolute रहे हर frame की वजह दी जाती है। आपको कभी अंदाज़ा नहीं लगाना पड़ता कि conversion के किन हिस्सों को दोबारा जांचना है।
अक्सर पूछे जाने वाले सवाल
नहीं। HTML to Frames पेज को native Figma layers के रूप में दोबारा बनाता है: frames, एडिटेबल text, SVG से vectors और images। सिर्फ़ वे boxes जो layers नहीं बन सकते, जैसे map iframes, बिना poster के videos या WebGL canvases, उस box के screenshot के रूप में आते हैं, जबकि उनके आसपास सब कुछ एडिटेबल रहता है।
पांच: एक public link, एक Multiple import में 10 links तक, local files (एक HTML file, site folder, .zip या paste किया गया code), free extension के ज़रिए Chrome का कोई tab, और MCP से connected Claude Code, Claude Desktop या Cursor जैसे AI tools।
हाँ। पेज को pixel-exact बनाने के बाद, plugin stacks, gaps, padding और alignment निकालता है, उन्हें लागू करता है और हर child को 2 px के भीतर verify करता है। अगर कोई plan fail हो, तो आसान plan आज़माया जाता है; वरना frame constraints के साथ absolute positions रखता है, ताकि डिज़ाइन न टूटे।
हाँ। Free plan में हर महीने 10 imports हैं, हर import में एक screen, और 10 links तक का Multiple import शामिल है। Pro हर import में चार screens तक, styles और variables, components, Light + Dark और भी बहुत कुछ जोड़ता है, $7 प्रति माह की launch price पर।
पेज एक isolated, sandboxed browser में render होते हैं। नतीजा एक बार deliver होता है और फिर memory से delete हो जाता है; यह कभी disk पर नहीं लिखा जाता, और job record 15 मिनट बाद भुला दिया जाता है। Upload की गई files import पूरा होते ही delete हो जाती हैं।
Build करने से पहले, plugin सुझाए गए replacements के साथ एक Missing fonts screen दिखाता है। आपकी पसंद हर site के लिए याद रखी जाती है, या आप चाहें तो हर site के लिए, इसलिए उसी site को दोबारा import करने पर फिर से नहीं पूछा जाता। Font mapping, Free सहित हर plan पर उपलब्ध है।
Web को दोबारा बनाना बंद करें।
Link paste करें और कुछ ही सेकंड में असली, एडिटेबल, रिस्पॉन्सिव Figma layers पाएं। शुरुआत free — हर महीने 10 imports।
कोई credit card नहीं। Pro, Figma के अंदर ही खरीदा जाता है।
जल्द ही Figma Community पर