एंड्रॉयड

Html में adobe xd को कैसे export करें

All 50+ Adobe apps explained in 10 minutes

All 50+ Adobe apps explained in 10 minutes

विषयसूची:

Anonim

Adobe XD एक अद्भुत डिज़ाइन टूल है जो आपको बिना किसी पूर्व वेब विकास अनुभव के शानदार वेबसाइट डिज़ाइन आसानी से बनाने देता है। आप फ़ोटोशॉप से ​​अपने डिज़ाइन की PSD फ़ाइलों को आयात कर सकते हैं और एक आंख को पकड़ने वाली वेबसाइट UI बना सकते हैं।

ये डिज़ाइन डेवलपर्स को यह समझने में मदद करने में एक लंबा रास्ता तय करते हैं कि आप कैसे अपनी वेबसाइट को देखना चाहते हैं और विकास प्रक्रिया को उनके हिस्से में आसान बनाना चाहते हैं। हालाँकि, केवल कुछ सीमित तरीके हैं जिनसे आप सॉफ़्टवेयर से डिज़ाइन निर्यात कर सकते हैं।

आप या तो उन्हें एक XD फ़ाइल के रूप में सहेजने के लिए चुन सकते हैं और आशा करते हैं कि डेवलपर के पास पहले से ही अपने सिस्टम में इंस्टॉल किया गया सॉफ्टवेयर है या प्रत्येक आर्टबोर्ड को एक अलग PNG फ़ाइल के रूप में निर्यात कर सकता है जो उपयोग करने के लिए थोड़ा असुविधाजनक हो सकता है।

गाइडिंग टेक पर भी

मॉकअप और वायरफ्रेम बनाने के लिए सर्वश्रेष्ठ 3 डिज़ाइन उपकरण

शुक्र है, एक आसान तृतीय-पक्ष प्लगइन है जो आपको आर्टबोर्ड को HTML फ़ाइलों के रूप में निर्यात करने देता है और यही मैं बात करता हूं। लेकिन इससे पहले कि हम इसे प्राप्त करें, कुछ ऐसा है जिसे आपको जानना चाहिए।

नोट: इस विधि का उपयोग करके उत्पन्न HTML फ़ाइल को किसी भी तरह से पूर्ण वेब पेज के लिए आधार नहीं माना जाना चाहिए। यह विधि केवल एक डेवलपर के साथ अपने डिजाइनों को आसानी से साझा करने का एक साधन है न कि एक कार्यात्मक वेबसाइट विकास प्रक्रिया।

एडोब एक्सडी फाइल को प्लगइन्स का उपयोग करके HTML में निर्यात करें

अब जबकि हमें वह मिल गया है, बस आवश्यक प्लगइन डाउनलोड करने के लिए इन सरल चरणों का पालन करें और फिर एडोब एक्सडी फ़ाइलों को HTML में निर्यात करें:

चरण 1: सॉफ्टवेयर के ऊपरी बाएँ कोने में हैमबर्गर मेनू बटन पर क्लिक करें।

चरण 2: सभी तरह से नीचे स्क्रॉल करें और फिर प्लगइन्स विकल्प पर क्लिक करें। यह मुख्य मेनू के दाईं ओर एक नया प्लगइन्स पैनल खोलेगा।

चरण 3: प्लगइन्स पैनल से डिस्कवर प्लगइन्स विकल्प का चयन करें।

चरण 4: निम्न पृष्ठ में, HTML के लिए खोजें और फिर वेब निर्यात प्लगइन के बगल में स्थापित बटन पर क्लिक करें।

एक बार जब आप आवश्यक प्लगइन स्थापित कर लेते हैं, तो उस परियोजना को खोलें जिसे आप HTML में निर्यात करना चाहते हैं और फिर निम्न चरणों के साथ जारी रखें। इस लेख के लिए मैं एक मुफ्त एडोब एक्सडी आर्टबोर्ड का उपयोग करूंगा जिसे मैंने ऑनलाइन पाया था।

चरण 5: उस आर्टबोर्ड का चयन करें जिसे आप उस पर क्लिक करके निर्यात करना चाहते हैं।

चरण 6: अब मेनू बटन पर क्लिक करें, प्लगइन्स पैनल पर जाएँ और फिर नए वेब निर्यात प्लगइन सेटिंग्स से एक्सपोर्ट आर्टबोर्ड विकल्प चुनें।

उसी विंडो से, आप एकाधिक आर्टबोर्ड या आपके द्वारा संपादित अंतिम आर्टबोर्ड को निर्यात करना भी चुन सकते हैं।

चरण 7: निर्यात आर्टबोर्ड पॉप-अप में, फ़ाइल के लिए एक नाम जोड़ें और फिर उस फ़ोल्डर का चयन करें जिसमें आप निर्यात फ़ोल्डर विकल्प के बगल में छोटे फ़ोल्डर आइकन पर क्लिक करके फ़ाइल को सहेजना चाहते हैं।

चरण 8: अब, यदि आप निर्यात की गई फ़ाइल में एक बाहरी स्क्रिप्ट, स्टाइलशीट या वैकल्पिक फ़ॉन्ट जोड़ना चाहते हैं, तो आप उन्हें उसी विंडो में जोड़ सकते हैं।

चरण 9: फिर, आप आकार विकल्प के बगल में रिक्त स्थान में मानों को टाइप करके आउटपुट HTML फ़ाइल के आयामों को चुन सकते हैं।

चरण 10: यह सुनिश्चित करने के लिए कि प्रोजेक्ट ठीक से है, आप प्रत्येक विकल्प के बगल में स्थित बॉक्स को चेक करके एक ही विंडो से विभिन्न स्केलिंग सेटिंग्स का चयन कर सकते हैं।

चरण 11: इसके अलावा, आप कीबोर्ड नेविगेशन, ऑटो-रिफ्रेश आदि जैसी किसी भी अतिरिक्त सेटिंग्स का चयन कर सकते हैं।

चरण 12: एक बार सभी सेटिंग्स को अंतिम रूप देने के बाद, बस ब्लू एक्सपोर्ट बटन पर क्लिक करें और आपका काम हो गया। आपका आर्टबोर्ड आपके द्वारा पहले चुने गए गंतव्य फ़ोल्डर में एक HTML फ़ाइल के रूप में दिखाई देगा।

यदि आप भी अपने डेवलपर के साथ उस जानकारी को साझा करना चाहते हैं, तो उसी विंडो से, आप अपने आर्टबोर्ड के CSS और मार्कअप को भी कॉपी कर पाएंगे।

एक बार फिर, ध्यान दें कि निर्यात किए गए HTML का उपयोग पूरी तरह कार्यात्मक वेबसाइट को विकसित करने के लिए नहीं किया जा सकता है। अब तक, आपके पास वेब पर Adobe XD प्रोजेक्ट को सीधे प्रकाशित करने का कोई तरीका नहीं है, और एडोब फ़ोरम पर कई चर्चाओं के अनुसार, जल्द ही कोई भी नहीं होगा।

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

गाइडिंग टेक पर भी

#डिज़ाइन

हमारे डिजाइन लेख पृष्ठ देखने के लिए यहां क्लिक करें

अपनी Adobe XD फ़ाइल को HTML में निर्यात करें

तो, अब जब आप जानते हैं कि अपनी Adobe XD फाइल को HTML में कैसे एक्सपोर्ट करना है, तो मुझे यकीन है कि आप अपने आर्टबोर्ड को किसी डेवलपर या क्लाइंट के साथ आसानी से साझा कर पाएंगे। और आपको किसी भी संगतता मुद्दों के बारे में चिंता करने की ज़रूरत नहीं होगी। प्लग इन को तुरंत स्थापित करें और आसानी से अपने आर्टबोर्ड को निर्यात करना शुरू करें।

अगला: नि: शुल्क इंटरैक्टिव वेबसाइटों के एक जोड़े के लिए निम्नलिखित लेख देखें, जिस पर आप सीख सकते हैं कि अपनी खुद की HTML वेबसाइट को कैसे कोड और लिख सकते हैं।