figma-generate-designउद्देश्य, उपयोग और स्रोत

यह कौशल क्या करता है

जब कार्य में किसी एप्लिकेशन पेज, व्यू या मल्टी-सेक्शन लेआउट को फिग्मा में रूपांतरित करना शामिल हो, तो फिग्मा के साथ इस कौशल का उपयोग करें। ट्रिगर: 'फिग्मा में लिखें', 'कोड से फिग्मा में बनाएं', 'पेज को फिग्मा में पुश करें', 'इसे लें'app/page'इसे फिग्मा में बनाएं', 'एक स्क्रीन बनाएं', 'फिग्मा में एक लैंडिंग पेज बनाएं', 'कोड से मेल खाने के लिए फिग्मा स्क्रीन को अपडेट करें'। जब भी उपयोगकर्ता कोड या विवरण से फिग्मा में पूरा पेज, स्क्रीन या व्यू बनाना या अपडेट करना चाहता है, तो यह पसंदीदा वर्कफ़्लो कौशल है। यह search_design_system के माध्यम से डिज़ाइन सिस्टम घटकों, वेरिएबल्स और स्टाइल्स का पता लगाता है, उन्हें इम्पोर्ट करता है, और हार्डकोडेड मानों के बजाय डिज़ाइन सिस्टम टोकन का उपयोग करके स्क्रीन को धीरे-धीरे सेक्शन-दर-सेक्शन असेंबल करता है।

अपस्ट्रीम वर्कफ़्लो कैसे काम करता है

const frame = figma.currentPage.findOne(n => n.name === "Existing Screen");
const uniqueSets = new Map();
frame.findAll(n => n.type === "INSTANCE").forEach(inst => {
  const mc = inst.mainComponent;
  const cs = mc?.parent?.type === "COMPONENT_SET" ? mc.parent : null;
  const key = cs ? cs.key : mc?.key;
  const name = cs ? cs.name : mc?.name;
  if (key && !uniqueSets.has(key)) {
    uniqueSets.set(key, { name, key, isSet: !!cs, sampleVariant: mc.name });
  }
});
return [...uniqueSets.values()];

आवश्यकताएँ और सेटअप

सीमाएं और गुणवत्ता जांच

इस फ़ाइल से कोई अलग सीमा अंश नहीं चुना गया है। इसका मतलब यह नहीं है कि यह स्किल हर इनपुट या वातावरण के लिए सुरक्षित है। संपूर्ण स्रोत की समीक्षा करें और अपने परिणाम की पुष्टि करें।

सुरक्षित परीक्षण से शुरुआत करें

1. समर्थित होस्ट और रिपॉजिटरी इंस्टॉलेशन निर्देशों की जाँच करें। स्किल डायरेक्टरी और उससे संबंधित स्क्रिप्ट, एसेट्स और डॉक्यूमेंटेशन को एक साथ रखें;SKILL.mdअकेले होने पर निर्भरताओं को छोड़ा जा सकता है।
2. एजेंट को अपना वास्तविक इनपुट, अपेक्षित आउटपुट और स्वीकृति मानदंड प्रदान करें। इनवोकेशन सिंटैक्स और उपलब्ध उपकरण होस्ट पर निर्भर करते हैं; यह साइट किसी सार्वभौमिक इंस्टॉलेशन कमांड को नहीं मानती है।
3. डिस्पोजेबल प्रोजेक्ट या उसकी कॉपी पर मूल वर्कफ़्लो को आज़माएँ। फ़ाइलों, रिमोट सेवाओं या बिल योग्य संसाधनों में परिवर्तन करने वाले कार्यों की अनुमति देने से पहले उनकी समीक्षा करें।
4. स्रोत गुणवत्ता जांच और अपनी आवश्यकताओं के आधार पर आउटपुट को सत्यापित करें। सफल ट्रिगर या उच्च रिपॉजिटरी स्टार संख्या सही परिणाम की गारंटी नहीं देते।

कौशल प्रारूप और निर्देशिका विनिर्देश ↗

मूल लेख में आगे पढ़ें

• डिजाइन सिस्टम से स्क्रीन बनाएं/अपडेट करें
• कौशल सीमाएँ
• आवश्यक शर्तें
• generate_figma_design के साथ समानांतर वर्कफ़्लो (केवल वेब ऐप्स के लिए)
• आवश्यक कार्यप्रवाह
• कदम1स्क्रीन को समझें
• कदम2डिजाइन सिस्टम की खोज करें — घटक, चर और शैलियाँ
• 2ए: घटकों की खोज करें
• 2b: चरों (रंग, रिक्ति, त्रिज्या) का पता लगाएं
• 2c: शैलियों की खोज करें (पाठ शैलियाँ, प्रभाव शैलियाँ)
• कदम3सबसे पहले पेज रैपर फ्रेम बनाएं
• कदम4रैपर के अंदर प्रत्येक अनुभाग का निर्माण करें
• setProperties() का उपयोग करके इंस्टेंस टेक्स्ट को ओवरराइड करें
• स्रोत कोड के डिफ़ॉल्ट मानों को ध्यानपूर्वक पढ़ें।
• मैन्युअल रूप से क्या बनाना है और डिज़ाइन सिस्टम से क्या आयात करना है
• कदम5पूर्ण स्क्रीन को मान्य करें
• कदम6मौजूदा स्क्रीन को अपडेट करना
• संदर्भ दस्तावेज़
• त्रुटि निवारण
• सर्वोत्तम प्रथाएं

सम्बंधित योग्यता

• chatgpt-appsopenai/skills
• figmaopenai/skills
• figma-code-connect-componentsopenai/skills
• figma-create-design-system-rulesopenai/skills

अनुवाद और दायरा

यह पठन मार्गदर्शिका ऊपर पिन किए गए अंशों में से चयनित अंशों को प्रस्तुत करती है।SKILL.mdयह अनुवाद सहायता से किया गया है। यह कोई संपूर्ण नियमावली या परीक्षित संगतता का दावा नहीं है। उपयोग करने से पहले मूल दस्तावेज़ और उससे संबंधित फ़ाइलों को पढ़ें।

यह परिचय नीचे पिन किए गए संस्करण को संदर्भित करता है; वर्तमान रिपॉजिटरी गतिविधि और संग्रह समय अलग से दिखाए गए हैं।

पिन किया गया स्रोत

मूल लेख पढ़ें ↗

स्रोत प्राप्त किया गया

2026-10-29T09:32:23Z

स्रोत कमिट

49f948faa9258a0c61caceaf225e179651397431

स्रोत SHA-256

45d2b97103bdeb31cb2744fca2c79bcefb659c88faca626bea30ec2f9342dcc9