Figma AI केवल उतने ही अच्छे निर्देशों के साथ काम करता है जितने अच्छे आप इसे देते हैं। अस्पष्ट प्रॉम्प्ट्स सामान्य लेआउट बनाते हैं जिन्हें आपको शुरू से फिर बनाना पड़ता है। विशिष्ट प्रॉम्प्ट्स — स्क्रीन प्रकार, सेक्शन, कंपोनेंट्स, फ्रेम साइज़, और स्पेसिंग के साथ — नियमित रूप से एक ही बार में 70–85% प्रोडक्शन-रेडी आउटपुट बनाते हैं। ये 15 टेम्प्लेट्स Figma के 2026 AI स्टैक के लिए संरचित हैं: Design Agent, Figma Make, Skills, और मुफ्त फीचर्स (auto layout, rename layers, replace content) जो शून्य क्रेडिट्स खर्च करते हैं।

कोई भी टेम्प्लेट कॉपी करें, ब्रैकेट वाले प्लेसहोल्डर्स को अपने प्रोडक्ट के लिए बदलें, और यदि आप कड़े बाध्यताएं चाहते हैं तो इसे मुफ्त Prompt Optimizer के माध्यम से चलाएं। ChatGPT, Claude, और Gemini के अंदर वन-क्लिक ऑप्टिमाइज़ेशन के लिए जब आप एजेंट निर्देश तैयार कर रहे हों, TresPrompt आपके साइडबार में ICCSSE-स्टाइल संरचना जोड़ता है।

मुख्य बात

हर मजबूत Figma AI प्रॉम्प्ट चार चीजों का नाम लेता है: आप कौन सी स्क्रीन बना रहे हैं, कौन से प्रकाशित कंपोनेंट्स का उपयोग करना है, फ्रेम साइज़, और स्पेसिंग नियम। नकारात्मक बाध्यताएं जोड़ें ("अनाम फ्रेम का उपयोग न करें," "lorem ipsum नहीं") और एजेंट अनुमान लगाना बंद कर देता है। Skills इन पैटर्न को एन्कोड करते हैं ताकि आपको हर सेशन में उन्हें फिर से टाइप न करना पड़े।

Design Agent टेम्प्लेट्स (कैनवस पर स्क्रीन्स)

1 मोबाइल सेटिंग्स पेज
एक मोबाइल सेटिंग्स पेज (390×844) बनाएं जिसमें हो: 1. खाता — अवतार, नाम, ईमेल, संपादन बटन 2. सूचनाएं — ईमेल, पुश, SMS के लिए टॉगल 3. दिखावट — डार्क मोड टॉगल, फॉन्ट साइज़ सेलेक्टर 4. सुरक्षा — पासवर्ड बदलें, 2FA टॉगल 5. फुटर — विनाशकारी लॉग आउट बटन, ऐप संस्करण टेक्स्ट केवल प्रकाशित कंपोनेंट्स का उपयोग करें। Auto layout: 16px आइटम स्पेसिंग, सेक्शन के बीच 32px। ग्रुप लेबल के लिए Section Header कंपोनेंट।
2 डैशबोर्ड ओवरव्यू (डेस्कटॉप)
एक डेस्कटॉप एनालिटिक्स डैशबोर्ड (1440×900) बनाएं जिसमें हो: - टॉप नेव: लोगो, खोज, उपयोगकर्ता मेन्यू - बाएं साइडबार: 5 नेव आइटम, "Overview" पर सक्रिय स्थिति - मुख्य: एक पंक्ति में 4 KPI कार्ड, नीचे लाइन चार्ट, हाल की गतिविधि तालिका (5 पंक्तियां) रंग और स्पेसिंग के लिए डिज़ाइन सिस्टम वेरिएबल का उपयोग करें। KPIs के लिए Card कंपोनेंट। गतिविधि के लिए Table कंपोनेंट। "Series 1" जैसे प्लेसहोल्डर चार्ट डेटा लेबल का उपयोग न करें।
3 ऑनबोर्डिंग फ्लो (3 फ्रेम्स)
3 मोबाइल ऑनबोर्डिंग स्क्रीन्स (390×844) बनाएं, बाएं से दाएं: 1. स्वागत — हेडलाइन, सबकॉपी, प्राथमिक CTA "शुरू करें" 2. अनुमतियां — टॉगल के साथ सूचनाएं + स्थान की सूची 3. सफलता — चेकमार्क चित्रण क्षेत्र, "आप तैयार हैं" CTA Primary Button और Secondary Button कंपोनेंट्स का उपयोग करें। प्रगति संकेतक जो चरण 1/3, 2/3, 3/3 दिखाता है। सभी फ्रेम्स पर निरंतर 24px क्षैतिज पैडिंग।
4 खाली स्थिति + त्रुटि स्थिति
दो मोबाइल फ्रेम्स (390×844) बनाएं: फ्रेम A — खाली खोज परिणाम: आइकन क्षेत्र, हेडलाइन "कोई परिणाम नहीं", बॉडी कॉपी, द्वितीयक "फिल्टर साफ़ करें" बटन फ्रेम B — त्रुटि: चेतावनी आइकन, "कुछ गलत हुआ", प्राथमिक "फिर कोशिश करें", तृतीयक "सहायता से संपर्क करें" यदि उपलब्ध हो तो प्रकाशित Empty State और Alert कंपोनेंट्स का उपयोग करें। केंद्र-संरेखित सामग्री, टेक्स्ट ब्लॉक के लिए अधिकतम चौड़ाई 280px।
5 पहुंच योग्य सेटिंग्स (एजेंट + a11y)
पहुंच आवश्यकताओं के साथ एक मोबाइल सेटिंग्स पेज (390×844) बनाएं: - इंटरैक्टिव एलिमेंट्स न्यूनतम 44×44px टच टारगेट्स - टेक्स्ट कंट्रास्ट न्यूनतम 4.5:1 (डिज़ाइन सिस्टम टेक्स्ट रंगों का उपयोग करें) - हेडिंग हाइरार्की H1 → H2, कोई छोड़े गए स्तर नहीं - टॉगल में दृश्य टेक्स्ट लेबल शामिल हों (केवल आइकन नहीं) - त्रुटि स्थितियां रंग और टेक्स्ट दोनों का उपयोग करें (केवल रंग नहीं) प्रकाशित कंपोनेंट्स का उपयोग करें। Auto layout 16px / 32px स्पेसिंग।

📬 इससे फायदा हो रहा है?

सप्ताह में एक कार्यशील AI अंतर्दृष्टि। साथ ही सब्सक्राइब करने पर एक मुफ्त प्रॉम्प्ट पैक।

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

Figma Make टेम्प्लेट्स (प्रोटोटाइप / कोड)

6 मार्केटिंग लैंडिंग (Make)
इस Figma फ्रेम से एक सिंगल-पेज मार्केटिंग साइट बनाएं: - हीरो: हेडलाइन, सबहेड, ईमेल कैप्चर + CTA - आइकन के साथ 3 फीचर कॉलम - सोशल प्रूफ लोगो पंक्ति - लिंक के साथ फुटर चयनित फ्रेम से स्पेसिंग और रंगों का मिलान करें। मोबाइल-रिस्पॉन्सिव। जब तक फ्रेम नोट्स में निर्दिष्ट न हो, कोई बाहरी लाइब्रेरी नहीं।
7 इंटरैक्टिव प्रोटोटाइप (Make)
फ्रेम्स [फ्रेम नाम सूची] से एक क्लिक करने योग्य प्रोटोटाइप बनाएं: - "Sign up" पर क्लिक करने से रजिस्ट्रेशन फॉर्म फ्रेम पर नेविगेट होता है - सबमिट करने पर सफलता टोस्ट स्थिति दिखती है - "Back" पिछली स्क्रीन पर वापस जाता है फाइल से कंपोनेंट्स का उपयोग करें। प्राथमिक बटन पर होवर स्थितियों को संरक्षित करें। डिज़ाइन फाइल में नहीं हैं ऐसी नई स्क्रीन्स न जोड़ें।

Skills टेम्प्लेट्स (पुन: उपयोग योग्य एजेंट निर्देश)

इन्हें Skills markdown फाइलों के रूप में सेव करें ताकि एजेंट हर बार टीम कन्वेंशन्स का पालन करे।

8 Skill: /settings-page
सेटिंग्स स्क्रीन्स बनाते समय: - हमेशा Section Header + समूहीकृत सूची पैटर्न का उपयोग करें - ऐप संस्करण (कैप्शन स्टाइल) और विनाशकारी लॉग आउट के साथ फुटर शामिल करें - जब तक उपयोगकर्ता डेस्कटॉप निर्दिष्ट न करे, मोबाइल डिफ़ॉल्ट 390×844 - बूलियन सेटिंग्स के लिए Toggle कंपोनेंट का उपयोग करें, कभी कस्टम चेकबॉक्स नहीं - स्पेसिंग: समूहों के भीतर 16px, समूहों के बीच 32px, स्क्रीन पैडिंग 24px
9 Skill: /data-table
तालिकाएं बनाते समय: - Table/Header और Table/Row कंपोनेंट्स का उपयोग करें - केवल तभी सॉर्ट आइकन कॉलम शामिल करें जब उपयोगकर्ता मांगे - टच के लिए न्यूनतम 48px पंक्ति ऊंचाई - लंबे टेक्स्ट को ellipsis के साथ काटें, सेल में कभी 2 से अधिक लाइन रैप न करें - यदि शून्य पंक्तियां हैं तो तालिका के नीचे खाली स्थिति

मुफ्त फीचर्स (शून्य क्रेडिट्स)

10 सामग्री बदलें (बैच)
चयनित फ्रेम में सभी lorem ipsum को यथार्थवादी [B2B SaaS / ई-कॉमर्स / स्वास्थ्य सेवा] कॉपी से बदलें। नाम: विविधतापूर्ण, विश्वसनीय। पते: US प्रारूप। उत्पाद नाम: काल्पनिक लेकिन व्यावसायिक। कैरेक्टर काउंट्स को प्लेसहोल्डर्स के समान रखें ताकि लेआउट टूटे नहीं।
11 लेयर्स का नाम बदलें (हैंडऑफ तैयारी)
इस पेज में सभी लेयर्स का नाम इस पैटर्न का उपयोग करके बदलें: [Section]/[Component]/[State] उदाहरण: Settings/NotificationRow/Default लॉक की गई बैकग्राउंड फ्रेम्स का नाम न बदलें। छुपी हुई लेयर्स को छोड़ें।

MCP + कोड हैंडऑफ प्रॉम्प्ट्स (Claude Code / Cursor)

12 Figma फ्रेम से React
MCP के माध्यम से चयनित Figma फ्रेम पढ़ें। [Tailwind / हमारी Shadcn लाइब्रेरी] का उपयोग करके एक React कंपोनेंट जेनरेट करें: - फाइल में डिज़ाइन टोकन से स्पेसिंग और रंगों का मिलान करें - सेमेंटिक HTML (nav, main, section) का उपयोग करें - 768px और 1024px पर रिस्पॉन्सिव ब्रेकपॉइंट्स शामिल करें - उपयोगकर्ता डेटा के लिए टाइप्ड props के साथ SettingsPage.tsx के रूप में एक्सपोर्ट करें हेक्स वैल्यू हार्डकोड न करें — Figma वेरिएबल्स से टोकन नाम का उपयोग करें।

अन्वेषण और तुलना टेम्प्लेट्स

13 तीन लेआउट दिशाएं
डेस्कटॉप 1440×900 पर [स्क्रीन प्रकार] के लिए 3 अलग-अलग लेआउट दृष्टिकोण जेनरेट करें: A — साइडबार नेविगेशन B — टॉप टैब नेविगेशन C — कार्ड-आधारित हब तीनों में समान सामग्री। प्रकाशित कंपोनेंट्स का उपयोग करें। फ्रेम्स को 80px गैप के साथ साइड बाई साइड रखें। प्रत्येक फ्रेम को छोटे कैप्शन टेक्स्ट में "Direction A/B/C" लेबल करें।
14 डिज़ाइन सिस्टम ऑडिट प्रॉम्प्ट
चयनित पेज की समीक्षा करें और सूची बनाएं: - प्रकाशित लाइब्रेरी से नहीं आने वाले कंपोनेंट्स ("detached" के रूप में फ्लैग करें) - वेरिएबल का उपयोग न करने वाले रंग - टेक्स्ट स्टाइल का उपयोग न करने वाला टेक्स्ट - Auto layout गैप जो 4/8/16/24/32 नहीं हैं फ्रेम नोट्स में चेकलिस्ट के रूप में आउटपुट करें। ऑटो-फिक्स न करें — केवल रिपोर्ट करें।
15 रिफाइन पास (दूसरा प्रॉम्प्ट)
जेनरेट किए गए फ्रेम पर, केवल ये फिक्स लागू करें: 1. सेक्शन के बीच वर्टिकल स्पेसिंग को 32px तक बढ़ाएं 2. प्राथमिक बटन को Button/Primary/Large वेरिएंट में बदलें 3. ईमेल फील्ड के नीचे सहायक टेक्स्ट जोड़ें: "हम कभी आपका ईमेल साझा नहीं करेंगे" 4. सूची पंक्तियों में सभी आइकन को 24×24 पर संरेखित करें लेआउट को पुनर्गठित न करें। नए सेक्शन न जोड़ें।

टेम्प्लेट्स को कैसे चेन करें

प्रोडक्शन वर्कफ़्लो: टेम्प्लेट 13 (अन्वेषण) → दिशा चुनें → टेम्प्लेट 1 या 2 (पूरी स्क्रीन) → टेम्प्लेट 15 (रिफाइन) → टेम्प्लेट 11 (नाम बदलें) → टेम्प्लेट 12 (MCP से कोड)। हर चरण एक विशाल निर्देश के बजाय केंद्रित प्रॉम्प्ट का उपयोग करता है जो एजेंट को भ्रमित करता है।

पूर्ण Figma AI इकोसिस्टम (Agent, Make, MCP, Skills, Sites) के लिए, हमारी पूर्ण 2026 गाइड देखें। चरणबद्ध एजेंट सेटअप के लिए, Design Agent का उपयोग कैसे करें देखें। क्रेडिट बजटिंग के लिए, Figma AI क्रेडिट्स समझाया गया देखें।

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

क्या ये मुफ्त Figma प्लान पर काम करते हैं?

टेम्प्लेट्स 10–11 (Replace Content, नाम बदलें) मुफ्त प्लान पर काम करते हैं। Design Agent और Make को पेड प्लान और बीटा एक्सेस की आवश्यकता होती है। MCP किसी भी प्लान के साथ काम करता है जो आपकी सीट के लिए Dev Mode / MCP को सक्षम कर सकता है।

क्या मुझे पूरा टेम्प्लेट पेस्ट करना चाहिए या इसे छोटा करना चाहिए?

पूरे टेम्प्लेट से शुरुआत करें। एक बार जब आप देख लें कि एजेंट किन लाइनों को अनदेखा करता है, तो छोटा करें। छोटे प्रॉम्प्ट्स तभी काम करते हैं जब आप जानते हैं कि आपके डिज़ाइन सिस्टम को वास्तव में किन बाध्यताओं की आवश्यकता है।

क्या मैं Make और Design Agent के लिए समान प्रॉम्प्ट का उपयोग कर सकता हूं?

नहीं — Make बिल्ड/प्रोटोटाइप भाषा की अपेक्षा करता है और क्रेडिट्स को अलग तरीके से खर्च करता है। कैनवस लेयर्स के लिए Design Agent टेम्प्लेट्स और इंटरैक्टिव आउटपुट के लिए Make टेम्प्लेट्स का उपयोग करें। इन्हें मिलाने से भ्रमित परिणाम मिलते हैं।

मैं प्रॉम्प्ट्स को Skills के रूप में कैसे सेव करूं?

टेम्प्लेट्स 8–9 को अपनी टीम की Skills लाइब्रेरी में Skill markdown फाइलों में कॉपी करें। एजेंट पैनल में /skill-name के साथ इनवोक करें। जब आपके कंपोनेंट नाम बदलें तो Skills को अपडेट करें — हमारी Skills गाइड देखें।

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