प्लगइन या एक मैनुअल कमांड से Claude Code में Figma MCP सर्वर सेट करें, दो क्लिक में ऑथेंटिकेट करें और देखें कि यह कौन से रीड और राइट टूल्स देता है। इसमें पाँच स्किल्स, Code Connect, सीट के हिसाब से रेट लिमिट और आम गड़बड़ियों के समाधान शामिल हैं।
Claude Code में Figma का लिंक चिपकाएँ और वह एक लाइन कोड लिखने से पहले फ़्रेम का लेआउट, स्पेसिंग, रंग और कंपोनेंट पढ़ सकता है। Figma MCP सर्वर का यही सबसे बड़ा दावा है, और सेटअप में दो कमांड और ब्राउज़र का एक क्लिक लगता है। उसके बाद का काम सही टूल चुनने, रेट लिमिट के भीतर रहने और एजेंट को इतना संदर्भ देने का है कि वह अपने बटन खुद न गढ़े।
यह लेख सटीक सेटअप, सर्वर के दिए टूल्स, Figma के राइट वर्कफ़्लो के लिए दी गई स्किल्स, कॉपी किया जा सकने वाला फ़्रेम-टू-कोड रूटीन और उन सीमाओं को समझाता है जो लोगों को उलझाती हैं। विवरण Figma के डेवलपर डॉक्युमेंटेशन पर आधारित हैं, जैसा वह अक्टूबर 2026 में है, इसलिए अगर आपकी मशीन पर कोई कमांड अलग दिखे तो वे पेज ज़रूर देखें।
Figma MCP सर्वर एक पुल है। एक तरफ़ आपकी Figma फ़ाइल होती है: लेयर, वेरिएबल, कंपोनेंट, FigJam बोर्ड और Make रिसोर्स। दूसरी तरफ़ एक MCP क्लाइंट होता है, यहाँ Claude Code। बीच में टूल्स का एक सेट है जो एजेंट को डिज़ाइन के बारे में सवाल पूछने देता है और, सही अनुमतियों के साथ, उसे बदलने भी देता है।
Figma के डॉक्स पाँच काम बताते हैं। यह सर्वर कैनवास पर नेटिव Figma कंटेंट बना और बदल सकता है, चुने गए फ़्रेम को कोड में बदल सकता है, वेरिएबल, कंपोनेंट और लेआउट डेटा जैसा डिज़ाइन संदर्भ निकाल सकता है, Make फ़ाइलों से रिसोर्स ला सकता है, और Code Connect के ज़रिए कोड को आपके डिज़ाइन सिस्टम के साथ मिलाकर रख सकता है।
असली बदलाव स्क्रीनशॉट से स्ट्रक्चर की ओर जाने में है। स्क्रीनशॉट मॉडल को बताता है कि बटन दिखता कैसा है। डिज़ाइन संदर्भ बताता है कि बटन एक कंपोनेंट का इंस्टेंस है, एक नामित स्पेसिंग वेरिएबल इस्तेमाल करता है और एक तय गैप वाली ऑटो-लेआउट पंक्ति में बैठा है। उस स्ट्रक्चर से लिखा गया कोड मर्ज करने लायक चीज़ के कहीं ज़्यादा करीब होता है।
Figma सर्वर के दो वर्ज़न देता है, और यह चुनाव मायने रखता है क्योंकि कुछ टूल सिर्फ़ एक पर मौजूद हैं।
| रिमोट सर्वर | डेस्कटॉप सर्वर | |
|---|---|---|
| कनेक्शन | Figma का होस्टेड एंडपॉइंट, https://mcp.figma.com/mcp | लोकल, Figma डेस्कटॉप ऐप के ज़रिए |
| डेस्कटॉप ऐप ज़रूरी | नहीं | हाँ |
| टूल सेट | सबसे व्यापक सेट, जिसमें सभी सिर्फ़-रिमोट टूल शामिल हैं | छोटा सेट |
| किसके लिए बेहतर | ज़्यादातर लोग | Figma for Government डिप्लॉयमेंट, सिर्फ़-लोकल सेटअप |
Figma रिमोट सर्वर को ज़्यादातर यूज़र्स के लिए सबसे अच्छा विकल्प बताता है, और इस लेख में आगे वही इस्तेमाल होता है।
आपको एक Figma Design, Make या FigJam फ़ाइल चाहिए, उस पर view या edit की अनुमति चाहिए, और आदर्श रूप से Full या Dev सीट। बाकी सीट टाइप भी कनेक्ट होती हैं, पर उनका मासिक कोटा बहुत छोटा होता है (संख्याएँ नीचे की लिमिट वाले सेक्शन में हैं)। केवल वे MCP क्लाइंट कनेक्ट हो सकते हैं जो Figma की MCP कैटलॉग में सूचीबद्ध हैं, और Claude Code का वहाँ अपना सेटअप पेज है।
दो रास्ते हैं और दोनों एक ही जगह पहुँचते हैं। अगर आपको Figma के स्किल्स भी चाहिए तो प्लगइन चुनें, और अगर आपको न्यूनतम कॉन्फ़िग पसंद है तो मैनुअल कमांड।
claude plugin install figma@claude-plugins-official
Figma इसी रास्ते की सिफ़ारिश करता है। प्लगइन MCP सर्वर सेटिंग्स और आम वर्कफ़्लो के लिए Agent Skills, दोनों को साथ लाता है, इसलिए एक ही इंस्टॉल से आपको सर्वर भी मिलता है और वे निर्देश भी जो राइट टूल्स को सही ढंग से चलाते हैं।
claude mcp add --transport http figma https://mcp.figma.com/mcp
स्कोप फ़्लैग के बिना सर्वर सिर्फ़ उसी प्रोजेक्ट के लिए रजिस्टर होता है जिसमें आप अभी हैं। अगर इसे हर जगह चाहिए, तो --scope user जोड़ें:
claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp
यूज़र स्कोप का मतलब है कि आपको हर रिपॉज़िटरी के लिए इंस्टॉल दोहराना नहीं पड़ेगा।
सर्वर ब्राउज़र साइन-इन इस्तेमाल करता है, इसलिए किसी कॉन्फ़िग फ़ाइल में कुछ भी पेस्ट नहीं करना पड़ता।
/mcp टाइप करें।Authentication successful. Connected to figma दिखना चाहिए।पुष्टि के लिए एक बार फिर /mcp चलाएँ कि सर्वर कनेक्टेड दिख रहा है। फिर Claude से whoami टूल कॉल करने को कहें। यह ऑथेंटिकेटेड यूज़र और प्लान लौटाता है, जिससे तुरंत पता चल जाता है कि आपकी सीट पर उपयोगी कोटा है या नहीं।
💡 टिप: सेशन के बीच में टूल गायब हों, तो सबसे पहले
/mcpदेखें। यह कनेक्शन की स्थिति दिखाता है और फ़ाइलें बदले बिना फिर से ऑथेंटिकेट करने देता है।
Figma के टूल्स रेफ़रेंस में दर्जनों टूल हैं। आप रोज़ मुट्ठी भर ही इस्तेमाल करेंगे, इसलिए उन्हीं से शुरू करें और बाकी को तब तक छोड़ दें जब तक कोई काम उन्हें न माँगे।
| टूल | यह क्या करता है | केवल रिमोट |
|---|---|---|
get_design_context | किसी लेयर या चयन का डिज़ाइन संदर्भ निकालता है | नहीं |
get_metadata | चयन का कम विवरण वाला XML आउटलाइन लौटाता है | नहीं |
get_screenshot | चयन का स्क्रीनशॉट लेता है | नहीं |
get_variable_defs | चयन में इस्तेमाल हुए वेरिएबल और स्टाइल लौटाता है | नहीं |
get_code_connect_map | नोड ID से कोड कंपोनेंट मैपिंग लौटाता है | नहीं |
get_code_connect_suggestions | कंपोनेंट-टू-कोड मैपिंग सुझाता है | नहीं |
get_context_for_code_connect | टेम्पलेट के लिए कंपोनेंट मेटाडेटा देता है | हाँ |
search_design_system | कंपोनेंट, वेरिएबल और स्टाइल के लिए लाइब्रेरी खोजता है | हाँ |
get_libraries | सब्सक्राइब्ड और उपलब्ध डिज़ाइन लाइब्रेरी की सूची देता है | हाँ |
get_figjam | FigJam डायग्राम को XML में बदलता है | नहीं |
get_motion_context | एनिमेशन डेटा निकालता है | नहीं |
download_assets | एक्सपोर्ट और मूल सोर्स इमेज डाउनलोड करता है | हाँ |
get_design_context से शुरू करें। "यह फ़्रेम बनाओ" वाले काम के पीछे यही मुख्य टूल है। इसके साथ get_screenshot जोड़ें ताकि एजेंट के पास दृश्य लक्ष्य हो, और get_variable_defs ताकि रंग और स्पेसिंग अनुमान से लिए हुए हेक्स वैल्यू के बजाय आपके टोकन से आएँ। जब फ़्रेम बहुत बड़ा हो, तो get_metadata एक कम विवरण वाला आउटलाइन देता है जिससे परत-दर-परत विवरण लेने से पहले पूरे पेज का नक्शा बन सकता है।
| टूल | यह क्या करता है | केवल रिमोट |
|---|---|---|
use_figma | बनाने, बदलने और जाँचने का सामान्य-उद्देश्य टूल | हाँ |
generate_figma_design | इंटरफ़ेस से डिज़ाइन लेयर बनाता है | हाँ |
generate_diagram | Mermaid से FigJam डायग्राम बनाता है | हाँ |
create_new_file | खाली Design, FigJam या Slides फ़ाइल बनाता है | हाँ |
generate_image | डाउनलोड करने योग्य रास्टर इमेज बनाता है | हाँ |
upload_assets | Figma फ़ाइल में इमेज अपलोड करता है | हाँ |
add_code_connect_map | Figma नोड ID को कोड कंपोनेंट से जोड़ता है | नहीं |
send_code_connect_mappings | सुझाई गई कंपोनेंट मैपिंग की पुष्टि करता है | नहीं |
सर्वर शेडर और जनरेटिव प्लगइन के लिए भी टूल देता है, साथ ही छह weave_* टूल भी, जो क्रेडिट-आधारित Weave वर्कफ़्लो चलाते हैं। ज़्यादातर फ़्रंट-एंड काम में इनकी ज़रूरत नहीं पड़ती। एक प्रॉम्प्ट नाम से जानने लायक है: create_design_system_rules, जो एक नियम फ़ाइल बनाता है ताकि एजेंट का संदर्भ आपके कोडबेस से मेल खाए।
राइट टूल्स शक्तिशाली हैं और उन्हें गलत तरीके से इस्तेमाल करना आसान है। Figma के डॉक्स स्किल्स की सूची देते हैं जिनकी एजेंट को मेल खाते वर्कफ़्लो के लिए ज़रूरत होती है, और प्लगइन इंस्टॉल उन्हें साथ ले आता है। अगर आपने मैनुअल रास्ता चुना है, तो अपने क्लाइंट के लिए Figma के स्किल्स अलग से इंस्टॉल करें।
| स्किल | किसके लिए इस्तेमाल होती है |
|---|---|
figma-use | Figma Design वर्कफ़्लो |
figma-use-figjam | FigJam ऑपरेशन |
figma-use-slides | Figma Slides |
figma-shaders | शेडर बनाना और अपडेट करना |
figma-generative-plugins | जनरेटिव प्लगइन बनाना और अपडेट करना |
अगर आपका काम ज़्यादातर डिज़ाइन पढ़ने और कोड लिखने का है, तो शायद आपको इनका पता भी न चले। ये तब मायने रखती हैं जब आप Claude Code से Figma के अंदर कुछ बनवाना या बदलवाना चाहते हैं।
परफ़ेक्ट टूल्स के साथ भी एजेंट आपके कन्वेंशन नहीं जानता। create_design_system_rules प्रॉम्प्ट चलाएँ और उसे नियम फ़ाइल का ड्राफ़्ट बनाने दें, फिर उसे उतना ही रखें जितना आपकी टीम असल में लागू करती है, और उसे CLAUDE.md में सहेजें। एक छोटा उदाहरण:
Figma to code rules:
- Reuse components from src/components/ui before creating new ones.
- Map Figma variables to our CSS tokens. Never hardcode hex values.
- Use the project spacing scale, not the pixel values from the frame.
- Treat Figma output as a reference. Match our file structure and naming.
ऐसी चार लाइनें "एजेंट ने फिर से नया बटन क्यों बनाया" वाली ज़्यादातर शिकायतें खत्म कर देती हैं।
get_design_context कॉल करता है, और आम तौर पर get_screenshot और get_variable_defs भी।एक प्रॉम्प्ट जो अच्छा काम करता है:
Implement this frame using our existing components and tokens.
Do not add new dependencies. Figma link: <paste link here>
पहले पास के बाद कुछ भी चलाने से पहले डिफ़ में चार बातें जाँचें:
💡 टिप: एक समय में एक सेक्शन पर काम करें। पूरे पेज का फ़्रेम बहुत सारा संदर्भ और बहुत सारा कोड बनाता है, और आपका रीड-कॉल कोटा उम्मीद से जल्दी खत्म होता है।
Code Connect वह तरीका है जिससे Figma को पता चलता है कि उसका Button कंपोनेंट असल में src/components/ui/Button.tsx है। एक बार यह मैपिंग बन जाए, तो Claude नया मार्कअप लिखने के बजाय असली कंपोनेंट इम्पोर्ट करता है।
इस लूप को चार टूल संभालते हैं। get_code_connect_map मौजूदा मैपिंग पढ़ता है। get_code_connect_suggestions नई मैपिंग सुझाता है, send_code_connect_mappings उन मैपिंग की पुष्टि करता है जो आप स्वीकार करते हैं, और add_code_connect_map एक ही मैपिंग सीधे लिखता है। आख़िरी टूल रेट लिमिट से छूट प्राप्त है, जो पूरी लाइब्रेरी मैप करते समय काम आता है।
ये आँकड़े लिखे जाने के समय Figma के रेट लिमिट और एक्सेस पेज से लिए गए हैं। Figma इन्हें बदल सकता है, इसलिए टीम में रोलआउट की योजना बनाने से पहले पेज पर पुष्टि कर लें।
| सीट टाइप | Starter | Professional | Organization | Enterprise |
|---|---|---|---|---|
| View, Collab | प्रति माह 20 तक | प्रति माह 20 तक | प्रति माह 20 तक | प्रति माह 20 तक |
| Dev, Full | प्रति दिन 200 तक, प्रति मिनट 10 | प्रति दिन 200 तक, प्रति मिनट 15 | प्रति दिन 600 तक, प्रति मिनट 20 | तालिका में निर्दिष्ट नहीं |
ये लिमिट उन टूल्स पर लागू होती हैं जो Figma से डेटा पढ़ते हैं। add_code_connect_map, create_new_file और whoami छूट प्राप्त हैं।
सीट अनुभव तय करती है। View सीट वाला डिज़ाइनर कनेक्ट करके देख सकता है, पर रोज़ का वर्कफ़्लो Full या Dev सीट वाले डेवलपर्स का है। अगर आपकी टीम में केवल दो लोगों के पास ये सीट हैं, तो उन्हें ही कोड जनरेट करने दें, और बाकी लोग पुल रिक्वेस्ट की समीक्षा करें।
💡 टिप: अगर Claude हर फ़्रेम पर तीन रीड टूल कॉल करता है, तो 200 कॉल प्रति दिन बहुत जल्दी खत्म हो जाती हैं। पूरा संदर्भ लेने से पहले एक सेक्शन माँगें, और
get_metadataको सही लेयर चुनने दें।
टूल दिखाई नहीं देते। /mcp चलाएँ। अगर figma सूची में है पर कनेक्टेड नहीं, तो उसे चुनें और फिर से ऑथेंटिकेट करें। अगर वह पूरी तरह गायब है, तो इंस्टॉल कमांड दोहराएँ और Claude Code को रीस्टार्ट करें।
आउटपुट आपके कंपोनेंट को नज़रअंदाज़ करता है। यह टूल की नहीं, संदर्भ की समस्या है। नियम फ़ाइल को CLAUDE.md में जोड़ें, अपने शीर्ष दस कंपोनेंट के लिए Code Connect मैपिंग बनाएँ, और प्रॉम्प्ट को नए कंपोनेंट लिखने से पहले मौजूदा कंपोनेंट दोबारा इस्तेमाल करने को कहें।
काम के बीच में लिमिट लग जाती है। दायरा छोटा करें, whoami से अपनी सीट जाँचें, और भारी काम Full या Dev सीट पर ले जाएँ। View या Collab सीट महीने में लगभग 20 कॉल देती है, जो एक डेमो है, वर्कफ़्लो नहीं।
ज़्यादातर Figma फ़्रेम में फ़ोटो की जगह ग्रे प्लेसहोल्डर आयत होते हैं, और जेनरेट हुआ कोड उसी फीकेपन को अपना लेता है। हैंडऑफ़ से पहले उन्हें असली-सी दिखने वाली इमेज से भर दें, तो पहली ही बार में बिल्ड तैयार लगने लगता है।
PicassoIA पर टेक्स्ट-टू-इमेज कैटलॉग में Seedream 5 Pro, GPT Image 2, Flux 2 Pro, Nano Banana Pro और P Image शामिल हैं। एक हीरो फ़ोटो जनरेट करें, फिर उसे हाथ से फ़्रेम में डालें या Claude से upload_assets के ज़रिए डलवाएँ। Figma का अपना generate_image टूल है, पर एक समर्पित इमेज मॉडल आपको लेंस, रोशनी और कंपोज़िशन पर ज़्यादा नियंत्रण देता है।
मोशन के लिए वही स्टिल इमेज Seedance 2.5 Lite, Wan 3, Veo 3.1 Lite, LTX 2.5 Fast या Kling v3 Video जैसे वीडियो मॉडल से एक छोटी क्लिप में बदलें। हर मॉडल के पेज पर उसका इमेज इनपुट विकल्प देखें। हेडलाइन के पीछे पाँच सेकंड का लूप अक्सर लैंडिंग पेज को बस इतना ही चाहिए होता है।
उसी प्लेटफ़ॉर्म पर सोचने का काम भी हो सकता है। Claude Sonnet 5 PicassoIA पर एक टेक्स्ट मॉडल के रूप में चलता है जो इमेज पढ़ सकता है, इसलिए आपके डिज़ाइन सिस्टम के स्क्रीनशॉट से नियम फ़ाइल का ड्राफ़्ट बनाने का यह तेज़ तरीका है।
low, सबसे तेज़ और सस्ते जवाब के लिए थिंकिंग बंद रखता है। जब आउटपुट को कई कंपोनेंट में तर्क करना हो तो medium या high इस्तेमाल करें, और मुश्किल मल्टी-फ़ाइल काम के लिए xhigh या max।💡 टिप: ज़्यादा गहरे रीज़निंग के लिए उसी प्लेटफ़ॉर्म पर Claude Fable 5 और Claude Opus 4.7 उपलब्ध हैं।
अब आपके पास पूरा लूप है। सर्वर कनेक्ट करें, नियम फ़ाइल जोड़ें, एक समय में एक सेक्शन बनाएँ, और Code Connect से अपने कंपोनेंट मैप करें ताकि आउटपुट लगातार बेहतर होता रहे।
जिस हिस्से को छोड़ना आसान है वह इमेजरी है। तैयार इंटरफ़ेस को असली फ़ोटो और थोड़ी मोशन चाहिए, और Picasso IA दोनों के मॉडल एक ही जगह देता है। एक इमेज मॉडल चुनें, जो हीरो शॉट चाहिए उसका वर्णन करें, और देखें कि वह आपके बनाए फ़्रेम को कैसे बदलता है। फिर उसी फ़ोटो पर एक वीडियो मॉडल आज़माएँ और दोनों संस्करणों की साथ-साथ तुलना करें। PicassoIA खोलें और आज ही अपनी पहली हीरो इमेज बनाएँ।
अपनी भाषा चुनें
