HTML to Frames documentation

1. Figma (desktop app या browser) खोलें और HTML to Frames के Community पेज पर जाएं।
2. Open in… या Try it out पर click करें और एक file चुनें। Plugin आपके account में save हो जाता है।
3. अगली बार इसे menu से शुरू करें: Plugins → HTML to Frames — या ⌘/ (Windows पर Ctrl /) दबाएं और HTML to Frames टाइप करें।

Plugin Figma Design files में काम करता है। इसके लिए किसी account की ज़रूरत नहीं: Free plan अपने-आप शुरू हो जाता है, और Pro, Figma के अंदर ही खरीदा जाता है।

1. Import tab में source को Link पर रहने दें और एक URL paste करें, उदाहरण के लिए अपना homepage।
2. Screens के नीचे Desktop चुना हुआ है और Site width दिखाता है — plugin import के दौरान पेज की असली design width मापेगा। Pro पर, Tablet और Mobile जोड़ने के लिए Responsive set पर click करें।
3. Auto Layout को on रहने दें। Import पर click करें।
4. Progress देखें: पेज render होता है, images तैयार होती हैं, layers बनते हैं और Auto Layout लागू व verify होता है।
5. Result screen पर frames और layers की संख्या, Auto Layout वाले frames का हिस्सा, missing fonts और कोई भी warnings दिखती हैं।

आपका पेज canvas पर frames की एक row के रूप में आता है, जिनके नाम yoursite.com — Desktop (1920) जैसे होते हैं। हर text, image और vector एडिटेबल है।

Link

कोई भी public पेज। जिन पेजों के लिए login चाहिए, जो localhost पर या किसी private network में हैं, उन तक capture service नहीं पहुंच सकती — उनके लिए Chrome extension इस्तेमाल करें।

Multiple

10 links तक paste करें, हर line में एक। वे एक के बाद एक import होते हैं, हर एक अपनी अलग row में। एक ही site के पेज एक ही मापी गई width share करते हैं ताकि वे एक सीध में रहें।

Local file

एक HTML file, एक site folder या एक .zip (30 MB तक) चुनें। Folders के लिए चुनें कि कौन-से पेज import करने हैं। आप Paste code चुनकर inline या embedded CSS वाला HTML भी paste कर सकते हैं। Files एक isolated browser में memory से खोली जाती हैं और import के तुरंत बाद delete हो जाती हैं।

Browser

HTML to Frames Chrome extension से बना capture paste करें (⌘V), एक .h2f file drop करें, या extension को एक बार connect करके Send to Figma इस्तेमाल करें। देखें Chrome extension।

AI tools

AI tab में एक MCP client connect करें और अपने AI tool को पेज भेजने दें। देखें AI tools (MCP)।

Site width import के समय मापी जाती है: edge-to-edge sections वाले layouts एक 1920 frame में रखे जाते हैं, content box centered रहता है; सच में boxed sites अपनी box width इस्तेमाल करती हैं (उदाहरण के लिए 1200 या 1280); fluid layouts 1440 इस्तेमाल करते हैं। Free हर पेज के लिए एक screen import करता है; Pro और Team चार तक। एक पेज की सभी screens एक import गिनी जाती हैं।

Build करने से पहले, plugin जांचता है कि पेज के कौन-से fonts आपके computer पर Figma में उपलब्ध नहीं हैं। Missing fonts screen हर एक के लिए एक replacement सुझाती है — पहले वह family जो उसी शब्द से शुरू होती है, फिर CSS font stack का पहला installed font, फिर Inter। चाहें तो search करके कोई और family चुनें, फिर तय करें कि यह पसंद इस site के लिए याद रखनी है या हर site के लिए। Skip सुझावों को बिना save किए एक बार इस्तेमाल करता है। Save की गई पसंदें option के नीचे forget saved से हटाएं।

Styles & variables on होने पर (Pro):

• कम से कम दो बार इस्तेमाल हुए colors — और site की CSS custom properties से मेल खाने वाले colors — Colors · yoursite.com नाम के collection में variables बन जाते हैं। जहां संभव हो, नाम site के tokens से आते हैं (--brand-primary → brand/primary), वरना hue और shade से (blue/500)।
• कम से कम दो बार इस्तेमाल हुई, या 20 px और उससे बड़ी typography, yoursite.com/Heading/32/40 Bold जैसे नाम वाली text styles बन जाती है।
• बार-बार आने वाली shadows, sm, md, lg, xl shadow styles बन जाती हैं।
• अगर आपकी file में उसी value वाला variable या style पहले से है, तो वही reuse होता है।

Snap to my file's styles एक कदम आगे जाकर लगभग मेल खाने वाले मानों को आपके अपने design system से map करता है।

Components & hover states on होने पर, बार-बार आने वाली structures components बन जाती हैं जो पेज के बगल में एक Components · yoursite.com frame में रखे जाते हैं, और हर occurrence अपने text और images वाला एक instance बन जाता है। Hover look वाले elements, State=Default और State=Hover variants वाले component sets बन जाते हैं।

Color scheme → Light + Dark चुनें (Pro)। पेज को दो बार पढ़ा जाता है — prefers-color-scheme: light और dark के साथ — बिना reload किए। बदलने वाला हर color एक Light और एक Dark value वाला variable बन जाता है, और हर screen की एक dark copy उसके बगल में रखी जाती है, जिसमें collection Dark पर set होता है। Starter plan वाली Figma files में हर collection में एक ही mode की अनुमति है; ऐसे में plugin आपको बताता है कि dark mode skip कर दिया गया। जो sites सिर्फ़ JavaScript toggle से theme बदलती हैं (system setting से नहीं), वे अपनी default theme में import होंगी।

• Present mode में links काम करते रहते हैं: external links अपना URL खोलते हैं; जिन पेजों को आपने भी import किया है, उनके links Navigate interactions बन जाते हैं।
• Scroll करते समय fixed और sticky headers अपनी जगह रहते हैं; horizontal carousels और scroll areas scroll होते हैं।
• Import के बाद, Import linked pages उसी site के उन दूसरे पेजों की list दिखाता है जो पेज पर मिले। जो चाहिए उन्हें tick करें, वे उन्हीं settings के साथ Multiple import के रूप में import हो जाते हैं।
• Import किया गया frame चुनें और save किए गए source URL से नया version लाने के लिए Re-import पर click करें।

जिन पेजों तक capture service नहीं पहुंच सकती, उनके लिए free HTML to Frames Chrome extension इस्तेमाल करें: logged-in पेज, localhost, intranets और किसी पेज की सटीक state (खुला dropdown, भरा हुआ form)।

1. Extension install करें और उसे toolbar पर pin करें।
2. पेज खोलें और extension पर click करें → Capture this page, या सिर्फ़ एक हिस्सा capture करने के लिए Select an element (mouse घुमाएं, parent के लिए ↑, वापस के लिए ↓, चुनने के लिए Enter, रद्द करने के लिए Esc)।
3. Capture आपके clipboard में copy हो जाता है (या एक .h2f file के रूप में download होता है)।
4. Figma में plugin खोलें → Browser tab → ⌘V दबाएं या file drop करें।

Send to Figma: plugin के Browser tab में one-time code पाने के लिए Connect पर click करें, और उसे extension में Connect to Figma के नीचे डालें। इसके बाद main button Send to Figma बन जाता है और captures सीधे आपके खुले plugin में जाते हैं।

Extension मौजूदा window width पर एक screen capture करता है — tablet या mobile layouts के लिए window resize करें। हर capture एक import गिना जाता है।

1. Plugin खोलें → AI tab → Connect an AI tool। एक personal token बनता है और सिर्फ़ एक बार दिखाया जाता है।
2. अपने client का setup copy करें: Claude Code (एक claude mcp add command), Claude Desktop (mcp-remote इस्तेमाल करने वाला config) या Cursor & others (URL और header वाला JSON)।
3. Figma में plugin खुला रखें और अपने AI tool से कोई पेज import करने को कहें, उदाहरण के लिए: “तीन plans वाला एक pricing पेज बनाओ और उसे HTML to Frames से Figma में भेजो।”

उपलब्ध tools: import_html (2 MB तक का HTML, optional name और screens), import_url (कोई भी public URL) और import_status। Import आपके plugin में आपके plan के साथ चलता है और tool को एक summary मिलती है — frames, layers, Auto Layout share और missing fonts। Create a new token पुराने token को invalid कर देता है; Disconnect उसे हटा देता है। claude.ai के web connectors अभी supported नहीं हैं।

एक import = सभी screens वाला एक पेज। Counters हर महीने (UTC) reset होते हैं। अगर कोई बहुत लंबा पेज plan limit की वजह से कट जाता है, तो frame पर एक बैंगनी Capture limit पट्टी लग जाती है ताकि आपको हमेशा पता रहे। Plan tab में Figma के checkout से Pro खरीदें; Team members उसी tab में अपनी license key डालते हैं और seat खाली करने के लिए उसे किसी account से हटा सकते हैं।

पेज मेरे browser से अलग दिखता है। Hide cookie banners & popups on करें, धीमे animations के लिए Extra wait आज़माएं, या जो आप देख रहे हैं ठीक वही capture करने के लिए Chrome extension इस्तेमाल करें।

“This address can't be reached.” Capture service सिर्फ़ public addresses खोलती है। Localhost, VPN के पीछे staging या logged-in पेजों के लिए Chrome extension इस्तेमाल करें।

Text अलग तरह से wrap होता है। आमतौर पर यह font का अंतर होता है — Missing fonts screen पर missing font को सही family से map करें।

कुछ frames में Auto Layout नहीं है। जब Auto Layout चीज़ों को खिसका देता, तब यह जानबूझकर किया जाता है। वजह (असमान gaps, overlap, text size) देखने के लिए result screen पर diagnostics list खोलें।

कुछ खाली है। Maps, iframes और WebGL scenes images के रूप में capture होते हैं; अगर कोई अब भी खाली है, तो शायद उस content के लिए user action या login की ज़रूरत थी।

“Limit reached.” आपने इस महीने के Free imports इस्तेमाल कर लिए हैं। वे 1 तारीख (UTC) को reset होते हैं, या unlimited imports के लिए Pro पर upgrade करें।

अब भी अटके हैं? URL और एक screenshot के साथ [email protected] पर लिखें।