Figma

Figma MCP सर्वर गाइड

Figma MCP सर्वर Figma को सीधे आपके वर्कफ़्लो में लाता है, जो Figma डिज़ाइन फ़ाइलों से कोड जनरेट करने वाले AI एजेंटों को महत्वपूर्ण डिज़ाइन जानकारी और संदर्भ प्रदान करता है।

[!NOTE] Figma MCP सर्वर टूल्स पर रेट सीमाएँ लागू होती हैं जो Figma से डेटा पढ़ते हैं। कुछ टूल्स, जैसे कि Figma फ़ाइलों में लिखने वाले, रेट सीमाओं से मुक्त हैं।

स्टार्टर प्लान या भुगतान किए गए प्लान पर View या Collab सीट वाले उपयोगकर्ता प्रति माह अधिकतम 6 टूल कॉल तक सीमित रहेंगे।

Professional, Organization, या Enterprise प्लान पर Dev या Full सीट वाले उपयोगकर्ताओं के लिए प्रति मिनट रेट सीमाएँ हैं, जो Tier 1 Figma REST API के समान सीमाओं का पालन करती हैं। Figma की REST API की तरह, Figma रेट सीमाओं को बदलने का अधिकार सुरक्षित रखता है।

Figma MCP सर्वर दस्तावेज़ों के पूरे सेट के लिए, हमारा डेवलपर दस्तावेज़ीकरण देखें। Figma MCP सर्वर और संबंधित संसाधनों (इन स्किल्स सहित) का उपयोग करके, आप Figma डेवलपर शर्तों से सहमत होते हैं। ये स्किल्स वर्तमान में बीटा सुविधा के रूप में उपलब्ध हैं।

विशेषताएँ

• कैनवास पर लिखें (केवल रिमोट सर्वर): अपने MCP क्लाइंट से सीधे मूल Figma सामग्री बनाएं और संशोधित करें। सही स्किल्स के साथ, एजेंट आपके डिज़ाइन सिस्टम को स्रोत के रूप में उपयोग करके आपकी Figma फ़ाइलों में फ़्रेम, कंपोनेंट्स, वेरिएबल्स और ऑटो लेआउट बना और अपडेट कर सकते हैं।

  नोट: हम Figma के AI एजेंटों के समर्थन को तेज़ी से बेहतर बना रहे हैं। कैनवास पर लिखने की सुविधा अंततः उपयोग-आधारित भुगतान वाली सुविधा होगी, लेकिन वर्तमान में बीटा अवधि के दौरान मुफ्त उपलब्ध है।

• चयनित फ़्रेम से कोड जनरेट करें

  Figma में एक फ़्रेम चुनें और उसे कोड में बदलें। नए फ़्लो बनाने या ऐप सुविधाओं पर पुनरावृत्ति करने वाली उत्पाद टीमों के लिए बहुत उपयोगी।

• डिज़ाइन संदर्भ निकालें

  वेरिएबल्स, कंपोनेंट्स और लेआउट डेटा को सीधे अपने IDE में लाएं। यह विशेष रूप से डिज़ाइन सिस्टम और कंपोनेंट-आधारित वर्कफ़्लो के लिए उपयोगी है।

• Code Connect के साथ स्मार्ट कोडिंग

  अपने वास्तविक कंपोनेंट्स का पुनः उपयोग करके आउटपुट गुणवत्ता बढ़ाएं। Code Connect आपके जनरेट किए गए कोड को आपके कोडबेस के अनुरूप रखता है।

  Code Connect के बारे में और जानें →

• वेब पेजों से Figma डिज़ाइन जनरेट करें (रोलआउट हो रहा है)

  अपने AI कोडिंग एजेंट से सीधे वेब पेज को कैप्चर, इम्पोर्ट या Figma डिज़ाइन में बदलें।

इंस्टॉलेशन और सेटअप

Figma MCP सर्वर से कनेक्ट करें

विभिन्न MCP क्लाइंट्स को थोड़े अलग सेटअप की आवश्यकता होती है। Figma MCP सर्वर से कनेक्ट करने के लिए अपने विशिष्ट क्लाइंट के लिए नीचे दिए गए निर्देशों का पालन करें।

VS Code

1. ⌘ Shift P शॉर्टकट का उपयोग करके MCP:Add Server खोजें।
2. HTTP चुनें।
3. सर्च बार में सर्वर url https://mcp.figma.com/mcp पेस्ट करें। फिर Enter दबाएं।
4. जब सर्वर ID के लिए संकेत दिया जाए, तो figma दर्ज करें।
5. चुनें कि आप इस सर्वर को वैश्विक रूप से या केवल वर्तमान वर्कस्पेस के लिए जोड़ना चाहते हैं। एक बार पुष्टि हो जाने पर, आपको अपनी mcp.json फ़ाइल में इस तरह का कॉन्फ़िगरेशन दिखाई देगा:

{
  "servers": {
    "figma": {
      "type": "http",
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

6. ⌥⌘B या ⌃⌘I का उपयोग करके चैट टूलबार खोलें और Agent मोड पर स्विच करें।
7. चैट खुली होने पर, यह पुष्टि करने के लिए #get_design_context टाइप करें कि Figma MCP सर्वर टूल्स उपलब्ध हैं। यदि कोई टूल सूचीबद्ध नहीं है, तो VS Code को पुनः आरंभ करें।

[!NOTE] VS Code में MCP का उपयोग करने के लिए आपके खाते पर GitHub Copilot सक्षम होना चाहिए।

अधिक जानकारी के लिए, VS Code का आधिकारिक दस्तावेज़ीकरण देखें।

Cursor

Cursor में Figma MCP सर्वर सेट करने का अनुशंसित तरीका Figma प्लगइन इंस्टॉल करना है, जिसमें MCP सर्वर सेटिंग्स के साथ-साथ सामान्य वर्कफ़्लो के लिए Agent Skills भी शामिल हैं।

Cursor के एजेंट चैट में निम्न कमांड टाइप करके प्लगइन इंस्टॉल करें:

/add-plugin figma

प्लगइन में शामिल हैं:

• Figma MCP सर्वर के लिए MCP सर्वर कॉन्फ़िगरेशन
• डिज़ाइन लागू करने, Code Connect के माध्यम से कंपोनेंट्स कनेक्ट करने और डिज़ाइन सिस्टम नियम बनाने के लिए स्किल्स
• Figma MCP सर्वर से उचित एसेट हैंडलिंग के लिए नियम

{
  "mcpServers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

Claude Code

Claude Code में Figma MCP सर्वर सेट करने का अनुशंसित तरीका Figma प्लगइन इंस्टॉल करना है, जिसमें MCP सर्वर सेटिंग्स के साथ-साथ सामान्य वर्कफ़्लो के लिए Agent Skills भी शामिल हैं।

Anthropic के आधिकारिक प्लगइन मार्केटप्लेस से प्लगइन इंस्टॉल करने के लिए निम्न कमांड चलाएं।

claude plugin install figma@claude-plugins-official

Anthropic के Claude Code Plugins और Agent Skills के बारे में और जानें।

claude mcp add --transport http figma https://mcp.figma.com/mcp

Gemini CLI

निम्न कमांड चलाकर Gemini CLI के लिए Figma एक्सटेंशन इंस्टॉल करें:

gemini extensions install https://github.com/figma/mcp-server-guide

इंस्टॉल होने के बाद, gemini चलाकर Figma के साथ प्रमाणित करें और फिर CLI के भीतर निम्न कमांड निष्पादित करें:

/mcp auth figma

एक्सटेंशन अनइंस्टॉल करने के लिए:

gemini extensions uninstall figma

अन्य एडिटर

Streamable HTTP का समर्थन करने वाले अन्य कोड एडिटर और टूल्स भी Figma MCP सर्वर से कनेक्ट हो सकते हैं।

यदि आप एक अलग एडिटर या टूल का उपयोग कर रहे हैं, तो यह पुष्टि करने के लिए उसका दस्तावेज़ीकरण जांचें कि यह Streamable HTTP आधारित संचार का समर्थन करता है। यदि ऐसा है, तो आप इस कॉन्फ़िगरेशन का उपयोग करके Figma MCP सर्वर को मैन्युअल रूप से जोड़ सकते हैं:

{
  "mcpServers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

अपने MCP क्लाइंट को प्रॉम्प्ट करना

Figma MCP सर्वर टूल्स का एक सेट पेश करता है जो LLMs को Figma में डिज़ाइन अनुवाद करने में मदद करते हैं। कनेक्ट होने के बाद, आप अपने MCP क्लाइंट को किसी विशिष्ट डिज़ाइन नोड तक पहुंचने के लिए प्रॉम्प्ट कर सकते हैं।

अपने AI क्लाइंट को Figma डिज़ाइन संदर्भ प्रदान करने के लिए:

1. Figma में किसी फ़्रेम या लेयर का लिंक कॉपी करें।
2. अपने क्लाइंट को चयनित URL पर डिज़ाइन लागू करने में मदद करने के लिए प्रॉम्प्ट करें।

[!NOTE] आपका क्लाइंट चयनित URL पर नेविगेट नहीं कर पाएगा, लेकिन यह node-id निकालेगा जो MCP सर्वर के लिए यह पहचानने के लिए आवश्यक है कि किस ऑब्जेक्ट के बारे में जानकारी लौटानी है।

टूल्स और स्किल्स

Figma डेवलपर दस्तावेज़ीकरण में Figma MCP सर्वर द्वारा प्रदान किए गए टूल्स की सूची बनाए रखता है।

आप Figma हेल्प सेंटर में समर्थित एजेंटों के लिए Figma प्लगइन के साथ शामिल स्किल्स के बारे में भी अधिक जान सकते हैं। एजेंट के आधार पर, आप connector, extension, या power शब्द भी देख सकते हैं; इनमें स्किल्स का समान सेट शामिल है।

इस रिपो में स्टैंडअलोन वर्कफ़्लो स्किल्स भी हैं जो Figma प्लगइन के साथ बंडल नहीं हैं:

• workflow-skills/video-interaction-mapper: UI रिकॉर्डिंग को एनोटेटेड Figma स्टोरीबोर्ड में बदलता है
• workflow-skills/generate-project-plan: PRD (प्लस वैकल्पिक कोडबेस ग्राउंडिंग) को FigJam प्रोजेक्ट प्लान बोर्ड में बदलता है

MCP सर्वोत्तम अभ्यास

जनरेट किए गए कोड की गुणवत्ता कई कारकों पर निर्भर करती है। कुछ आपके नियंत्रण में हैं, और कुछ आपके द्वारा उपयोग किए जा रहे टूल्स के। स्वच्छ, सुसंगत आउटपुट के लिए यहां कुछ सुझाव दिए गए हैं।

बेहतर कोड के लिए अपनी Figma फ़ाइल संरचित करें

अपने डिज़ाइन इरादे के लिए सर्वोत्तम संदर्भ प्रदान करें, ताकि MCP और आपका AI सहायक स्पष्ट, सुसंगत और आपके सिस्टम के अनुरूप कोड जनरेट कर सके।

• कंपोनेंट्स का उपयोग करें किसी भी पुनः उपयोग की जाने वाली चीज़ के लिए (बटन, कार्ड, इनपुट, आदि)
• कंपोनेंट्स को अपने कोडबेस से लिंक करें Code Connect के माध्यम से। कोड में सुसंगत कंपोनेंट पुनः उपयोग पाने का यह सबसे अच्छा तरीका है। इसके बिना, मॉडल अनुमान लगा रहा है।
• वेरिएबल्स का उपयोग करें स्पेसिंग, रंग, रेडियस और टाइपोग्राफी के लिए।
• लेयर्स को अर्थपूर्ण रूप से नाम दें (जैसे CardContainer, Group 5 नहीं)
• ऑटो लेआउट का उपयोग करें प्रतिक्रियाशील इरादे को संप्रेषित करने के लिए।

[!TIP] कोड जनरेट करने से पहले यह जांचने के लिए Figma में फ़्रेम का आकार बदलें कि यह अपेक्षित रूप से व्यवहार करता है।

• एनोटेशन और डेव संसाधनों का उपयोग करें डिज़ाइन इरादे को व्यक्त करने के लिए जो केवल विज़ुअल्स से कैप्चर करना कठिन है, जैसे कि किसी चीज़ को कैसे व्यवहार करना चाहिए, संरेखित करना चाहिए, या प्रतिक्रिया देनी चाहिए।

AI को मार्गदर्शन देने के लिए प्रभावी प्रॉम्प्ट लिखें

MCP आपके AI सहायक को संरचित Figma डेटा देता है, लेकिन आपका प्रॉम्प्ट परिणाम चलाता है। अच्छे प्रॉम्प्ट कर सकते हैं:

• परिणाम को आपके फ्रेमवर्क या स्टाइलिंग सिस्टम के साथ संरेखित करें
• फ़ाइल संरचना और नामकरण परंपराओं का पालन करें
• विशिष्ट पथों में कोड जोड़ें (जैसे src/components/ui)
• नई फ़ाइलें बनाने के बजाय मौजूदा फ़ाइलों में कोड जोड़ें या संशोधित करें
• विशिष्ट लेआउट सिस्टम का पालन करें (जैसे ग्रिड, फ्लेक्सबॉक्स, एब्सोल्यूट)

उदाहरण:

• "इस फ़्रेम से iOS SwiftUI कोड जनरेट करें"
• "इस लेआउट के लिए Chakra UI का उपयोग करें"
• "src/components/ui कंपोनेंट्स का उपयोग करें"
• "इसे src/components/marketing/PricingCard.tsx में जोड़ें"
• "हमारे Stack लेआउट कंपोनेंट का उपयोग करें"

प्रॉम्प्ट को टीम के साथी को दिए गए ब्रीफ की तरह सोचें। स्पष्ट इरादा बेहतर परिणाम देता है।

आवश्यकता पड़ने पर विशिष्ट टूल्स ट्रिगर करें

MCP विभिन्न टूल्स का समर्थन करता है, और प्रत्येक आपके AI सहायक को एक अलग प्रकार का संरचित संदर्भ प्रदान करता है। कभी-कभी, सहायक स्वचालित रूप से सही टूल नहीं चुनता, खासकर जब अधिक टूल्स उपलब्ध हो जाते हैं। यदि परिणाम गलत हैं, तो अपने प्रॉम्प्ट में स्पष्ट होने का प्रयास करें।

• get_design_context आपके Figma चयन का एक संरचित React + Tailwind प्रतिनिधित्व प्रदान करता है। यह एक प्रारंभिक बिंदु है जिसे आपका AI सहायक आपके प्रॉम्प्ट के आधार पर किसी भी फ्रेमवर्क या कोड शैली में अनुवाद कर सकता है।
• get_variable_defs आपके चयन में उपयोग किए गए वेरिएबल्स और स्टाइल्स (रंग, स्पेसिंग, टाइपोग्राफी, आदि) निकालता है। यह मॉडल को जनरेट किए गए कोड में आपके टोकन्स को सीधे संदर्भित करने में मदद करता है।

उदाहरण के लिए, यदि आपको टोकन्स के बजाय कच्चा कोड मिल रहा है, तो कुछ इस तरह प्रयास करें:

• "इस फ़्रेम में उपयोग किए गए वेरिएबल नाम और मान प्राप्त करें।"

कस्टम नियम जोड़ें

आउटपुट को सुसंगत रखने के लिए प्रोजेक्ट-स्तरीय मार्गदर्शन सेट करें—जैसे नए डेवलपर के लिए ऑनबोर्डिंग नोट्स। ये ऐसी चीज़ें हैं:

• पसंदीदा लेआउट प्रिमिटिव्स
• फ़ाइल संगठन
• नामकरण पैटर्न
• क्या हार्डकोड नहीं करना चाहिए

आप इसे किसी भी प्रारूप में प्रदान कर सकते हैं जो आपका MCP क्लाइंट निर्देश फ़ाइलों के लिए उपयोग करता है।

उदाहरण:

लगातार अच्छा आउटपुट सुनिश्चित करें

## Figma MCP Integration Rules
These rules define how to translate Figma inputs into code for this project and must be followed for every Figma-driven change.

### Required flow (do not skip)
1. Run get_design_context first to fetch the structured representation for the exact node(s).
2. If the response is too large or truncated, run get_metadata to get the high‑level node map and then re‑fetch only the required node(s) with get_design_context.
3. Run get_screenshot for a visual reference of the node variant being implemented.
4. Only after you have both get_design_context and get_screenshot, download any assets needed and start implementation.
5. Translate the output (usually React + Tailwind) into this project's conventions, styles and framework.  Reuse the project's color tokens, components, and typography wherever possible.
6. Validate against Figma for 1:1 look and behavior before marking complete.

### Implementation rules
- Treat the Figma MCP output (React + Tailwind) as a representation of design and behavior, not as final code style.
- Replace Tailwind utility classes with the project's preferred utilities/design‑system tokens when applicable.
- Reuse existing components (e.g., buttons, inputs, typography, icon wrappers) instead of duplicating functionality.
- Use the project's color system, typography scale, and spacing tokens consistently.
- Respect existing routing, state management, and data‑fetch patterns already adopted in the repo.
- Strive for 1:1 visual parity with the Figma design. When conflicts arise, prefer design‑system tokens and adjust spacing or sizes minimally to match visuals.
- Validate the final UI against the Figma screenshot for both look and behavior.

Cursor

---
description: Figma MCP server rules
globs:
alwaysApply: true
---
- The Figma MCP server provides an assets endpoint which can serve image and SVG assets
- IMPORTANT: If the Figma MCP server returns a localhost source for an image or an SVG, use that image or SVG source directly
- IMPORTANT: DO NOT import/add new icon packages, all the assets should be in the Figma payload
- IMPORTANT: do NOT use or create placeholders if a localhost source is provided

Claude Code

# MCP Servers

## Figma MCP server rules

- The Figma MCP server provides an assets endpoint which can serve image and SVG assets
- IMPORTANT: If the Figma MCP server returns a localhost source for an image or an SVG, use that image or SVG source directly
- IMPORTANT: DO NOT import/add new icon packages, all the assets should be in the Figma payload
- IMPORTANT: do NOT use or create placeholders if a localhost source is provided

सामान्य गुणवत्ता नियम

- IMPORTANT: Always use components from `/path_to_your_design_system` when possible
- Prioritize Figma fidelity to match designs exactly
- Avoid hardcoded values, use design tokens from Figma where available
- Follow WCAG requirements for accessibility
- Add component documentation
- Place UI components in `/path_to_your_design_system`; avoid inline styles unless truly necessary

इन्हें एक बार जोड़ने से बार-बार प्रॉम्प्टिंग की आवश्यकता नाटकीय रूप से कम हो सकती है और यह सुनिश्चित होता है कि टीम के साथी या एजेंट लगातार समान अपेक्षाओं का पालन करते हैं।

नियमों को संरचित करने के तरीके के लिए अपने IDE या MCP क्लाइंट के दस्तावेज़ीकरण की जांच करना सुनिश्चित करें, और प्रयोग करें कि आपकी टीम के लिए सबसे अच्छा क्या काम करता है। स्पष्ट, सुसंगत मार्गदर्शन अक्सर कम आगे-पीछे के साथ बेहतर, अधिक पुनः उपयोग योग्य कोड की ओर ले जाता है।

बड़े चयनों को तोड़ें

तेज़, अधिक विश्वसनीय परिणामों के लिए स्क्रीन को छोटे भागों (जैसे कंपोनेंट्स या तार्किक खंड) में तोड़ें।

बड़े चयन टूल्स को धीमा कर सकते हैं, त्रुटियों का कारण बन सकते हैं, या अधूरे उत्तर दे सकते हैं, खासकर जब मॉडल के लिए प्रोसेस करने के लिए बहुत अधिक संदर्भ हो। इसके बजाय:

1. छोटे अनुभागों या व्यक्तिगत कंपोनेंट्स के लिए कोड जनरेट करें (जैसे कार्ड, हेडर, साइडबार)
2. यदि यह धीमा या अटका हुआ लगता है, तो अपने चयन का आकार कम करें

यह संदर्भ को प्रबंधनीय और परिणामों को अधिक पूर्वानुमानित रखने में मदद करता है, आपके और मॉडल दोनों के लिए।

यदि आउटपुट में कुछ सही नहीं लगता है, तो आमतौर पर मूल बातों पर फिर से विचार करना मदद करता है: Figma फ़ाइल कैसे संरचित है, प्रॉम्प्ट कैसे लिखा गया है, और कौन सा संदर्भ भेजा जा रहा है। उपरोक्त सर्वोत्तम अभ्यासों का पालन करने से बड़ा अंतर आ सकता है, और अक्सर अधिक सुसंगत, पुनः उपयोग योग्य कोड की ओर ले जाता है।

अपने एजेंट में संदर्भ लाना

Make + MCP एकीकरण प्रोटोटाइप को डिज़ाइन से प्रोडक्शन तक ले जाना आसान बनाता है। Make प्रोजेक्ट्स को सीधे MCP के माध्यम से अपने एजेंट से जोड़कर, आप संसाधन निकाल सकते हैं और उन्हें अपने कोडबेस में पुनः उपयोग कर सकते हैं। यह प्रोटोटाइप को वास्तविक अनुप्रयोगों में विस्तारित करते समय घर्षण को कम करता है, और यह सुनिश्चित करता है कि डिज़ाइन का इरादा कार्यान्वयन तक ईमानदारी से पहुँचाया जाए।

इस एकीकरण के साथ, आप यह कर सकते हैं:

• प्रोजेक्ट संदर्भ प्राप्त करें सीधे Make से (व्यक्तिगत फ़ाइलें या पूरा प्रोजेक्ट)
• मौजूदा कोड घटकों का उपयोग करने के लिए प्रॉम्प्ट करें शुरुआत से शुरू करने के बजाय
• प्रोटोटाइप को वास्तविक डेटा के साथ विस्तारित करें डिज़ाइनों को तेज़ी से मान्य और प्रोडक्शन-तैयार करने के लिए

यह कैसे काम करता है

[!NOTE] यह एकीकरण MCP संसाधन क्षमता का लाभ उठाता है, जो आपके एजेंट को Make प्रोजेक्ट्स से सीधे संदर्भ प्राप्त करने की अनुमति देता है। यह केवल उन क्लाइंट्स पर उपलब्ध है जो MCP संसाधनों का समर्थन करते हैं।

Make से संसाधन प्राप्त करने के चरण

1. अपने एजेंट को संदर्भ प्राप्त करने के लिए प्रॉम्प्ट करें एक मान्य Make लिंक प्रदान करके
2. उपलब्ध फ़ाइलों की सूची प्राप्त करें अपने Make प्रोजेक्ट से
3. उन फ़ाइलों को डाउनलोड करें जिन्हें आप प्राप्त करना चाहते हैं जब संकेत दिया जाए

उदाहरण वर्कफ़्लो

लक्ष्य: अपने प्रोडक्शन कोडबेस में एक पॉपअप घटक लागू करें जो Make में परिभाषित डिज़ाइन और व्यवहार से मेल खाता हो।

1. अपने Make प्रोजेक्ट लिंक को अपने एजेंट के साथ साझा करें।
2. एजेंट को प्रॉम्प्ट करें: "मैं इस Make फ़ाइल से पॉपअप घटक व्यवहार और शैलियाँ प्राप्त करना चाहता हूँ और इसे अपने पॉपअप घटक का उपयोग करके लागू करना चाहता हूँ।"

आपका एजेंट Make से प्रासंगिक संदर्भ प्राप्त करेगा और प्रोटोटाइप की कार्यक्षमता और शैलियों के साथ आपके मौजूदा पॉपअप घटक को विस्तारित करने में आपका मार्गदर्शन करेगा।

आइकन दिशानिर्देश

इस रिपॉजिटरी में शामिल किसी भी आइकन को प्रदर्शित करने के लिए Figma ब्रांड उपयोग दिशानिर्देश देखें।