Figma से Godot UI: AI Studio के साथ Control Hierarchy निर्यात करें (चरण-दर-चरण)

अधिकांश गेम UI Figma में शुरू होता है: मुख्य मेनू, HUD, दुकान स्क्रीन, सेटिंग्स। Godot में आपको एक रखरखाव योग्य Control ट्री चाहिए—MarginContainer, VBoxContainer, TextureRect, Label, Button, और Theme—न कि असमूहित PNGs का फ़ोल्डर।

सामान्य बाधा बीच में है: डिज़ाइन Frames बदलता रहता है जबकि इंजीनियरिंग कंटेनर और एंकर हाथ से बनाती है। यह लेख एक दोहराने योग्य मार्ग को कवर करता है: VberAI Studio (संक्षेप में AI Studio) का उपयोग करके Figma संरचना को Godot-तैयार Control पदानुक्रम में बदलें, आयात से संपादक जांच तक।

हाथ से बनाने बनाम AI Studio कब समझदारी है, इसकी तुलना के लिए देखें Figma से Godot: मैनुअल बनाम AI Studio। Unity पथ के लिए, देखें Figma से Unity UI।

पूर्णता मानदंड: “Godot में” का क्या अर्थ है

केवल बनावट पर्याप्त नहीं है। आपके पास यह भी होना चाहिए:

1. एक नोड ट्री जो सार्थक Figma Frames (शीर्ष पट्टी, सूची, निचली पट्टी, इत्यादि) से मेल खाता है
2. मुख्य क्रोम जो 16:9, पोर्ट्रेट, और विंडोड आकारों में पूरे ट्री को फिर से ट्यून किए बिना टिकता है
3. टेक्स्ट परतें जो जहां संभव हो Label (या आपके प्रोजेक्ट के टेक्स्ट नोड्स) बनी रहें—छवियों में बेक न हों
4. Figma क्रोम परिवर्तनों के बाद पुनः निर्यात करने का एक तरीका, न कि स्क्रैच से दृश्य का पुनर्निर्माण

सिग्नल, डेटा बाइंडिंग, और स्थानीयकरण कुंजियाँ अभी भी Godot में हैं। AI Studio “मॉक से लेआउट शेल का पुनर्निर्माण” हटा देता है।

पूर्वापेक्षाएँ

आइटम	नोट्स
Figma	स्क्रीनें पठनीय नामों वाले Frames में विभाजित
AI Studio	VberAI Studio तक पहुंच
Godot	Godot 4.x प्रोजेक्ट पसंद करें; निर्यात लक्ष्य Godot पर सेट करें
एसेट परंपराएँ	UI दृश्य फ़ोल्डरों (जैसे res://ui/generated/) और Theme प्लेसमेंट पर सहमत हों

एकल चपटा पूर्ण-स्क्रीन स्क्रीनशॉट भेजने से बचें—यह आपको मैन्युअल स्लाइसिंग में वापस खींचता है।

चरण 1: Figma को इस तरह व्यवस्थित करें कि यह UI ट्री जैसा पढ़े

आयात से पहले एक छोटी सफाई इंजन में बाद में नोड्स को विभाजित करने से सस्ती है।

अभ्यास	क्यों
स्पष्ट Frame नाम (Panel_HUD, Btn_Play, List_Item)	नाम Godot नोड नाम बन जाते हैं
समूहों के लिए Frames / Auto Layout का उपयोग करें; पूरी स्क्रीनों को मर्ज करने से बचें	आयात के बाद पदानुक्रम पहचानने योग्य रहता है
जब संभव हो कॉपी को टेक्स्ट परतों के रूप में रखें	आसान Label मैपिंग
नौ-स्लाइस पैनल को निश्चित आइकनों से अलग करें	स्ट्रेच नियम स्पष्ट रहते हैं
ड्राफ्ट Frames और अप्रयुक्त वेरिएंट छिपाएँ	निर्यात ट्री में कम शोर

चरण 2: AI Studio में Figma आयात करें

1. VberAI Studio खोलें
2. आयात शुरू करें, Figma चुनें, और फ़ाइल अपलोड करें (या उत्पाद के समर्थित Figma कनेक्शन का उपयोग करें)
3. परत / Frame ट्री में, उन स्क्रीनों की पुष्टि करें जिन्हें आप वास्तव में शिप करते हैं—फ़ाइल के हर ड्राफ्ट को नहीं

आदर्श रूप से आप बाईं ओर संरचना, बीच में कैनवास पूर्वावलोकन, और दाईं ओर इंजन-उन्मुख निर्यात विकल्प देखते हैं। निर्यात से पहले संरचना की पुष्टि करें।

चरण 3: निर्यात से पहले पदानुक्रम को प्रमाणित करें

कैनवास पर, जाँचें:

• पैनल नेस्टिंग हेड / बॉडी / फुटर (या आपके क्रोम कन्वेंशन) से मेल खाती है
• बटन हिट क्षेत्र सजावटी आइकनों से अलग हैं
• स्थानीयकरण योग्य कॉपी अभी भी टेक्स्ट परतें हैं
• स्ट्रेचेबल पैनल बनाम निश्चित आकार के आइकन प्रतिष्ठित हैं

AI Studio में नामकरण या समूहन ठीक करें जब आप कर सकें। Godot में टूटे हुए .tscn को सुलझाना अधिक खर्चीला है।

छोटे लेआउट समायोजन के लिए, प्राकृतिक भाषा में इरादे का वर्णन करें (शीर्षक-से-प्राथमिक-बटन स्पेसिंग कसें, सूची-आइटम ऊंचाई एकीकृत करें, ड्राफ्ट बैज छिपाएँ)। लक्ष्य क्रोम को इंजन ऑब्जेक्ट बनने से पहले तय करना है—चैट के माध्यम से पूरे कला सेट को फिर से नहीं बनाना।

चरण 4: Godot के लिए निर्यात करें

लक्ष्य इंजन को Godot पर सेट करें। “केवल स्प्राइट्स” के बजाय Control पदानुक्रम / दृश्य पसंद करें।

निर्यात के बाद, Godot में:

1. एसेट्स को सहमत फ़ोल्डर में रखें (जैसे res://ui/generated/)
2. निर्यात किए गए दृश्य को CanvasLayer या अपने प्रोजेक्ट UI रूट के अंतर्गत संलग्न करें
3. पुष्टि करें कि रूट एक समझदार Control (या कंटेनर) ट्री है
4. संपादक में कई रिज़ॉल्यूशन पूर्वावलोकन करें
5. GDScript / C# के साथ सामान्य रूप से pressed और अन्य सिग्नल, साथ ही डेटा भरना, वायर करें

तर्क प्रोजेक्ट में रहता है। आप जो छोड़ते हैं वह Figma से हर TextureRect / Label / कंटेनर को हाथ से स्टैक करना है।

चरण 5: संपादक स्वीकृति चेकलिस्ट

जाँच	पास मानदंड
नोड नाम	मुख्य Frames से मेल खाते हैं; अर्थहीन Node2D / Control इंडेक्स का ढेर नहीं
लेआउट	विंडो खिंचने पर क्रोम उपयोग योग्य रहता है
टेक्स्ट	Label कॉपी बदलने के लिए पूरी स्क्रीन को कला के रूप में पुनः निर्यात करने की आवश्यकता नहीं है
Theme	फ़ॉन्ट और रंग प्रोजेक्ट Theme से जुड़ सकते हैं, या आप जानते हैं कि Theme को अभी भी हाथ से पास की आवश्यकता है
पुनः निर्यात	Figma क्रोम परिवर्तनों के बाद, एक नया निर्यात दृश्य को बदल सकता है या उसके बगल में बैठ सकता है—आपको अटका नहीं छोड़ता

फ़ॉन्ट स्वैप, सुरक्षित क्षेत्र, और स्थानीयकरण को आमतौर पर अभी भी एक पास की आवश्यकता होती है। यह सामान्य पॉलिश है, विफल पाइपलाइन नहीं।

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

क्या यह Figma “टू कोड” प्लगइन्स के समान है?
उनमें से अधिकांश वेब को लक्षित करते हैं। Godot को Control / कंटेनर / Theme परंपराओं की आवश्यकता होती है। इंजन-अनुकूल निर्यात वेब कोडजेन के समान उत्पाद नहीं है।

क्या हम अभी भी Figma में डिज़ाइन करते हैं?
हाँ। AI Studio डिज़ाइन संरचना का उपभोग करता है; यह कला दिशा निर्धारित नहीं करता। लेआउट और टोकन अभी भी Figma से आते हैं।

Godot MCP कहाँ फिट बैठता है?
AI Studio डिज़ाइन → Control संरचना को संभालता है। Godot MCP दृश्य प्रोजेक्ट में आने के बाद मदद करता है—नोड्स का नाम बदलें, सिग्नल हुक करें, Cursor और समान क्लाइंट से ट्री का निरीक्षण करें। MCP “छवि से पूर्ण UI उत्पन्न” नहीं करता। सेटअप: Godot MCP इंस्टॉल।

क्या पहला निर्यात पिक्सेल-परिपूर्ण होगा?
आमतौर पर नहीं। जीत मिनटों में संरचना प्रवासन है, आधे दिन के पुनर्निर्माण के बजाय; पिक्सेल और Theme Godot में समाप्त होते हैं।

डिज़ाइन परिवर्तनों के बाद पुनः चलाने का तरीका

Figma परिवर्तन	सुझाव
क्रोम पंक्तियाँ/स्तंभ, नए टैब	AI Studio के माध्यम से पुनः निर्यात करें
केवल आइकन टिंट या कॉपी	Godot दृश्य / Theme / अनुवाद तालिकाएँ पसंद करें
ब्रांड-नया पूर्ण आर्टबोर्ड	नया निर्यात → नया .tscn या सहमत पथ बदलें