Pixels बनाम layers
HTML to canvas — Figma canvas पर ऐसे layers जिन्हें आप edit कर सकें
Bitmap screenshot libraries आपको pixels देती हैं। HTML to Frames पेज को आपके Figma canvas पर vectors, text और frames के रूप में रखता है, जिन्हें आप बदल सकते हैं।
- एडिटेबल text और SVG vectors, raster image नहीं
- असली canvas और WebGL boxes उसी box की image के रूप में रखे जाते हैं
- साफ़, एक जैसे frame के लिए animations freeze किए जाते हैं
जल्द ही Figma Community पर
"HTML to canvas" के दो अलग-अलग मतलब होते हैं, और tool चुनने से पहले इन्हें अलग समझ लेना अच्छा है। Developers का मतलब अक्सर html2canvas होता है, वह JavaScript library जो DOM को पढ़कर पेज का एक अनुमानित रूप <canvas> element में paint करती है, या फिर एक browser screenshot जो दिखने वाले pixels capture करता है। Designers का मतलब आमतौर पर कुछ और होता है: web पेज को Figma canvas पर लाना ताकि वे उस पर काम कर सकें।
दोनों पेज जैसा दिखने वाला कुछ बनाते हैं, लेकिन सिर्फ़ एक ही आपको काम करने लायक चीज़ देता है। Bitmap, चाहे कितना भी sharp हो, रंगीन pixels का एक grid है। आप typo ठीक नहीं कर सकते, font size नहीं बदल सकते, button का color नहीं बदल सकते, या किसी card को नए layout में नहीं ले जा सकते। आप सिर्फ़ crop, scale और उसके ऊपर paint कर सकते हैं।
EUREKA! का Figma plugin, HTML to Frames, दूसरे मतलब को शब्दशः लेता है। यह पेज को एक असली browser में render करता है, हर element की computed geometry और styles पढ़ता है, और पेज को आपके Figma canvas पर native layers के रूप में दोबारा बनाता है: पेज structure को दर्शाने वाले frames, मूल styles वाला एडिटेबल text, vectors में बदले गए SVG, और अपने मूल fit के साथ रखी गई images। जहां verify किया जा सके वहां layout को Auto Layout में बदला जाता है, इसलिए resize करने पर नतीजा प्रतिक्रिया भी देता है।
एक स्थिति ऐसी है जहां pixels ही सही जवाब हैं, और plugin उसे सोच-समझकर संभालता है। एक असली <canvas> element या WebGL scene के अंदर दोबारा बनाने के लिए कोई DOM नहीं होता, इसलिए वह box एक screenshot image के रूप में आता है, जबकि बाकी पेज एडिटेबल रहता है।
इस तुलना के विस्तृत रूप के लिए HTML to canvas बनाम एडिटेबल layers पढ़ें। मूल conversion देखने के लिए HTML to Figma से शुरू करें, या features पेज पर देखें कि क्या-क्या convert होता है।
अपने Figma canvas पर पेज लाना
- 01
चुनें कि पेज कहां से आएगा
एक URL, local file या folder, paste किया गया HTML और CSS, एक Chrome tab, या MCP के ज़रिए AI tool।
- 02
Browser को render करने दें
पेज एक isolated browser में load होता है, animations freeze होते हैं और WebGL कुछ frames के बाद freeze हो जाता है।
- 03
Canvas पर layers पाएं
Frames, text, vectors और images आपके मौजूदा Figma पेज पर रखे जाते हैं, edit करने के लिए तैयार।
Canvas पर layers, bitmap से बेहतर क्यों हैं
Text, text ही रहता है
Headlines और body copy, letter-spacing, line-height और mixed styles के साथ एडिटेबल text के रूप में आते हैं।
SVG, vectors बन जाते हैं
Icons और logos एडिटेबल vector layers में बदल जाते हैं, जिन्हें आप बिना धुंधलेपन के recolor और resize कर सकते हैं।
Select करने लायक structure
Nested frames पेज structure का पालन करते हैं, इसलिए image crop करने के बजाय आप एक card चुन सकते हैं।
Pixels सिर्फ़ ज़रूरत पर
Iframes, बिना poster के videos और WebGL या 3D canvas boxes उस box की screenshot image के रूप में आते हैं।
Frozen, साफ़ capture
एक जैसे frame के लिए animations रोक दिए जाते हैं, ताकि आधे-fade हुए elements न मिलें।
Reference layer
Pro पर, एक hidden, locked screenshot layer से आप rebuild की तुलना मूल pixels से कर सकते हैं।
html2canvas और screenshots बनाम एडिटेबल layers
Screenshot वाले तरीके और HTML to Frames एक ही render हुए पेज से शुरू होते हैं, लेकिन बहुत अलग जगहों पर पहुंचते हैं।
| html2canvas / browser screenshot | Figma canvas पर HTML to Frames | |
|---|---|---|
| Output | एक raster image | Frames, text, vectors और images |
| Text edit करना | संभव नहीं | वहीं edit करें |
| Scaling | 1x से ऊपर धुंधला | Vectors sharp रहते हैं |
| Layout | Fixed pixels | जहां verified वहां Auto Layout, बाकी जगह constraints |
| एक element चुनना | हाथ से crop | Frame पर click करें |
| आम इस्तेमाल | Bug reports, thumbnails, previews | Redesigns, audits, handoff, design systems |
html2canvas CSS rendering को JavaScript में दोबारा implement करता है, इसलिए वह browser के support किए features चूक सकता है। HTML to Frames rendering हो जाने के बाद एक असली Chromium-based browser से values पढ़ता है, फिर उन्हें Figma properties से map करता है: conic और repeating सहित gradients, shadows, blend modes, blur और backdrop-blur, clip-path, mask-image और भी बहुत कुछ।
Screenshots की अपनी जगह अब भी है। अगर आपको जल्दी से एक visual record चाहिए, तो bitmap ठीक है। अगर आप कुछ भी बदलना चाहते हैं, तो layers आपको पेज दोबारा बनाने से बचाते हैं।
एक काम का नियम: अगर अगला कदम एक comment या ticket है, तो screenshot काफ़ी है। अगर अगला कदम Figma खोलकर कुछ बदलना है, तो layers import करें।
असली <canvas> या WebGL element का क्या होता है
पेज पर कुछ content पहले से ही pixels होता है। <canvas> element JavaScript से draw करता है, और WebGL scene GPU पर 3D graphics render करता है। इन boxes के अंदर पढ़ने के लिए कोई DOM नहीं होता, इसलिए कोई भी tool इन्हें सार्थक vector layers में नहीं बदल सकता।
HTML to Frames चुपचाप fail होने के बजाय इन्हें स्पष्ट रूप से संभालता है:
- Box अपनी सटीक position और size पर एक screenshot image के रूप में capture होता है।
- WebGL scenes कुछ frames के बाद freeze कर दिए जाते हैं, ताकि आपको खाली या बीच-transition वाले frame के बजाय एक स्थिर image मिले।
- Box के आसपास की हर चीज़, जैसे उसके ऊपर रखी headings, buttons और overlays, एडिटेबल layers के रूप में रहती है।
यही नियम उस दूसरे embedded content पर लागू होता है जो layers नहीं बन सकता: maps जैसे iframes, बिना poster image के videos, और object या embed elements। हर एक अपने box की image बन जाता है, और results screen कोई भी warnings list करती है।
व्यवहार में इसका मतलब है कि 3D hero वाला landing पेज भी इस्तेमाल करने लायक डिज़ाइन में बदल जाता है। आप hero image को नए visual से बदल सकते हैं, उसके ऊपर की copy दोबारा लिख सकते हैं और spacing ठीक कर सकते हैं, जबकि बाकी पेज अपना Auto Layout बनाए रखता है। वह layout कैसे निकाला जाता है, यह Auto Layout explained में देखें।
चलते-फिरते पेज से साफ़ frame पाना
Modern पेज चलते रहते हैं: carousels घूमते हैं, scroll पर elements fade in होते हैं, cookie banners ऊपर खिसकते हैं और load होने पर hero sections animate होते हैं। एक सीधा-सादा capture उस millisecond में जो भी हो रहा था, उसे freeze कर देता है।
HTML to Frames पेज को वैसे ही capture करता है जैसे एक सामान्य visitor उसे देखता है, नतीजे को predictable बनाने के लिए कुछ controls के साथ:
Frozen animations
Animations freeze कर दिए जाते हैं ताकि capture हर element को transition के बीच के बजाय स्थिर state में दिखाए।
Hide cookie banners & popups
यह option on करें और capture से पहले consent banners और popups छिपा दिए जाते हैं, ताकि वे आपके canvas पर पेज को न ढकें।
Extra wait
देर से content load करने वाले धीमे पेजों को capture से पहले ज़्यादा समय दिया जा सकता है। Extra wait एक Pro option है।
Full page
अपनी ज़रूरत के हिसाब से पूरा scroll होने वाला पेज या सिर्फ़ पहली screen capture करें।
ये options लागू होते हैं चाहे पेज URL, local file या Chrome extension से आए। जब आपको default view के बजाय कोई ख़ास state चाहिए, जैसे खुला menu, तो extension सही विकल्प है।
अगर फिर भी कुछ animation के बीच में capture होता है या छूट जाता है, तो results screen warnings list करती है, और किसी दूसरे option के साथ एक click वाला re-import आमतौर पर सबसे जल्दी का हल है।
अक्सर पूछे जाने वाले सवाल
नहीं। html2canvas एक JavaScript library है जो DOM का एक अनुमानित रूप bitmap में paint करती है। HTML to Frames एक Figma plugin है जो पेज को Figma canvas पर एडिटेबल layers के रूप में दोबारा बनाता है: frames, text, vectors और images, जहां verify किया जा सके वहां Auto Layout के साथ।
हाँ। Text native Figma text layers के रूप में आता है, जिसमें एक paragraph के भीतर mixed styles, links, letter-spacing, line-height और text-transform शामिल हैं। अगर कोई font उपलब्ध नहीं है, तो पेज बनने से पहले एक Missing fonts screen से आप replacement चुन सकते हैं, और आपकी पसंद याद रखी जाती है।
उनके अंदर दोबारा बनाने के लिए कोई DOM नहीं होता, इसलिए ऐसा हर box अपनी सटीक position और size पर screenshot image के रूप में आता है। स्थिर image देने के लिए WebGL कुछ frames के बाद freeze हो जाता है। Box के आसपास सब कुछ एडिटेबल layers के रूप में रहता है।
हाँ, Pro पर। Reference screenshot option, import के नीचे एक hidden, locked image layer जोड़ता है। जब भी आप दोबारा बने layers की तुलना मूल rendering से करना चाहें, इसे on करें, और बाकी समय hidden रहने दें ताकि यह रास्ते में न आए।
Animations freeze किए जाते हैं और, अगर आप चुनें, cookie banners और popups छिपाए जाते हैं, इसलिए capture एक स्थिर पेज दिखाता है। Screenshot उस पल screen पर जो भी था उसे पकड़ लेता है। अगर आपको कोई ख़ास state चाहिए, जैसे खुला menu, तो Chrome extension इस्तेमाल करें।
Linear, radial और conic gradients, inner और outer shadows, text-shadow, opacity, blend modes, blur और backdrop-blur, clip-path, mask-image, rotation और scale। Skew और 3D transforms, path() clip-paths, multi-layer masks और Display-P3 colors अभी supported नहीं हैं। पूरी list features पेज पर है।
संबंधित
Web को दोबारा बनाना बंद करें।
Link paste करें और कुछ ही सेकंड में असली, एडिटेबल, रिस्पॉन्सिव Figma layers पाएं। शुरुआत free — हर महीने 10 imports।
कोई credit card नहीं। Pro, Figma के अंदर ही खरीदा जाता है।
जल्द ही Figma Community पर