Figma / PSD हैंडऑफ चेकलिस्ट: गेम UI डिज़ाइन में रीवर्क कैसे टालें

जब इंजीनियरिंग UI को रीवर्क करती है, तो आधी बार यह सौंदर्य का मुद्दा नहीं होता—बल्कि यह होता है कि हैंडऑफ इंजन की आवश्यकताओं को पूरा नहीं करता। आप Figma या Photoshop में एक फ़्रेम संशोधित करते हैं, और इंजीनियरिंग को फिर से स्लाइस करना, Canvas दोबारा बनाना और एंकर फिर से अलाइन करना पड़ता है। टाइमलाइन खिंच जाती है, और इसका इससे कोई लेना-देना नहीं है कि आपने कौन-सा AI इमेज टूल इस्तेमाल किया।

नीचे एक हैंडऑफ-पूर्व चेकलिस्ट है जो उच्च-इरादे वाले परिदृश्यों को कवर करती है: Figma export Unity, PSD import Unity UI, game UI slicing, इवेंट रीस्किन, और बहुभाषी UI। अंतिम अनुभाग “केवल PNG” और स्ट्रक्चर्ड एक्सपोर्ट के बीच के अंतर को समझाता है; टूल संदर्भ बिंदु हैं, किसी एक उत्पाद का प्रचार नहीं।

---

इंजीनियरिंग को वास्तव में क्या चाहिए

उन्हें यह चाहिए	यह नहीं
नामित पदानुक्रम (बटन, पैनल, सूची आइटम)	एक फुल-स्क्रीन JPG
बटन normal / pressed / disabled	एक “क्लिक करने योग्य दिखने वाली” इमेज
बदले जा सकने वाले टेक्स्ट लेयर	सब कुछ डिस्प्ले टाइप के रूप में रास्टराइज़्ड
सापेक्ष स्थितियाँ और एंकर अर्थ	लेआउट संदर्भ + 20 बिखरी PNGs
पुन: प्रयोज्य प्रीफ़ैब संरचना	हर इवेंट में शून्य से दोबारा निर्माण

एक-पंक्ति स्वीकृति परीक्षण: Unity UGUI / Godot Control / Cocos UI में इम्पोर्ट के बाद, कॉपी बदलने या रीस्किन करने पर पूरा ट्री दोबारा बनाने की आवश्यकता नहीं होनी चाहिए।

---

हैंडऑफ से पहले 12 जाँचें

संरचना और नेमिंग

#	जाँच	नोट्स
1	अर्थपूर्ण Frame / समूह नाम	Panel_Shop, Btn_Buy—Group 12 नहीं
2	इंटरैक्टिव और सजावटी लेयर अलग करें	बैकग्राउंड, बॉर्डर, आइकन, टेक्स्ट
3	सूची आइटम को पुन: प्रयोज्य समूह के रूप में	List_Item को डुप्लिकेट किया जा सकता है
4	ड्राफ्ट और अप्रचलित Frames छिपाएँ	एक्सपोर्ट में कम शोर

स्टेट्स और स्पेक्स

#	जाँच	नोट्स
5	पूर्ण बटन स्टेट्स	normal / pressed / disabled (या टीम की नेमिंग परंपरा)
6	9-slice / स्ट्रेच क्षेत्र चिह्नित	पैनल और इनपुट को हार्ड-स्केल नहीं करना चाहिए
7	लक्ष्य रिज़ॉल्यूशन और सेफ एरिया	पोर्ट्रेट मोबाइल: नॉच और बॉटम बार
8	फ़ॉन्ट रणनीति	लोकलाइज़ेशन के लिए टेक्स्ट लेयर; डिस्प्ले टाइप अलग से बताएँ

लाइव ऑप्स और लोकलाइज़ेशन

#	जाँच	नोट्स
9	कॉपी लंबाई की गुंजाइश	जर्मन / स्पेनिश अक्सर अंग्रेज़ी से 30%+ लंबे होते हैं
10	रीस्किन = केवल विज़ुअल	इवेंट स्किन: वही लेआउट, नई आर्ट और रंग
11	लोकलाइज़ेशन: कॉपी बनाम लेआउट	आदर्श: वही संरचना, कई भाषा फ़ाइलें
12	एक्सपोर्ट प्रारूप प्रलेखित	लेयर्ड PSD / Figma लिंक, या तय स्लाइस नेमिंग

Figma तैयारी: Figma → Unity वर्कफ़्लो। PSD तैयारी: 5 मिनट में PSD को Unity UI में इम्पोर्ट करें।

---

तीन हैंडऑफ पथ (वस्तुनिष्ठ तुलना)

पथ	दृष्टिकोण	किसके लिए सर्वोत्तम	कठिनाइयाँ
A. मैनुअल स्लाइसिंग	PNG + लेआउट स्क्रीनशॉट एक्सपोर्ट करें; इंजीनियरिंग हाथ से बनाए	न्यूनतम UI, एकबारगी डेमो	हर संशोधन = फिर से स्लाइस और पुनर्निर्माण
B. इंजन प्लगइन्स	Figma Converter, Psd-Exporter, आदि	तय स्पेक्स वाली टीमें	मल्टी-इंजन अक्सर दोबारा करना पड़ता है; प्लगइन गुणवत्ता भिन्न
C. स्ट्रक्चर्ड कैनवास	लेयर्ड फ़ाइल → गेम कैनवास → इन-प्लेस स्प्लिट → Prefab एक्सपोर्ट	मल्टी-स्क्रीन UI, बार-बार रीस्किन / ग्लोबल लॉन्च	गेम-उन्मुख एक्सपोर्ट फ़्लो अपनाना आवश्यक

पथ C VberAI Studio जैसे उत्पादों में आम है: PSD / Figma पार्स करें → लेआउट-संरक्षित UI स्प्लिट → Unity / Godot / Cocos में एक्सपोर्ट करें (गेम UI को इंजन में स्प्लिट करें देखें)। डिज़ाइनर अब भी Figma में काम कर सकते हैं; साइन-ऑफ के बाद, हर संशोधन पर मैनुअल रूप से 20 PNGs एक्सपोर्ट करने के बजाय स्ट्रक्चर्ड एक्सपोर्ट का उपयोग करें।

---

सामान्य डिज़ाइनर परिदृश्य

गेम UI स्लाइसिंग / इन-प्लेस स्लाइस

यदि फुल-स्क्रीन कॉन्सेप्ट केवल PNG है, तो इंजीनियरिंग बटन की सीमाओं का अनुमान लगाती है। सुरक्षित फ़्लो: स्क्रीन को कैनवास पर डालें → नियंत्रणों को इन-प्लेस स्प्लिट करें (इन-प्लेस स्लाइसिंग) ताकि स्थिति डेटा स्प्लिट के साथ चले—“स्लाइस सही दिखते हैं पर इंजन में सब शिफ्ट हो जाता है” से बचें।

Figma से Unity / Godot में एक्सपोर्ट

यदि कोई प्लगइन केवल फ्लैट स्प्राइट पैक आउटपुट करता है, तो इंजीनियरिंग अभी भी RectTransform / Control ट्री दोबारा बनाती है। मूल्यांकन करते समय पूछें: डिलीवरेबल एक Prefab / पदानुक्रम है, या बिखरी इमेजों की ज़िप? Godot तुलना: Figma → Godot मैनुअल बनाम AI वर्कफ़्लो।

गेम UI रीस्किन (मौसमी / इवेंट)

हैलोवीन, क्रिसमस, आदि: वही लेआउट, नई थीम एसेट्स। यदि हर रीस्किन का मतलब फिर से स्लाइस और पुनर्निर्माण है, तो लाइव-ऑप्स कैडेंस धीमा हो जाता है। रीस्किन टूल्स को नोड संरचना अपरिवर्तित रखनी चाहिए (UI रीस्किन और थीम वेरिएंट)।

गेम UI अनुवाद / Figma बहुभाषी

ग्लोबल लॉन्च की चूक: अनूदित कॉपी लेआउट से बाहर निकल जाती है। आदर्श फ़्लो: केवल स्ट्रिंग्स बदलें, Frames को रीफ़्लो न करें (वन-क्लिक UI अनुवाद)। Figma में, गुंजाइश के लिए min/max चौड़ाई के साथ Auto Layout का उपयोग करें।

आइकन और अर्ध-पारदर्शी एसेट्स

स्किल आइकन और VFX UI को अक्सर इम्पोर्ट से पहले बैकग्राउंड रिमूवल की आवश्यकता होती है (बाल, पारदर्शिता, ग्लो)। सामान्य मैटिंग किनारों को धुंधला कर देती है; गेम-उन्मुख टूल अल्फा पर ज़ोर देते हैं (ग्लो / VFX मैटिंग), फिर कैनवास या इंजन पर वापस।

---

यह AI इमेज टूल्स से कैसे संबंधित है

Midjourney, Jimeng, GPT Image 2, आदि विज़ुअल दिशा के लिए अच्छे हैं; यदि गंतव्य इंजन है, तो आपको अभी भी स्प्लिटिंग और पदानुक्रम चाहिए। सामान्य संयोजन:

AI फुल-स्क्रीन UI कॉन्सेप्ट → डिज़ाइनर Figma में लेयर व्यवस्थित करता है → इंजन में स्ट्रक्चर्ड एक्सपोर्ट

“पोस्टर-ग्रेड एकल इमेज” को अंतिम हैंडऑफ न मानें। टूल तुलनाएँ: AI गेम डिज़ाइन आर्ट जनरेटर।

---

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

क्या मैं केवल PNGs हैंडऑफ कर सकता हूँ? डेमो के लिए ठीक; प्रोडक्शन UI बार-बार रीवर्क होगा। कम से कम लेआउट नोट्स और नेमिंग नियम संलग्न करें।

क्या Figma Auto Layout का सही होना ज़रूरी है? वेब-परफ़ेक्ट नहीं—लेकिन ग्रुपिंग और नेमिंग पिक्सेल-नजिंग से अधिक मायने रखती हैं।

इंजीनियरिंग का “स्लाइस गलत हैं” से क्या मतलब है? आमतौर पर: स्टेट्स गायब, गलत 9-slice, हिट एरिया ≠ विज़ुअल, या बिखरी इमेजों ने सापेक्ष स्थितियाँ खो दीं।

रीस्किन बनाम UI दोबारा करना? रीस्किन: वही संरचना, नया विज़ुअल। दोबारा: पदानुक्रम भी बदलता है। लाइव ऑप्स को रीस्किन पथ पर रहना चाहिए।

क्या डिज़ाइनरों को Unity सीखना चाहिए? स्क्रिप्टिंग नहीं—लेकिन Canvas / Anchor / Prefab की मूल बातें संचार लागत को तेज़ी से घटाती हैं।

क्या VberAI Studio Google AI Studio जैसा है? नहीं। पूर्व गेम कैनवास और इंजन एक्सपोर्ट है; बाद वाला Google का सामान्य AI डेव वातावरण है। तुलना देखें।