जो लोग चाहते हैं डिज़ाइन एडोब एक्सडी में वेबसाइट, यूआई किट एक परियोजना शुरू करने का एक शानदार तरीका है। डिज़ाइन नया। इन किटों के साथ, आप कुछ उपयोगी संसाधनों तक पहुँच सकते हैं जिन्हें आप संशोधित कर सकते हैं और अपनी वेबसाइट या ऐप डिज़ाइन के लिए उपयोग कर सकते हैं।
यदि आप इस प्रोग्राम में नए हैं और सुनिश्चित नहीं हैं कि UI किट का उपयोग कैसे करें एडोब XD, आप बिलकुल सही जगह पर आए हैं। इस लेख में, मैं आपको दिखाऊँगा कि प्रोग्राम में UI किट कैसे इंस्टॉल करें और फिर अपने प्रोजेक्ट के लिए उसमें दिए गए संसाधनों का इस्तेमाल कैसे करें।
एडोब एक्सडी में यूआई किट कैसे डाउनलोड करें
सबसे पहले, आइए देखें कि यूआई किट कैसे डाउनलोड करें एडोब एक्सडी , सीधे प्रोग्राम के अंदर से। शुरू करने के लिए बस इन चरणों का पालन करें:
प्रश्न 1: प्रोग्राम के ऊपरी बाएँ कोने में हैमबर्गर मेनू बटन पर क्लिक करें।
प्रश्न 2: मेनू में, “Get UI Kits” विकल्प तक नीचे स्क्रॉल करें, और फिर उपलब्ध तीन विकल्पों में से एक पर टैप करें।
इस लेख के लिए, मैं गूगल के मटेरियल यूआई टूलकिट का चयन करूंगा।
हालाँकि, अपने प्रोजेक्ट के आधार पर, आप Apple iOS या Microsoft Windows किट चुन सकते हैं। इससे एक आधिकारिक वेब पेज खुलेगा जहाँ से आप UI किट मुफ़्त में डाउनलोड कर सकते हैं।
प्रश्न 3: का पता लगाने एडोब XD UI किट निम्नलिखित वेबपेज पर उपलब्ध है, और इसे अपने सिस्टम पर डाउनलोड करें।
प्रश्न 4: अब डाउनलोड की गई फ़ाइल को Adobe XD में खोलें, और आपको संबंधित प्लेटफ़ॉर्म के लिए UI संसाधनों वाले आर्टबोर्ड का एक सेट दिखाई देगा।
आप Ctrl कुंजी दबाकर रख सकते हैं और स्क्रॉल व्हील को घुमाकर सभी अलग-अलग आर्टबोर्ड को ज़ूम इन/आउट कर सकते हैं।
यदि आप इसके बजाय वायरफ्रेम डाउनलोड करना चाहते हैं, तो आप Get UI Kits मेनू में वायरफ्रेम विकल्प पर क्लिक कर सकते हैं।
आप एडोब वेबसाइट पर Get UI Kits मेनू में More UI Kits विकल्प पर क्लिक करके अतिरिक्त UI किट भी खोज सकते हैं।
वेबसाइट पर चुनने के लिए कुछ बेहतरीन विकल्प हैं, जिनमें एक बहुत ही बढ़िया मूवी मैजिक यूआई सेट भी शामिल है, जो हेड-अप डिस्प्ले जैसा दिखता है।
अब जब आप जानते हैं कि UI किट कैसे डाउनलोड करें, तो आइए देखें कि उन्हें अपनी परियोजनाओं में कैसे उपयोग करें।
एडोब एक्सडी में यूआई किट का उपयोग कैसे करें
अपने प्रोजेक्ट में UI किट का उपयोग करने के लिए, बस इन सरल चरणों का पालन करें:
प्रश्न 1: उस UI तत्व पर ज़ूम करें जिसे आप अपने प्रोजेक्ट में उपयोग करना चाहते हैं और उसे चुनने के लिए उसके शीर्षक पर क्लिक करें।
प्रश्न 2: अब Ctrl+C शॉर्टकट का उपयोग करके आइटम को कॉपी करें।
प्रश्न 3: फिर मेनू से एक नया Adobe XD प्रोजेक्ट खोलें।
प्रश्न 4: यहां, Ctrl+V शॉर्टकट का उपयोग करके UI तत्व पेस्ट करें।
इस लेख के लिए, मैं Google के मटेरियल UI टूलकिट से मोबाइल डार्क एलिमेंट का इस्तेमाल करूँगा। इस एलिमेंट में आपको और लेयर बनाने में मदद करने के लिए गाइड शामिल हैं, लेकिन अगर आप इसका इस्तेमाल नहीं करना चाहते, तो आप अगले चरण का पालन करके इसे आसानी से हटा सकते हैं।
प्रश्न 5: गाइड हटाने के लिए, ऊपरी बाएँ कोने में स्थित लॉक आइकन पर क्लिक करें और फिर डिलीट दबाएँ। अगर आप एलिमेंट पर ज़्यादा ऑब्जेक्ट्स को ज़्यादा सटीक ढंग से रखने के लिए गाइड का इस्तेमाल करना चाहते हैं, तो आप इस चरण को छोड़ सकते हैं।
प्रश्न 6: अब इस पेज पर जोड़ने के लिए किसी अन्य एलिमेंट को चुनने के लिए यूजर इंटरफेस ग्रुप पर वापस जाएँ। फिर से, एलिमेंट के शीर्षक पर क्लिक करें और Ctrl+C शॉर्टकट का उपयोग करके उसे कॉपी करें।
मैं इस लेख के लिए एक मूल चरित्र बनाने जा रहा हूँ जिसका उपयोग मैं एक संवाद बॉक्स में करूँगा।
प्रश्न 7: नये तत्व को पिछले तत्व में चिपकाएँ और उसे गाइड के अनुसार संरेखित करें।
प्रश्न 8: अब, टोस्ट के हर तत्व को संपादित करने के लिए, टेक्स्ट बॉक्स पर डबल-क्लिक करें और फिर वह टेक्स्ट डालें जो आप इस्तेमाल करना चाहते हैं। सबसे पहले, टोस्ट का शीर्षक बदलें।
इसके बाद, टेक्स्ट बॉक्स पर डबल-क्लिक करके और जो आप जोड़ना चाहते हैं उसे टाइप करके टेक्स्ट सामग्री बदलें।
आप इसी तरह बटनों का पाठ भी बदल सकते हैं।
अपने टेक्स्ट का संपादन पूरा करने के बाद, आप उसका रंग और पारदर्शिता बदल सकते हैं। इसकी अपारदर्शिता बदलने के लिए, टूलबार में "अपारदर्शिता" विकल्प के नीचे स्लाइडर को दाईं ओर ले जाएँ।
टेक्स्ट का रंग बदलने के लिए, भरण विकल्प के बगल में स्थित आयत पर क्लिक करें और फिर रंग चयनकर्ता से नया रंग चुनें।
और इस तरह आप सिर्फ़ टेक्स्ट ही नहीं बदल सकते। आप डायलॉग बॉक्स के लगभग सभी तत्वों का रंग और पारदर्शिता भी बदल सकते हैं, जो कि अगर आप एक अनोखी रंग योजना का इस्तेमाल कर रहे हैं तो बहुत अच्छा है।
एक बार जब आप परिणाम से संतुष्ट हो जाएं, तो बस आगे बढ़ें और मेनू में “Save As” विकल्प पर क्लिक करके या Shift + Ctrl + S शॉर्टकट का उपयोग करके अपनी फ़ाइल को सहेजें।
यूआई किट के साथ अपने डिज़ाइन को सफल बनाएं।
अब जब आप Adobe XD में UI किट डाउनलोड और इस्तेमाल करना जानते हैं, तो मुझे यकीन है कि आप कुछ ही समय में शानदार डिज़ाइन बनाना शुरू कर देंगे। ये UI किट वाकई उपयोगी हैं और आपको हर एक UI एलिमेंट को डिज़ाइन करने की चिंता किए बिना सीधे अपने प्रोजेक्ट पर काम करने में मदद करती हैं।
