MCP connection
AI to Figma: Claude या Cursor से बना UI सीधे Figma में भेजें
अपने AI tool को MCP के ज़रिए HTML to Frames से connect करें। वह जो पेज बनाता है, वे आपके खुले plugin में एडिटेबल, Auto Layout layers के रूप में आते हैं।
- Claude Code, Claude Desktop, Cursor और दूसरे MCP clients के साथ काम करता है
- तीन tools: import_html, import_url, import_status
- Token सिर्फ़ hash के रूप में store होता है
जल्द ही Figma Community पर
AI to Figma, generation से ज़्यादा workflow की समस्या है। Claude और Cursor जैसे tools कुछ ही मिनटों में HTML में एक दमदार landing पेज या dashboard बना सकते हैं, लेकिन वह output एक code file या browser preview में रहता है। Team के साथ उसकी समीक्षा करने, उसे मौजूदा design system से जोड़ने या visually iterate करते रहने के लिए, उसे Figma में layers के रूप में होना चाहिए, screenshot के रूप में नहीं।
EUREKA! का Figma plugin, HTML to Frames, ठीक इसी के लिए एक MCP connection देता है। Plugin का AI tab खोलें, token और उसमें दिखाया गया setup snippet copy करें, और उसे Claude Code, Claude Desktop, Cursor या किसी भी MCP client में जोड़ें। इसके बाद आपके AI tool को तीन tools मिलते हैं: अपना लिखा HTML भेजने के लिए import_html (2 MB तक), address से पेज import करने के लिए import_url, और किसी job की स्थिति जांचने के लिए import_status।
जब AI इनमें से किसी को call करता है, तो पेज आपके खुले HTML to Frames plugin में आता है और आपके अपने plan और settings के साथ import होता है। आपको किसी भी दूसरे import जैसा ही नतीजा मिलता है: एडिटेबल text, vectors, images, verified Auto Layout और, Pro पर, variables, styles और components।
यह उन designers के लिए उपयोगी है जो AI से prototype बनाते हैं और नतीजे को हाथ से निखारना चाहते हैं, उन developers के लिए जो UI generate करते हैं और उसे design team को सौंपना होता है, और उन teams के लिए जो चाहती हैं कि AI drafts उनकी मौजूदा styles से snap हों।
Guide MCP से AI-generated UI को Figma में लाएं एक पूरे session से गुज़ारती है। Conversion में क्या-क्या बचा रहता है, यह देखने के लिए HTML to Figma पढ़ें, और token व data कैसे संभाले जाते हैं, यह security पर देखें।
AI tool को Figma से connect करना
- 01
Plugin में AI tab खोलें
Figma में HTML to Frames शुरू करें और अपना connection token पाने के लिए AI tab पर जाएं।
- 02
Setup को अपने tool में copy करें
Copy-paste setup को Claude Code, Claude Desktop, Cursor या किसी दूसरे MCP client में paste करें।
- 03
AI से पेज भेजने को कहें
AI अपने लिखे HTML के साथ import_html, या एक address के साथ import_url call करता है।
- 04
Figma में इसकी समीक्षा करें
Plugin खुला रखें; पेज वहीं आता है और एडिटेबल layers के रूप में import होता है।
MCP connection आपके AI को क्या देता है
आपके AI tool के साथ काम करता है
Claude Code, Claude Desktop, Cursor या MCP समझने वाला कोई भी client।
import_html
AI का generate किया HTML, 2 MB तक, पहले save या host किए बिना भेजें।
import_url
AI को address से कोई public पेज import करने दें, उदाहरण के लिए उसे मिला कोई reference।
import_status
AI अपने शुरू किए import की status जांच सकता है।
System के अनुरूप output
Pro पर Snap के साथ, AI drafts आपकी file की सबसे क़रीबी color और text styles से bind होते हैं।
Hashed token
Connection token सिर्फ़ hash के रूप में store होता है, और पेज अधिकतम 30 मिनट तक memory में इंतज़ार करते हैं।
Claude Code, Claude Desktop और Cursor के लिए MCP setup
Model Context Protocol (MCP) एक open standard है जो AI tools को external tools call करने देता है। HTML to Frames अपने import को एक MCP server के रूप में उपलब्ध कराता है, इसलिए MCP सक्षम कोई भी client Figma में पेज भेज सकता है।
Connection details पाना
Figma में HTML to Frames खोलें और AI tab पर जाएं। वहां एक personal token और आपके client के लिए copy-paste setup दिखता है। आपको हाथ से configuration लिखने की ज़रूरत नहीं।
Claude Code
AI tab के setup से server जोड़ें, फिर Claude से कहें कि वह जो पेज बना रहा है उसे Figma में भेजे। Claude file contents के साथ import_html call करेगा।
Claude Desktop
दिए गए snippet से server को Claude Desktop की MCP configuration में जोड़ें, फिर अगर बदलाव नहीं दिखता तो app restart करें। इसके बाद HTML to Frames tools conversation में दिखने लगते हैं।
Cursor
उन्हीं details के साथ Cursor की MCP settings में server जोड़ें। इसके बाद, जब आप editor में काम कर रहे हों, agent कोई generate किया पेज या URL import कर सकता है।
दूसरे MCP clients
MCP servers को support करने वाला कोई भी client उसी token से connect कर सकता है। ध्यान दें कि claude.ai web connectors, जो OAuth इस्तेमाल करते हैं, अभी supported नहीं हैं।
हर client के लिए सटीक steps docs में अपडेट रखे जाते हैं।
AI drafts को maintain करने लायक डिज़ाइन में बदलना
AI से बना HTML छोटी-छोटी बातों में असंगत होता है: हर button पर थोड़ा अलग नीला, लगभग एक जैसे तीन font sizes, कुछ pixels से बदलती spacing। जस का तस import करने पर यह एक बिखरी design file बन जाती है। HTML to Frames आपको import के दौरान ही इसे साफ़ करने के tools देता है।
- Verified Auto Layout. Generate किए CSS के flexbox और grid layouts, जहां हर child 2 px के भीतर रहे, वहां Auto Layout frames बन जाते हैं, इसलिए draft को फिर से व्यवस्थित करना आसान होता है।
- Styles & variables (Pro). बार-बार इस्तेमाल हुए colors और कोई भी CSS custom properties variables बन जाती हैं, और text व shadow styles बनती हैं।
- Snap to my file's styles (Pro). जो values आपके system से बिल्कुल मेल नहीं खातीं, वे आपकी सबसे क़रीबी मौजूदा color और text styles से snap हो जाती हैं, ताकि AI drafts system के अनुरूप आएं।
- Components (Pro). बार-बार आने वाले cards, buttons और list items, instances वाले components बन जाते हैं।
एक व्यावहारिक loop ऐसा दिखता है: AI से layout मांगें, उसे Figma में भेजें, visually adjust करें, फिर अगले iteration के लिए बदलाव AI को बताएं। हर round नए frames के रूप में आता है, इसलिए canvas पर versions का इतिहास बना रहता है।
क्योंकि import आपका अपना plan इस्तेमाल करता है, किसी भी import जैसी ही limits लागू होती हैं। Details के लिए pricing देखें।
AI connection की privacy और limits
किसी AI tool को design file से connect करने पर यह सवाल उठना स्वाभाविक है कि क्या share होता है। MCP connection को ऐसे संभाला जाता है।
Token
आपका connection token हमारी तरफ़ सिर्फ़ hash के रूप में store होता है। इसे password की तरह रखें और shared repositories से दूर रखें: इसी से कोई client आपके plugin को पेज भेज पाता है।
रास्ते में पेज
AI के भेजे पेज अधिकतम 30 मिनट तक memory में इंतज़ार करते हैं जब तक आपका खुला plugin उन्हें न ले ले। URL imports उसी isolated, sandboxed browser में render होते हैं जो हर दूसरे import के लिए इस्तेमाल होता है, और नतीजे कभी disk पर नहीं लिखे जाते।
आपकी Figma file
AI इस connection के ज़रिए आपकी Figma file नहीं पढ़ सकता। Plugin स्वयं आपकी file का content नहीं पढ़ता; यह नए layers लिखता है और सिर्फ़ अपने frames का metadata पढ़ता है।
Limits
import_html2 MB तक का HTML स्वीकार करता है।- पेज आने के लिए Figma में plugin खुला होना चाहिए।
- हर पेज आपके plan पर एक import गिना जाता है।
- claude.ai web connectors (OAuth) अभी supported नहीं हैं।
Data retention की पूरी details security पेज पर हैं।
अक्सर पूछे जाने वाले सवाल
Claude Code, Claude Desktop, Cursor और MCP servers को support करने वाला कोई भी दूसरा client। आप उन्हें plugin के AI tab से connect करते हैं, जो आपको एक token और copy-paste setup देता है। claude.ai web connectors, जो OAuth इस्तेमाल करते हैं, अभी supported नहीं हैं।
तीन: import_html, AI का लिखा HTML भेजता है, 2 MB तक; import_url, किसी public पेज को उसके address से import करता है; और import_status से AI किसी import की progress जांच सकता है। पेज आपके खुले plugin में आते हैं और आपकी settings के साथ import होते हैं।
हाँ। आपके AI tool के भेजे पेज Figma में आपके खुले HTML to Frames plugin को deliver होते हैं। वे अधिकतम 30 मिनट तक memory में इंतज़ार करते हैं, इसलिए अगर plugin थोड़ी देर के लिए बंद हो, तो उस समय के भीतर उसे फिर खोलने पर वह उन्हें ले लेता है।
नहीं। MCP connection AI को सिर्फ़ import के लिए पेज भेजने और उनकी status जांचने देता है। Plugin स्वयं आपकी file का content नहीं पढ़ता; यह नए layers लिखता है और सिर्फ़ अपने बनाए frames का metadata पढ़ता है, जैसे source URL और width।
कोई अलग pricing लागू नहीं होती। AI का भेजा पेज आपके अपने plan से import होता है और किसी भी दूसरे source की तरह एक import गिना जाता है। Free plan में हर महीने 10 imports शामिल हैं, और Pro और Team fair-use सीमा के भीतर unlimited हैं।
Pro पर, Styles & variables और Snap to my file's styles on करें। Exact matches आपके मौजूदा variables और styles को reuse करते हैं, और जो values क़रीब हैं लेकिन बिल्कुल मेल नहीं खातीं, वे आपकी सबसे क़रीबी color और text style से snap हो जाती हैं, ताकि generate किए पेज आपके system से bind होकर आएं।
संबंधित
Web को दोबारा बनाना बंद करें।
Link paste करें और कुछ ही सेकंड में असली, एडिटेबल, रिस्पॉन्सिव Figma layers पाएं। शुरुआत free — हर महीने 10 imports।
कोई credit card नहीं। Pro, Figma के अंदर ही खरीदा जाता है।
जल्द ही Figma Community पर