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