AI to Figma: Claude और Cursor का UI MCP से Figma में भेजें

AI coding assistants अब कुछ ही मिनटों में एक दमदार landing पेज, settings screen या dashboard बना सकते हैं। समस्या यह है कि वह UI पहुंचता कहां है: एक code editor या local preview में, उस Figma file से बहुत दूर जहां आपकी team डिज़ाइन की review, annotation और सुधार करती है।

यह guide दिखाती है कि AI to Figma connection से इस दूरी को कैसे पाटें। HTML to Frames एक MCP connection देता है जिससे Claude Code, Claude Desktop, Cursor या कोई भी MCP client पेजों को सीधे आपके खुले Figma plugin में भेज सकता है, जहां वे Auto Layout के साथ असली, एडिटेबल layers में बदल जाते हैं।

यहां "AI to Figma" का क्या मतलब है

लोग दो बहुत अलग चीज़ों को AI to Figma कहते हैं:

1. AI जो prompt से Figma के अंदर डिज़ाइन generate करता है।
2. AI जो HTML और CSS लिखता है, और एक bridge जो उस code को Figma layers में बदलता है।

HTML to Frames दूसरा काम करता है। आपका AI tool वही करता रहता है जिसमें वह अच्छा है, यानी front-end code लिखना, और plugin वही conversion करता है जो वह किसी भी web पेज के लिए करता है: frames, text, vectors, images, variables और Auto Layout। नतीजे की quality live site import करने जैसी ही होती है, क्योंकि यह उसी capture pipeline से गुज़रता है। Product overview के लिए AI to Figma देखें।

MCP connection कैसे काम करता है

Model Context Protocol (MCP) AI tools के लिए external tools call करने का एक standard तरीका है। जब आप HTML to Frames को MCP server के रूप में connect करते हैं, तो आपके AI tool को तीन tools मिलते हैं:

पेज Figma में आपके खुले plugin में आता है और आपके अपने plan से import होता है, इसलिए सामान्य plan नियम लागू होते हैं: हर import में screens, styles और variables, components वगैरह।

AI tool को वापस क्या मिलता है

AI को आपकी Figma file वापस नहीं मिलती। उसे tool call का एक response मिलता है जो पुष्टि करता है कि पेज सौंप दिया गया, और वह उस import की स्थिति जांचने के लिए import_status call कर सकता है। डिज़ाइन का असली काम Figma में, plugin के अंदर होता है, जहां आप frames, layers, Auto Layout share और कोई भी warnings वाली result screen देखते हैं। यह जानबूझकर है: plugin आपकी Figma file का content नहीं पढ़ता, इसलिए आपकी file के बारे में कुछ भी AI तक वापस नहीं जाता।

Setup: plugin के AI tab से अपना AI tool connect करें

Setup हर AI client के लिए एक बार करना होता है। सब कुछ plugin से शुरू होता है।

1. Figma में HTML to Frames खोलें और AI tab पर जाएं।
2. अपना token पाएं। AI tab आपको एक connection token देता है। इसे password की तरह रखें।
3. अपना client चुनें। AI tab supported clients के लिए copy-paste setup दिखाता है।
4. Setup को अपने client में paste करें ठीक वैसे ही जैसे दिखाया गया है (हर client की details नीचे)।
5. Client को restart या reload करें ताकि वह नया MCP server पहचान ले।
6. काम करते समय Figma में plugin खुला रखें। पेज खुले plugin को deliver होते हैं।

Claude Code

Claude Code अपनी configuration से MCP servers पढ़ता है। AI tab से Claude Code के लिए मिला setup copy करें और निर्देश के अनुसार run या paste करें। फिर नया session शुरू करें और Claude से उसके tools की list मांगें; आपको import_html, import_url और import_status दिखने चाहिए।

Claude Desktop

Claude Desktop MCP servers को अपनी configuration file में रखता है, जिसे आप app की developer settings से खोल सकते हैं। AI tab का snippet उस file में paste करें, save करें, और Claude Desktop को पूरी तरह restart करें। Tools एक नई chat के tools menu में दिखते हैं।

Cursor

Cursor अपनी settings में MCP servers की list रखता है। AI tab के snippet से एक नया server जोड़ें, save करें, और पुष्टि करें कि server तीन tools के साथ connected दिख रहा है।

कोई भी दूसरा MCP client

अगर आपका tool MCP समझता है, तो वही token और setup लागू होते हैं। AI tab का generic setup इस्तेमाल करें और उसे अपने client के servers register करने के तरीके के हिसाब से ढालें।

अभी supported नहीं: claude.ai web connectors

claude.ai web connectors (OAuth) अभी supported नहीं हैं। अगर आप Claude के browser version में काम करते हैं, तो वहां HTML generate करें, उसे save करें, और इसके बजाय plugin के Local file या Paste code source से import करें। या task को Claude Code या Claude Desktop पर ले जाएं, जो आज MCP से connect होते हैं।

Privacy: आपके token और पेजों का क्या होता है

AI workflows से यह जायज़ सवाल उठता है कि code और designs कहां-कहां जाते हैं। Connection यह करता है:

• आपका connection token सिर्फ़ hash के रूप में store होता है। Service उसे जांच सकती है, लेकिन token को स्वयं नहीं रखती।
• पेज अधिकतम 30 मिनट तक memory में इंतज़ार करते हैं। अगर आपका plugin उस समय में पेज नहीं लेता, तो वह हट जाता है।
• Rendering एक isolated, sandboxed browser में होती है। नतीजा एक बार deliver होता है, फिर memory से delete हो जाता है, और कभी disk पर नहीं लिखा जाता।
• Plugin, extension या website में कोई cookies, analytics या tracking pixels नहीं।
• हमें Figma से कभी आपका नाम या email नहीं मिलता; account identifier आपकी Figma user id से बनाया जाता है।

पूरा विवरण security पेज पर है।

जानने लायक limits

• HTML size: import_html 2 MB तक स्वीकार करता है। बड़ी base64 images कम से कम inline करें; जब हो सके hosted images से link करें।
• import_url के लिए सिर्फ़ public URLs. अगर AI का preview localhost पर चल रहा है, तो या तो AI से import_html के ज़रिए सीधे HTML भिजवाएं, या चल रहे पेज को Chrome extension से capture करें, जो localhost और logged-in पेज संभालता है।
• Plan usage लागू होता है। हर पेज आपके plan पर एक import गिना जाता है। Free हर महीने 10 imports और हर import में 1 screen देता है; Pro और Team fair use के तहत unlimited हैं, हर import में 4 screens तक के साथ। Pricing देखें।
• किसी भी पेज जैसे ही conversion नियम. Iframes, WebGL canvases और बिना poster के videos अपने box की screenshot image बन जाते हैं। Skew और 3D transforms अभी convert नहीं होते।

आज़माने लायक prompts

Connect होने के बाद, आप AI से वैसे ही बात करते हैं जैसे आमतौर पर करते हैं और उसे नतीजा Figma में भेजने को कहते हैं। कुछ prompts जो अच्छा काम करते हैं:

1. "Flexbox वाले सादे HTML और CSS से तीन tiers वाला pricing पेज बनाओ, फिर उसे import_html से Figma में भेजो।"
2. "जो settings screen तुमने अभी बनाई, उसकी CSS inline करो और उसे Figma में import करो। फिर import_status जांचो।"
3. "हमारी staging site इस public URL पर है। Pricing और signup पेजों को import_url से Figma में import करो।"
4. "इस hero section के दो variations बनाओ, एक left-aligned headline वाला और एक centred। हर एक को अलग import के रूप में Figma में भेजो।"
5. "इस card grid को colors के लिए CSS custom properties इस्तेमाल करते हुए दोबारा लिखो, फिर import करो ताकि variables भी आएं।"

साफ़ Figma output के लिए prompting

जब आप AI की CSS को थोड़ा दिशा देते हैं, तो वह बेहतर imports लिखता है:

• Siblings के बीच margins के बजाय gap के साथ flexbox और grid मांगें। ये Auto Layout से साफ़ map होते हैं; देखें CSS flexbox और grid से Auto Layout।
• Colors के लिए CSS custom properties मांगें। Styles & variables on होने पर (Pro), --brand-primary एक brand/primary variable बन जाता है।
• Images में बेक किए text के बजाय असली text मांगें, ताकि हर heading एडिटेबल रहे।
• हर import में एक पेज मांगें; लंबे multi-screen documents की review मुश्किल होती है।

Design और code का loop

असली फ़ायदा एक import में नहीं है। यह एक loop है जिसमें design और code का भटकना रुक जाता है।

1. Prompt: AI code में पहला version बनाता है।
2. Import: AI उसे import_html या import_url से Figma में भेजता है।
3. Figma में review: designers Auto Layout frames के साथ spacing, type, color और layout adjust करते हैं, comments जोड़ते हैं और विकल्प तलाशते हैं।
4. बदलाव वापस बताएं: AI को बताएं कि क्या बदला, या संबंधित values paste करें, और उसे code update करने दें।
5. Re-import करके पुष्टि करें कि code अब मेल खाता है, और पिछले frame से तुलना करें।

किसे फ़ायदा होता है

• Designers AI prototypes को हाथ से दोबारा बनाना बंद करते हैं और एडिटेबल frames से शुरू करते हैं।
• Front-end developers को screenshots export किए बिना असली output पर design review मिलता है।
• Product managers किसी prompt को stakeholder meeting के लिए review लायक Figma पेज में बदल सकते हैं।
• Solo builders हर iteration का visual record एक file में रखते हैं।

AI to Figma की दूसरे रास्तों से तुलना

तीनों plugin रास्ते एक ही engine इस्तेमाल करते हैं। MCP बस copy-paste step हटा देता है और AI को कमान सौंप देता है। Auto Layout verified है: हर child की position 2 px के भीतर जांची जाती है, और अगर कोई layout नहीं टिकता, तो आसान plan आज़माया जाता है या frame absolute positions रखता है। डिज़ाइन कभी नहीं टूटता। इस पर और Auto Layout explained में।

Troubleshooting

• AI कहता है कि tool उपलब्ध नहीं है। Server जोड़ने के बाद client restart करें, और जांचें कि snippet बिना बदलाव के paste हुआ।
• Import कभी दिखता ही नहीं। पक्का करें कि Figma में plugin खुला है। पेज 30 मिनट तक इंतज़ार करते हैं, इसलिए plugin खोलें और वह उस समय के भीतर उन्हें ले लेगा।
• Token reject हो गया। AI tab से नया token generate करें और client का setup update करें।
• Layout ठीक नहीं दिखता। Result screen के diagnostics जांचें, जो बताते हैं कि कोई frame absolute क्यों रहा, और AI से उस section के लिए flexbox या grid इस्तेमाल करने को कहें।

शुरुआत करें

Plugin खोलें, AI tab पर जाएं, और एक client connect करें। अपने AI tool से एक छोटा component बनाकर Figma में भेजने को कहें; पूरी screen के लिए उस पर भरोसा करने से पहले आप देख लेंगे कि वह कैसे व्यवहार करता है। Docs AI tab को कवर करते हैं, और features में वह सब है जो import support करता है।