Figma Skills मार्कडाउन-आधारित निर्देश हैं जो गाइड करते हैं कि AI Design Agent आपके विशिष्ट संदर्भ में कैसे व्यवहार करता है। इन्हें पुन: उपयोग योग्य कस्टम प्रॉम्प्ट्स के रूप में सोचें — आप इन्हें एक बार लिखते हैं, और ये आपकी टीम की परंपराओं, कॉम्पोनेंट नियमों और गुणवत्ता मानकों को एन्कोड करते हैं ताकि एजेंट हर बार उनका स्वचालित रूप से पालन करे।

कोई भी व्यक्ति एक स्किल लिख सकता है। कोई कोड की आवश्यकता नहीं। कोई प्लगइन डेवलपमेंट नहीं। कोई API इंटीग्रेशन नहीं। बस मार्कडाउन टेक्स्ट जो वर्णन करता है कि एजेंट को क्या करना चाहिए और कैसे करना चाहिए। Skills जेनेरिक UI बनाने वाले एजेंट और आपकी टीम का UI बनाने वाले एजेंट के बीच का अंतर हैं।

मुख्य बात

Skills Design Agent को एक जेनेरिक AI से आपकी टीम के AI में बदल देती हैं। Skills के बिना, एजेंट डिफ़ॉल्ट परंपराओं का उपयोग करता है और आपकी प्राथमिकताओं का अनुमान लगाता है। Skills के साथ, यह आपके स्पेसिंग सिस्टम, कॉम्पोनेंट नेमिंग नियमों, पहुंच आवश्यकताओं और ब्रांड दिशानिर्देशों का स्वचालित रूप से पालन करता है। 3-4 skills लिखने में 30 मिनट का समय हफ्तों के एजेंट उपयोग में घंटों के सुधार को बचाता है।

Figma Skill में क्या शामिल होता है?

स्किल एलिमेंट यह क्या करता है उदाहरण
नाम (/ के साथ)आप इसे कैसे इनवोक करते हैं/create-settings-page
उद्देश्यस्किल क्या करती है (एक वाक्य)"हमारी टीम की परंपराओं के अनुसार एक सेटिंग्स पेज बनाएं"
चरणव्यवस्थित निर्देश जिनका एजेंट पालन करता है"1. प्रत्येक समूह के लिए Section Header का उपयोग करें..."
परंपराएंनियम जिनका एजेंट को पालन करना चाहिए"हमेशा 8px ग्रिड का उपयोग करें, कभी भी absolute positioning का उपयोग न करें"
कॉम्पोनेंट्सकौन से प्रकाशित कॉम्पोनेंट्स का उपयोग करना है"boolean सेटिंग्स के लिए Toggle/Switch का उपयोग करें"
वेरिएबल्सकौन से डिज़ाइन टोकन लागू करने हैं"बैकग्राउंड के लिए color-surface-primary का उपयोग करें"
न करेंएजेंट को क्या बचना चाहिए"प्रति पेज कभी भी 3 से अधिक हेडिंग लेवल का उपयोग न करें"

Figma ने 9 उदाहरण skills के साथ लॉन्च किया जिनमें शामिल हैं: कॉम्पोनेंट लाइब्रेरी बनाना, ब्रीफ से नए डिज़ाइन बनाना, accessibility specs तैयार करना, मल्टी-एजेंट वर्कफ़लो को समन्वयित करना, और डिज़ाइन टोकन को कोड के साथ सिंक करना। इन्हें figma.com/community/skills पर देखें। मूलभूत स्किल, /use-figma, एजेंट को Figma की संरचनात्मक कार्यप्रणाली की साझा समझ देती है। टीमें वहां से कस्टमाइज़ करती हैं।

अपनी पहली स्किल लिखना (उदाहरण के साथ)

अपने सबसे बार दोहराए जाने वाले डिज़ाइन कार्य से शुरू करें। यदि आप साप्ताहिक रूप से फॉर्म लेआउट बनाते हैं, तो एक /form-layout स्किल लिखें। यहां एक पूरा, वास्तविक दुनिया का उदाहरण है:

/form-layout उद्देश्य: हमारे डिज़ाइन सिस्टम की परंपराओं से मेल खाने वाले फॉर्म लेआउट बनाएं। चरण: 1. 24px horizontal padding और 32px vertical padding के साथ एक फ्रेम बनाएं 2. हमारे Heading/H1 कॉम्पोनेंट का उपयोग करके पेज टाइटल जोड़ें 3. Section/Header कॉम्पोनेंट का उपयोग करके संबंधित फॉर्म फ़ील्ड को सेक्शन में समूहीकृत करें 4. हमारी कॉम्पोनेंट लाइब्रेरी का उपयोग करके फॉर्म फ़ील्ड जोड़ें (नीचे नियम देखें) 5. हमारे Button कॉम्पोनेंट्स का उपयोग करके नीचे एक्शन बटन जोड़ें 6. सभी कंटेनर में auto layout लागू करें कॉम्पोनेंट नियम: - Single-line text input: Input/Text का उपयोग करें - Multi-line text: Input/Textarea का उपयोग करें - विकल्पों में से चुनें: Select/Dropdown का उपयोग करें - हां/नहीं टॉगल: Toggle/Switch का उपयोग करें (single boolean के लिए कभी checkbox का उपयोग न करें) - Multiple choice: Checkbox/Group का उपयोग करें - Date selection: DatePicker/Default का उपयोग करें स्पेसिंग नियम: - एक सेक्शन के भीतर फॉर्म फ़ील्ड के बीच 16px - सेक्शन के बीच 32px - 24px horizontal padding - लेबल हमेशा inputs के ऊपर, कभी बगल में नहीं (Body/Small स्टाइल का उपयोग करें) - जब validation नियम मौजूद हों तो inputs के नीचे helper text शामिल करें बटन नियम: - Primary action नीचे दाईं ओर aligned - Secondary action (Cancel/Reset) primary के बाएं 16px gap के साथ - horizontal auto layout container में बटन - मोबाइल पर sticky bottom bar Validation States: - Error: लाल border (#EF4444) + नीचे error message Body/Small/Error में - Success: valid input के बाद inline में हरा checkmark - हमेशा error text दिखाएं — कभी केवल border color न बदलें न करें: - कभी भी placeholder text को एकमात्र लेबल के रूप में उपयोग न करें - बिना सेक्शन ब्रेक के कभी 8 से अधिक फ़ील्ड स्टैक न करें - 4 से कम विकल्पों के लिए कभी dropdown का उपयोग न करें (radio buttons का उपयोग करें) - कभी हर फ़ील्ड पर required/optional indicators न लगाएं (अल्पसंख्यक को mark करें)

यह स्किल एजेंट को बताती है कि आपकी टीम फॉर्म कैसे बनाती है। इसके बिना, एजेंट Figma की डिफ़ॉल्ट परंपराओं का उपयोग करता है। इसके साथ, एजेंट द्वारा बनाया गया हर फॉर्म आपके विशिष्ट मानकों का पालन करता है — टीम के सदस्यों में consistent, प्रोजेक्ट्स में consistent।

📬 इससे मूल्य मिल रहा है?

प्रति सप्ताह एक actionable AI insight। साथ ही subscribe करने पर एक मुफ्त prompt pack।

मुफ्त सब्सक्राइब करें →

Skills अन्य AI कस्टम निर्देशों से कैसे तुलना करती हैं

Skills conceptually अन्य AI टूल्स में कस्टम instruction सिस्टम के समान हैं:

टूल कस्टम निर्देश द्वारा बनाया गया साझा किया गया?
Figma Skillsमार्कडाउन फाइलें जो Design Agent को guide करती हैंटीम द्वारा manuallyहां (Community library)
ChatGPT Custom Instructionsटेक्स्ट जो सभी ChatGPT responses को आकार देता हैउपयोगकर्ता द्वारा manuallyनहीं (केवल personal)
Claude Code CLAUDE.mdकोडिंग एजेंट के लिए प्रोजेक्ट-लेवल निर्देशटीम द्वारा manuallyहां (repo के माध्यम से)
Hermes Agent Skillsस्वचालित रूप से बनाए गए पुन: उपयोग योग्य कार्य पैटर्नउपयोग से स्वचालित रूप सेहां (skill library)

मुख्य अंतर: Hermes Agent पूर्ण किए गए कार्यों से स्वचालित रूप से skills बनाता है — आपके काम करने के दौरान सीखता है। Figma manual skill creation की आवश्यकता होती है — आप इसे स्पष्ट रूप से सिखाते हैं। Hermes का दृष्टिकोण उपयोग के साथ scale करता है; Figma का दृष्टिकोण आपको अधिक नियंत्रण देता है लेकिन upfront निवेश की आवश्यकता होती है। दोनों बिना कस्टम निर्देशों के टूल्स का उपयोग करने से बेहतर AI आउटपुट देते हैं।

इन सभी सिस्टम में अंतर्निहित सिद्धांत समान है: AI आपकी प्राथमिकताओं, परंपराओं और मानकों के बारे में स्पष्ट संदर्भ के साथ बेहतर प्रदर्शन करता है। चाहे आप Figma Skill लिख रहे हों, ChatGPT Custom Instructions, या Claude CLAUDE.md फ़ाइल, ICCSSE framework बेहतर निर्देश देता है। मुफ्त Prompt Optimizer इस संरचना को स्वचालित रूप से लागू करता है — अपना skill draft paste करें, वापस एक स्पष्ट संस्करण पाएं।

हर डिज़ाइन टीम को चाहिए 4 आवश्यक Skills

1. /form-layout — टीम में फॉर्म डिज़ाइन को मानकीकृत करता है। (ऊपर उदाहरण।)

2. /page-layout — आपकी पेज संरचना परंपराओं को परिभाषित करता है: हेडर प्लेसमेंट, साइडबार चौड़ाई, कंटेंट max-width, फुटर संरचना, नेवीगेशन पैटर्न, responsive breakpoints।

3. /component-variant — एजेंट को बताता है कि आपके मौजूदा सिस्टम से मेल खाने वाले नए कॉम्पोनेंट variants कैसे बनाएं: नामकरण परंपराएं, state definitions (default, hover, active, disabled, error), size scale (sm, md, lg), और documentation आवश्यकताएं।

4. /accessibility-check — आपके accessibility मानकों को परिभाषित करता है: WCAG level (AA vs AAA), minimum touch target sizes, contrast ratios, heading hierarchy नियम, आवश्यक ARIA labels, और screen reader annotation format। विवरण के लिए हमारी accessibility specs guide देखें।

📬 इस तरह की और चीजें चाहिए?

प्रति सप्ताह एक actionable AI insight। साथ ही subscribe करने पर एक मुफ्त prompt pack।

मुफ्त सब्सक्राइब करें →

अक्सर पूछे जाने वाले प्रश्न

मुझे कितनी skills बनानी चाहिए?

अपने सबसे सामान्य डिज़ाइन कार्यों को कवर करने वाली 3-4 से शुरू करें: एक फॉर्म स्किल, एक पेज लेआउट स्किल, एक कॉम्पोनेंट variant स्किल, और एक accessibility check स्किल। ये दैनिक डिज़ाइन कार्य के 80% को कवर करते हैं। जैसे-जैसे आप बार-बार होने वाले पैटर्न की पहचान करते हैं जिन्हें एजेंट असंगत रूप से handle करता है, अधिक skills जोड़ें।

क्या skills अन्य skills को call कर सकती हैं?

हां — skills अन्य skills को reference कर सकती हैं, chained workflows बना सकती हैं। एक /new-feature स्किल input sections के लिए /form-layout को invoke कर सकती है, फिर compliance review के लिए /accessibility-check। यह एक single invocation से जटिल multi-step workflows को सक्षम बनाता है।

क्या skills credits consume करती हैं?

स्किल स्वयं (मार्कडाउन निर्देश) credits consume नहीं करती। एजेंट actions जो स्किल trigger करती है (डिज़ाइन बनाना, कॉम्पोनेंट्स edit करना) सामान्य दर पर credits consume करती है। एक अच्छी तरह से लिखी गई स्किल वास्तव में पहली attempt में बेहतर आउटपुट देकर credits बचा सकती है — कम iterations का मतलब कम credit-consuming regenerations।

क्या मैं Figma community के साथ skills साझा कर सकता हूं?

हां — Figma की community skills library आपको skills publish और browse करने देती है। इसका मतलब है कि आप सामान्य पैटर्न (dashboard layouts, onboarding flows, settings pages) के लिए अन्य डिज़ाइन टीमों द्वारा लिखी गई skills का उपयोग कर सकते हैं बिना उन्हें scratch से लिखे।

Skills कहां store होती हैं?

Skills आपके Figma organization या व्यक्तिगत खाते से जुड़ी होती हैं। टीम-लेवल skills सभी टीम सदस्यों के लिए accessible होती हैं; व्यक्तिगत skills केवल आपके लिए accessible होती हैं। अपनी सबसे महत्वपूर्ण skills को टीम लेवल पर store करें ताकि सभी डिज़ाइनर समान परंपराओं से लाभ उठा सकें।

Disclosure: इस लेख में कुछ लिंक affiliate links हैं। हम केवल उन टूल्स की सिफारिश करते हैं जिन्हें हमने व्यक्तिगत रूप से परखा है और नियमित रूप से उपयोग करते हैं। हमारी पूरी disclosure policy देखें।