HTML को Figma में कैसे बदलें: पूरी 2026 Guide (HTML to Figma)

हर design team आख़िरकार एक ही दीवार से टकराती है: जिस चीज़ पर आपको काम करना है वह browser में HTML के रूप में मौजूद है, लेकिन आप उस पर काम Figma में करना चाहते हैं। शायद यह redesign से पहले client की live site है, किसी developer का अभी ship किया staging build है, या किसी AI tool का सेकंडों में बनाया landing पेज। इसे हाथ से दोबारा बनाने में घंटों लगते हैं। Screenshot paste करने से आपको देखने लायक चीज़ मिलती है, edit करने लायक नहीं।

यह guide बताती है कि HTML to Frames plugin से HTML को Figma में असली, एडिटेबल layers — frames, text, vectors और images — के रूप में कैसे बदलें। आप सीखेंगे कि पेज लाने के पांच तरीके क्या हैं, screens कैसे चुनें, कौन-से options on करें, क्या साफ़ convert होता है और क्या नहीं, और सबसे आम समस्या — missing fonts — को कैसे ठीक करें।

HTML को Figma में बदलें ही क्यों?

Browser और design tool अलग-अलग समस्याएं हल करते हैं। जो ship होता है उसका सच browser है; Figma वह जगह है जहां आप explore, annotate, compare और handoff करते हैं। Convert करने से मौजूदा हकीकत उस जगह पहुंच जाती है जहां आप फ़ैसले लेते हैं।

Teams ऐसा करने की आम वजहें:

• Redesigns. खाली canvas के बजाय मौजूदा site से शुरू करें, ताकि बदलने से पहले देख सकें कि असल में वहां क्या है। हमारी website-to-Figma redesign guide इस पर और गहराई से बात करती है।
• Audits. DevTools से अंदाज़ा लगाने के बजाय spacing, type scale और color usage को layer दर layer जांचें।
• Design–code drift. Ship हुए version को वापस Figma में लाकर मूल mockup से तुलना करें।
• उल्टा developer handoff. एक front-end developer localhost पर बनाता है, और designer उसे Figma में review करके निखारता है।
• AI-generated UI. Claude या Cursor जैसे tools जल्दी HTML बना देते हैं; Figma वह जगह है जहां आप उसे production के लिए तैयार करते हैं।
• सीखना. Students और junior designers अच्छी बनी sites को एक-एक layer करके समझ सकते हैं।

इन सबमें मुख्य शब्द है एडिटेबल। Bitmap आपको सिर्फ़ पेज दिखाता है। Layers आपको उसे बदलने देते हैं।

HTML को Figma में लाने के 5 तरीके

HTML to Frames पांच तरह के sources से web पेज स्वीकार करता है। वह चुनें जो आपके HTML की जगह से मेल खाता हो।

1. Link (एक public URL)

कोई भी public web पेज URL Link tab में paste करें। पेज एक isolated browser में render होता है, मापा जाता है, और Figma layers के रूप में दोबारा बनता है। जब पेज publicly उपलब्ध हो, तो यह सबसे तेज़ रास्ता है। इस flow के बारे में और जानने के लिए URL to Figma देखें।

2. Multiple (10 links तक)

Multiple tab एक बार में 10 links तक लेता है। वे एक के बाद एक process होते हैं, और हर पेज canvas पर एक row बनता है, इसलिए home पेज, pricing पेज और blog post तुलना के लिए साथ-साथ आ जाते हैं। Multiple import, Free सहित हर plan पर उपलब्ध है।

3. Local file, folder, .zip या paste किया गया code

अगर HTML अभी online नहीं है, तो Local file tab इस्तेमाल करें:

• एक HTML file,
• पूरा site folder (drag and drop करें, फिर चुनें कि कौन-से पेज import करने हैं),
• एक .zip archive, या
• Paste code — raw HTML और CSS।

Uploads 30 MB तक हो सकते हैं। Files एक isolated browser के अंदर memory से खोली जाती हैं (कभी file:// से नहीं) और import पूरा होते ही delete हो जाती हैं। छोड़ दिए गए uploads 2 मिनट बाद हटा दिए जाते हैं। पूरी details security पेज पर हैं।

4. Browser (free Chrome extension)

कुछ पेजों तक server नहीं पहुंच सकता: logged-in dashboards, localhost, private networks, या किसी ख़ास state में पेज — खुला menu, भरा हुआ form, items वाला cart। इनके लिए free HTML to Frames Chrome extension इंस्टॉल करें।

आप पूरा पेज capture कर सकते हैं या एक element चुन सकते हैं (highlight के लिए hover करें, parent या child पर जाने के लिए arrow keys, capture के लिए Enter, रद्द करने के लिए Esc)। नतीजा आपके clipboard पर, या एक .h2f file में जाता है, और आप उसे plugin के Browser tab में paste करते हैं। और भी आसान: extension को one-time code से plugin से एक बार connect करें और Send to Figma इस्तेमाल करें, ताकि captures सीधे खुले plugin में जाएं।

5. MCP के ज़रिए AI tools

अगर आप AI assistant से UI बनाते हैं, तो plugin के AI tab से Claude Code, Claude Desktop, Cursor या कोई भी MCP client connect करें। यह आपको एक token और copy-paste setup देता है। इसके बाद assistant import_html (2 MB तक का HTML), import_url या import_status call कर सकता है, और पेज आपके खुले plugin में आपके अपने plan से import होकर आता है। claude.ai के web connectors अभी supported नहीं हैं। और पढ़ें AI to Figma पर।

आपको कौन-सा तरीका इस्तेमाल करना चाहिए?

Step by step: HTML to Frames से पेज convert करना

एक आम public पेज के लिए पूरा flow यह है।

1. Figma design file में plugin खोलें और Link tab चुनें।
2. जिस पेज को convert करना है उसका URL paste करें।
3. अपनी screens चुनें — Desktop (Site width), Laptop, Tablet, Mobile, या एक click वाला Responsive set।
4. Auto Layout, Full page, Images और Hide cookie banners & popups जैसे options देखें।
5. Import शुरू करें। अगर पेज ऐसे fonts इस्तेमाल करता है जो आपके पास installed नहीं हैं, तो कुछ भी बनने से पहले एक Missing fonts screen दिखती है।
6. किसी भी missing font के लिए replacements चुनें (या सुझाव स्वीकार करें)।
7. Results screen जांचें। इसमें frames, layers, Auto Layout share, missing fonts और warnings होती हैं।
8. Edit करना शुरू करें। आपका पेज अब असली text, vectors और images वाले nested Figma frames का set है।

हर screen अपना अलग frame बनती है, जिसका नाम example.com/pricing — Desktop (1920) जैसा होता है — कोई protocol नहीं, कोई www नहीं, और 60 characters की सीमा — ताकि बड़े imports भी layers panel में आसानी से देखे जा सकें।

Screens चुनना: Site width समझें

Screen का चुनाव दिखने से ज़्यादा मायने रखता है। गलत width पर render हुआ पेज या तो अजीब तरह से खिंच जाता है या ऐसे layout में सिकुड़ जाता है जो designer ने कभी सोचा ही नहीं था।

Desktop = Site width

HTML to Frames बस 1440 चुनकर उम्मीद नहीं करता। यह import के समय पेज की असली design width मापता है:

• Full-bleed designs (किनारे से किनारे तक चलने वाले backgrounds) centred content box के साथ 1920 पर आते हैं।
• सच में boxed sites अपनी box width पर आती हैं — उदाहरण के लिए 1200, 1280 या 1440।
• बिना fixed container वाली fluid sites 1440 पर आती हैं।

अंदाज़ा नहीं, माप। Multi-page import में एक site के सभी पेजों को एक ही width मिलती है, ताकि frames सीध में रहें।

दूसरी screens

• Laptop — 1280
• Tablet — 768
• Mobile — 390
• Custom width — आपकी ज़रूरत की कोई भी width (Pro)

Responsive set आपको एक click में Desktop, Tablet और Mobile देता है। एक ही पेज की screens parallel में capture होती हैं।

Free पर, हर import में एक screen शामिल है। Pro और Team हर import में चार screens तक की अनुमति देते हैं। ज़रूरी बात: एक import = सभी screens वाला एक पेज, इसलिए एक पेज का responsive set एक ही import गिना जाता है। Plan details के लिए pricing देखें।

जानने लायक options

ज़्यादातर पेजों के लिए defaults काम करते हैं, लेकिन इन options को समझना फ़ायदेमंद है:

• Auto Layout — browser की geometry से stacks, gaps, padding और alignment निकालता है, और रखने से पहले नतीजे को verify करता है। यह कैसे काम करता है, यह Auto Layout explainer में है।
• Styles & variables (Pro) — color variables, text styles और shadow styles बनाता है, और आपकी file में पहले से मौजूद styles को reuse करता है।
• Snap to my file's styles (Pro) — जब exact match न हो, तो colors और text को आपके अपने design system की सबसे क़रीबी styles से snap करता है।
• Full page — सिर्फ़ पहले viewport के बजाय पूरा scroll होने वाला पेज capture करता है।
• Images — image fills शामिल करें या छोड़ें।
• Hide cookie banners & popups — पेज को overlays के बिना वैसे capture करता है जैसे एक सामान्य visitor उसे देखता है।
• Color scheme — Light, Dark, या Light + Dark (Pro), जो दोनों modes वाला एक variable collection बनाता है।
• Detailed layers (Pro), Reference screenshot (Pro, तुलना के लिए एक hidden locked layer) और Extra wait (Pro, धीरे load होने वाले पेजों के लिए)।
• Accordion text as notes — default रूप से off; बंद <details> text को Figma annotations में बदलता है।
• Page language — 15 भाषाएं, multilingual sites के लिए उपयोगी।

क्या convert होता है — और क्या नहीं

लक्ष्य एक ऐसी design file है जिसमें आप सच में काम कर सकें, इसलिए यह जानना ज़रूरी है कि ठीक-ठीक क्या आता है।

क्या एडिटेबल layers में convert होता है

• Layout nested frames के रूप में, जहां verify हो सके वहां Auto Layout के साथ
• Mixed styles, links, letter-spacing, line-height और text-transform वाला Text
• Colors और gradients — linear, radial और conic, px stops और repeating gradients सहित
• object-fit, background-size, tiling और high-res srcset वाली Images
• एडिटेबल vectors के रूप में SVG
• Borders (अलग color वाली एक side सहित), corner radius और shadows (inner, outer और text-shadow)
• Opacity, blend modes, blur और backdrop-blur
• CSS rotation और scale, filter: grayscale/opacity
• ::before और ::after, clip-path, mask-image
• Form fields, Chrome की तरह बने list markers, CSS counters, superscript और subscript
• Shadow DOM और सही z-index order

क्या image के रूप में आता है

कुछ content को layers के रूप में नहीं दिखाया जा सकता। Iframes (जैसे embedded maps), बिना poster के videos, WebGL या 3D canvases और object/embed elements को सिर्फ़ उस box के screenshot के रूप में capture किया जाता है। बाकी पेज एडिटेबल रहता है। HTML to canvas तुलना इसकी वजह बताती है।

अभी supported नहीं

• Skew और 3D transforms
• path() clip-paths
• Multi-layer masks
• Display-P3 colors

साफ़ नतीजों के लिए tips

कुछ आदतें साफ़ अंतर लाती हैं:

1. Marketing sites के लिए "Hide cookie banners & popups" on करें। वरना कोई consent dialog आपके hero section के ऊपर बैठ सकता है।
2. Authenticated पेजों के लिए Chrome extension इस्तेमाल करें। Server आपकी तरह login नहीं कर सकता; आपका browser पहले से logged in है।
3. States सोच-समझकर capture करें। पहले अपने browser में menu खोलें या form भरें, फिर extension से capture करें।
4. जब आपको सिर्फ़ एक component चाहिए, जैसे pricing card या navigation bar, तो एक element चुनें। छोटे captures जल्दी साफ़ होते हैं।
5. देर से content load करने वाले पेजों पर Extra wait इस्तेमाल करें (Pro)।
6. जब आपको साबित करना हो कि import live पेज से मेल खाता है, तो Reference screenshot जोड़ें (Pro) — यह एक hidden, locked layer है जिसे तुलना के लिए on किया जा सकता है।
7. तीन अलग imports के बजाय responsive set import करें। यह एक import है, और frames साथ रहते हैं।
8. पहले import के बाद उसी site के दूसरे पेज चुनने के लिए Import linked pages इस्तेमाल करें — वे Multiple import के रूप में आते हैं।
9. Live पेज बदलने पर एक click में re-import करें। Source URL frame पर save रहता है।

Missing fonts ठीक करना

Import किया गया पेज "कुछ अलग" दिखने की सबसे आम वजह missing fonts हैं। Site कोई licensed typeface या webfont इस्तेमाल कर सकती है जो आपके computer पर installed नहीं है।

HTML to Frames इसे layers बनाने से पहले संभालता है:

1. Capture के बाद, एक Missing fonts screen पेज में इस्तेमाल हुई हर उस family की list दिखाती है जिसे Figma नहीं ढूंढ पाता।
2. हर एक के लिए, plugin एक replacement सुझाता है। आप उसे स्वीकार कर सकते हैं या कोई और font चुन सकते हैं।
3. आपकी पसंद हर site के लिए याद रखी जाती है — या आप चाहें तो हर site के लिए — ताकि उसी domain से अगला import फिर से न पूछे।

Font mapping हर plan पर उपलब्ध है। Fonts सिर्फ़ local रूप से list होते हैं; plugin आपकी Figma file का content नहीं पढ़ता। अगर आप डिज़ाइन पर लंबे समय तक काम करने वाले हैं, तो site का असली typeface install करना अब भी सबसे सटीक विकल्प है।

आगे कहां जाएं

HTML को Figma में बदलना पहला कदम है। असली फ़ायदा इसमें है कि आप layers के साथ क्या करते हैं:

• Redesign की योजना बना रहे हैं? HTML to design workflow पढ़ें।
• AI-generated पेजों के साथ काम कर रहे हैं? AI to Figma और हमारी guide MCP के ज़रिए AI-generated UI को Figma में देखें।
• Localhost या logged-in पेज चाहिए? Chrome extension से शुरू करें।
• Tools की तुलना कर रहे हैं? हमारा alternatives पेज विकल्पों को निष्पक्ष रूप से रखता है।

जब आप तैयार हों, plugin पाएं और उसे उसी पेज पर आज़माएं जिस पर आप अभी काम कर रहे हैं। Docs हर option को विस्तार से कवर करते हैं।