स्थानीयकृत पठन मार्गदर्शिका
figma-code-connect-componentsउद्देश्य, उपयोग और स्रोत
कोड कनेक्ट मैपिंग टूल का उपयोग करके फिग्मा डिज़ाइन घटकों को कोड घटकों से जोड़ता है। इसका उपयोग तब करें जब उपयोगकर्ता "कोड कनेक्ट", "इस घटक को कोड से कनेक्ट करें", "इस घटक को मैप करें", "घटक को कोड से लिंक करें", "कोड कनेक्ट मैपिंग बनाएं" जैसे वाक्य बोलता है या फिग्मा डिज़ाइन और कोड कार्यान्वयन के बीच मैपिंग स्थापित करना चाहता है। कैनवास लेखन के लिएuse_figma, उपयोगfigma-use.
स्रोत प्राप्त किया गया:
- स्रोत रिपॉज़िटरी
- openai/skills
- SKILL.md
skills/.curated/figma-code-connect-components/SKILL.md- रिपॉज़िटरी Star
- 28,420
- रिपॉज़िटरी का अंतिम अपडेट
- 2026-10-29
- क्षमता वर्गीकरण
- डिज़ाइन
- अंतिम संग्रह समय
लाइसेंस: निर्दिष्ट नहीं है
वर्कफ़्लो के अंश केवल पढ़ने में सहायता के लिए हैं, कोडेज़ से निष्पादन योग्य निर्देश नहीं हैं। इस पृष्ठ को बनाने के लिए किसी तृतीय-पक्ष स्किल का उपयोग नहीं किया गया है।
नीचे दिए गए उद्देश्य और कार्यप्रणाली संबंधी अंश प्रारंभिक सामग्री हैं, जिन्हें पढ़ने के लिए व्यवस्थित और अनुवादित किया गया है। ये अलग से लेबल किए गए कोडेज़ संपादकीय विश्लेषण से भिन्न हैं।
यह कौशल क्या करता है
कोड कनेक्ट मैपिंग टूल का उपयोग करके फिग्मा डिज़ाइन घटकों को कोड घटकों से जोड़ता है। इसका उपयोग तब करें जब उपयोगकर्ता "कोड कनेक्ट", "इस घटक को कोड से कनेक्ट करें", "इस घटक को मैप करें", "घटक को कोड से लिंक करें", "कोड कनेक्ट मैपिंग बनाएं" जैसे वाक्य बोलता है या फिग्मा डिज़ाइन और कोड कार्यान्वयन के बीच मैपिंग स्थापित करना चाहता है। कैनवास लेखन के लिएuse_figma, उपयोगfigma-use.
अपस्ट्रीम वर्कफ़्लो कैसे काम करता है
अवलोकन
यह कौशल आपको फिग्मा के कोड कनेक्ट फीचर का उपयोग करके फिग्मा डिज़ाइन घटकों को उनके संबंधित कोड कार्यान्वयनों से जोड़ने में मदद करता है। यह फिग्मा डिज़ाइन संरचना का विश्लेषण करता है, आपके कोडबेस में मिलान करने वाले घटकों की खोज करता है, और डिज़ाइन-कोड संगति बनाए रखने वाले मैपिंग स्थापित करता है।
ऊपर की ओर मार्ग · L8 ↗कदम1कोड कनेक्ट सुझाव प्राप्त करें
पुकारनाget_code_connect_suggestionsएक ही ऑपरेशन में सभी अनमैप्ड कंपोनेंट्स की पहचान करने के लिए। यह टूल स्वचालित रूप से: फिग्मा सीनग्राफ से कंपोनेंट की जानकारी प्राप्त करता है, चयन में प्रकाशित कंपोनेंट्स की पहचान करता है, मौजूदा कोड कनेक्ट मैपिंग की जांच करता है और पहले से कनेक्टेड कंपोनेंट्स को फ़िल्टर करता है।
get_code_connect_suggestions(fileKey=":fileKey", nodeId="1:2")आवश्यकताएँ और सेटअप
आवश्यक शर्तें
Figma MCP सर्वर कनेक्टेड और एक्सेस करने योग्य होना चाहिए। उपयोगकर्ता को नोड आईडी के साथ एक Figma URL प्रदान करना होगा:https://figma.com/design/:fileKey/:fileName?node-id=1-2
सीमाएं और गुणवत्ता जांच
इस फ़ाइल से कोई अलग सीमा अंश नहीं चुना गया है। इसका मतलब यह नहीं है कि यह स्किल हर इनपुट या वातावरण के लिए सुरक्षित है। संपूर्ण स्रोत की समीक्षा करें और अपने परिणाम की पुष्टि करें।
सुरक्षित परीक्षण से शुरुआत करें
- समर्थित होस्ट और रिपॉजिटरी इंस्टॉलेशन निर्देशों की जाँच करें। स्किल डायरेक्टरी और उससे संबंधित स्क्रिप्ट, एसेट्स और डॉक्यूमेंटेशन को एक साथ रखें;SKILL.mdअकेले होने पर निर्भरताओं को छोड़ा जा सकता है।
- एजेंट को अपना वास्तविक इनपुट, अपेक्षित आउटपुट और स्वीकृति मानदंड प्रदान करें। इनवोकेशन सिंटैक्स और उपलब्ध उपकरण होस्ट पर निर्भर करते हैं; यह साइट किसी सार्वभौमिक इंस्टॉलेशन कमांड को नहीं मानती है।
- डिस्पोजेबल प्रोजेक्ट या उसकी कॉपी पर मूल वर्कफ़्लो को आज़माएँ। फ़ाइलों, रिमोट सेवाओं या बिल योग्य संसाधनों में परिवर्तन करने वाले कार्यों की अनुमति देने से पहले उनकी समीक्षा करें।
- स्रोत गुणवत्ता जांच और अपनी आवश्यकताओं के आधार पर आउटपुट को सत्यापित करें। सफल ट्रिगर या उच्च रिपॉजिटरी स्टार संख्या सही परिणाम की गारंटी नहीं देते।
मूल लेख में आगे पढ़ें
- अवलोकन
- कौशल सीमाएँ
- आवश्यक शर्तें
- आवश्यक कार्यप्रवाह
- कदम1कोड कनेक्ट सुझाव प्राप्त करें
- विकल्प ए: उपयोग करना
figma-desktopएमसीपी (कोई यूआरएल प्रदान नहीं किया गया) - विकल्प B: जब फिग्मा यूआरएल प्रदान किया जाता है
- कदम2: मिलान करने वाले घटकों के लिए कोडबेस को स्कैन करें
- कदम3उपयोगकर्ता को मिलान प्रस्तुत करें
- कदम4: कोड कनेक्ट मैपिंग बनाएं
- उदाहरण1बटन घटक को जोड़ना
- उदाहरण2: आंशिक चयन के साथ एकाधिक घटक
- उदाहरण3घटक निर्माण की आवश्यकता है
- सक्रिय घटक खोज
- सटीक संरचना मिलान
- स्पष्ट संचार
- अस्पष्टता को संभालें
- उचित कमी
- समस्या: "इस चयन में कोई प्रकाशित घटक नहीं मिला"
- समस्या: "कोड कनेक्ट केवल ऑर्गेनाइजेशन और एंटरप्राइज प्लान पर ही उपलब्ध है"
- समस्या: कोडबेस में कोई मेल खाने वाला घटक नहीं मिला
- समस्या: "प्रकाशित घटक नहीं मिला" (CODE_CONNECT_ASSET_NOT_FOUND)
- समस्या: "घटक पहले से ही कोड से मैप किया हुआ है" (CODE_CONNECT_MAPPING_ALREADY_EXISTS)
- समस्या: "मैपिंग बनाने के लिए अपर्याप्त अनुमतियाँ" (CODE_CONNECT_INSUFFICIENT_PERMISSIONS)
- समस्या: कोड कनेक्ट मैपिंग यूआरएल त्रुटियों के साथ विफल हो जाती है।
- समस्या: कई समान घटक पाए गए
- कोड कनेक्ट को समझना
- अतिरिक्त संसाधन
सम्बंधित योग्यता
अनुवाद और दायरा
यह पठन मार्गदर्शिका ऊपर पिन किए गए अंशों में से चयनित अंशों को प्रस्तुत करती है।SKILL.mdयह अनुवाद सहायता से किया गया है। यह कोई संपूर्ण नियमावली या परीक्षित संगतता का दावा नहीं है। उपयोग करने से पहले मूल दस्तावेज़ और उससे संबंधित फ़ाइलों को पढ़ें।
यह परिचय नीचे पिन किए गए संस्करण को संदर्भित करता है; वर्तमान रिपॉजिटरी गतिविधि और संग्रह समय अलग से दिखाए गए हैं।
- पिन किया गया स्रोत
- मूल लेख पढ़ें ↗
- स्रोत प्राप्त किया गया
- स्रोत कमिट
49f948faa9258a0c61caceaf225e179651397431- स्रोत SHA-256
0f19edad8aed28063a3517c419fbcbef5421d024f189fd02a17fae25093ec69d