मैंने एक लैंडिंग पृष्ठ का फिग्मा डिज़ाइन बनाने में कई घंटे बिताए हैं। प्रत्येक रंग बिंदु पर है, प्रत्येक पिक्सेल निर्बाध उपयोगकर्ता प्रवाह के साथ है, लेकिन अब वास्तव में इस लैंडिंग पृष्ठ को कोड करने का चुनौतीपूर्ण हिस्सा आता है।

फिग्मा डिज़ाइन बनाना एक बहुत बड़ा काम है। यहीं पर मुझे Dualite के बारे में पता चला जो AI का उपयोग करके फिग्मा डिज़ाइन को वास्तविक कोड में अनुवादित करता है, जिससे मेरे जैसे डेवलपर्स को वास्तव में कोडिंग के प्रयास को कम करने में मदद मिलती है। आइए देखें कि मैंने अपने लैंडिंग पृष्ठ को वास्तविक कोड में बदलने के लिए Dualite का उपयोग कैसे किया
 

ड्यूलाइट क्या है?

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

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

• मोड: डुअलाइट दो मोड, कंपोनेंट मोड और पेज मोड प्रदान करता है, जो डेवलपर्स और डिजाइनरों के लिए अपने डिजाइन को जेनरेट किए गए कोड में बदलने के लिए आदर्श है। ये मोड सुनिश्चित करते हैं कि लेआउट, इंटरैक्टिविटी, एनिमेशन और बहुत कुछ डिज़ाइन से कोड में सटीक रूप से अनुवादित किया गया है।
  • घटक मोड: व्यक्तिगत डिज़ाइन तत्वों पर ध्यान केंद्रित करता है, जो पुन: प्रयोज्य घटकों के निर्माण की अनुमति देता है।
  • पेज मोड: समग्र लेआउट और संरचना को बनाए रखते हुए, पूरे पृष्ठों को परिवर्तित करता है।
  • इस ब्लॉग पर मोड के बारे में और जानें
• अग्रिम सुविधाएं:
  • Dualite उन्नत सेटिंग्स प्रदान करता है जहां उपयोगकर्ता अपने डिज़ाइन के बारे में अधिक तकनीकी जानकारी प्रदान कर सकते हैं। यह सुनिश्चित करता है कि जेनरेट किया गया कोड प्रतिक्रियाशील और सटीक है।
  • ये उन्नत सेटिंग्स डिजाइनरों और डेवलपर्स को अधिक शक्ति प्रदान करती हैं, जिससे उन्हें विशिष्ट परियोजना आवश्यकताओं को पूरा करने के लिए आउटपुट को अनुकूलित करने की अनुमति मिलती है। यह सुविधा उन जटिल डिज़ाइनों के लिए विशेष रूप से उपयोगी है जिनके लिए अंतिम कोड पर सटीक नियंत्रण की आवश्यकता होती है, जैसे उत्तरदायी लेआउट या जटिल एनिमेशन। Dualite के साथ शीघ्र शुरुआत करने के लिए, आप उनके दस्तावेज़ों का अनुसरण कर सकते हैं

फिग्मा डिजाइन

आइए एक लैंडिंग पृष्ठ के काल्पनिक डिज़ाइन के साथ शुरुआत करें, नीचे देखें:

तो, Dualite में एक मोड सुविधा है जहां आप पेज मोड और कंपोनेंट मोड के बीच टॉगल कर सकते हैं

मूल रूप से, पेज मोड एक बार में संपूर्ण डिज़ाइन को परिवर्तित करने के लिए है और कंपोनेंट मोड अलग-अलग घटक बनाने के लिए है जिसे हम अपने प्रोजेक्ट में एकीकृत कर सकते हैं, डॉक्स पर घटकों के बारे में अधिक जानें

हम डिज़ाइन में मौजूद सभी घटकों के लिए कोड उत्पन्न करने के लिए घटक मोड का उपयोग करेंगे और फिर हम उन्हें एक ही प्रोजेक्ट में एकीकृत करेंगे

आइए लैंडिंग पृष्ठ को घटकों में विभाजित करके प्रारंभ करें, नीचे देखें:

प्रारंभिक परियोजना सेटअप

मैं कोड जनरेट करने के लिए Dualite में Reactjs और Tailwind का उपयोग करूंगा, तो आइए पहले प्रोजेक्ट सेटअप करें:

• Reactjs ऐप: Vite या किसी अन्य टूल का उपयोग करके एक रिएक्ट ऐप बनाएं। जावास्क्रिप्ट ऐप्स बनाने के लिए Vite एक लोकप्रिय विकल्प है
• सेटअप टेलविंड: बिना किसी अनावश्यक त्रुटि के रिएक्टजेएस ऐप में टेलविंड सेटअप करने के लिए टेलविंड डॉक्स का पालन करें। सुचारू टेलविंड सेटअप के लिए पोस्टसीएसएस और ऑटोप्रिफ़िक्सर जैसी निर्भरताएँ भी जोड़ना सुनिश्चित करें।
• कॉन्फिग फ़ाइलें: प्रोजेक्ट के रूट में टेलविंड.कॉन्फिग.जेएस और पोस्टसीएसएस.कॉन्फिग.सीएसएस बनाएं। यदि आपने टेलविंड डॉक्स के सभी चरणों का पालन किया है तो टेलविंड.कॉन्फिग.जेएस मौजूद हो सकता है। यदि यह पहले से मौजूद है तो इसे तदनुसार अपडेट करें
• जावास्क्रिप्ट का उपयोग करें: अभी तक, Dualite टाइपस्क्रिप्ट का समर्थन नहीं करता है, इसलिए केवल जावास्क्रिप्ट के साथ Reactjs ऐप बनाना सुनिश्चित करें

घटकों को Dualite में परिवर्तित करना प्रारंभ करें

प्रारंभिक सेटअप:

• मोड: हम घटक मोड का उपयोग करेंगे। पेज मोड और कंपोनेंट मोड के बीच स्विच करने के लिए ऊपरी दाएं कोने से टॉगल बटन का उपयोग करें
• फ्रेमवर्क: जब आप कोड में बदलने के लिए एक डिज़ाइन का चयन करते हैं, तो आपको कई भाषा और फ्रेमवर्क विकल्प दिखाई देंगे। मैं कोड जनरेट करने के लिए Reactjs और Tailwind का उपयोग करूंगा।
• ड्यूलाइट का उपयोग शीघ्रता से शुरू करने के लिए, इसे पढ़ें

अब, आइए डिज़ाइन को घटक में परिवर्तित करना शुरू करें:

1. घोषणा बार घटक: यहां उत्पन्न कोड की जांच करें
    

2. नेविगेशन बार घटक: यहां उत्पन्न कोड की जांच करें
    

3. श्रेणी फ़िल्टर घटक: यहां उत्पन्न कोड की जांच करें
    

4. कार्ड घटक घटक: यहां उत्पन्न कोड की जांच करें
    

5. पेगिनेशन घटक: यहां जेनरेट किए गए कोड की जांच करें
    

6. पाद लेख घटक: यहां उत्पन्न कोड की जांच करें
    

अनुकूलन

1. घटक कॉपी करें:
   • अब, उपरोक्त सभी जेनरेट किए गए कोड से कंपोनेंट्स फ़ोल्डर की प्रतिलिपि बनाएं और इसे प्रोजेक्ट में एक कंपोनेंट्स फ़ोल्डर में पेस्ट करें
   • आपने देखा होगा कि सभी घटकों के नाम केवल "घटक" हैं, तो आइए सभी घटकों को तदनुसार नाम दें। उदाहरण: घोषणा बार घटक को "अनाउंसमेंटबार" नाम दिया जाएगा। जाँचें कि मैंने इसे यहाँ कैसे किया है
2. सभी घटकों को प्रस्तुत करें:
   • अब, App.jsx फ़ाइल के अंदर डिज़ाइन के अनुसार सभी घटकों को आयात करें
   • प्रोजेक्ट चलाएं और आप आउटपुट देखेंगे, यहां App.jsx फ़ाइल जांचें
   • आपने देखा होगा, कुछ घटकों को ठीक करने की आवश्यकता है। आइए अनुकूलन के साथ शुरुआत करें
3. घटक शैलियाँ ठीक करना:
   • फ़ॉन्ट्स:
     • जैसा कि आप डिज़ाइन में देख सकते हैं, हमारे पास अपने स्वयं के फ़ॉन्ट हैं। उन्हें संपत्ति फ़ोल्डरों के अंदर जोड़ रहा हूं ताकि मैं प्रोजेक्ट में कहीं भी फ़ॉन्ट का उपयोग कर सकूं।
     • इंडेक्स.सीएसएस फ़ाइल में हमारे द्वारा उपयोग किए जा रहे सभी फ़ॉन्ट्स के लिए @ फ़ॉन्ट-फेस भी बनाने की आवश्यकता है जहां टेलविंड निर्देश मौजूद हैं
   • नेविगेशन बार घटक:
     • लेआउट गलत है, इसलिए शैली को ठीक करने की जरूरत है
   • कार्ड घटक:
     • स्टार आइकन: ग्राफ़िक्स फ़ोल्डर के अंदर स्टार आइकन जोड़ा गया
     • Text.js: बटन लेबल और घटक के अन्य टेक्स्ट को ठीक करने के लिए अपडेट की गई Text.js फ़ाइल
     • शैलियाँ: विशिष्ट पाठ तत्व और बटन लेबल में फ़ॉन्ट भार जोड़ने के लिए अद्यतन शैलियाँ
   • कार्ड घटक तर्क:
     • कार्ड घटक केवल एक ही घटक प्रस्तुत करता है क्योंकि यह केवल एक ही घटक है।
     • एकाधिक कार्ड घटक प्रस्तुत करने के लिए, मुझे उस पर मैप करने और एकाधिक कार्ड प्रस्तुत करने के लिए कुछ डेमो डेटा जोड़ना होगा

नोट: सभी परिवर्तन और कोड यहां CodeSandBox पर देखे जा सकते हैं

उत्पादन

जैसे ही मैंने प्रोजेक्ट में ये सभी अनुकूलन और परिवर्तन किए, मैं अपने डिज़ाइन का एक बेहतर संस्करण देख सकता हूं, यहां कोड और आउटपुट की जांच कर सकता हूं

क्या ड्यूलाइट मददगार था?

आइए इसे ठीक से समझें, ड्यूलाइट का उपयोग करके हमने जो भी घटक तैयार किए थे, वे उपयोग के लिए तैयार थे, हां, हमने कोड में कुछ अनुकूलन किए थे ताकि इसे डिजाइन के करीब बनाया जा सके, इसके बावजूद, घटकों की सभी शैलियाँ, सभी अलग-अलग फ़ाइलों में डेटा के साथ घटकों का पदानुक्रम Dualite द्वारा उत्पन्न होता है।

यूआई के निर्माण में बहुत अधिक समय खर्च करने के बजाय, मैं इसके लिए ड्यूलाइट का उपयोग कर सकता हूं।

मैन्युअल कोडिंग से इसकी तुलना करने पर इसमें काफी लंबा समय लगेगा। सभी घटकों का आउटपुट वास्तव में अच्छा था, कुछ भी 100% सही नहीं हो सकता, प्रत्येक कोड को डेवलपर द्वारा अंतिम स्पर्श की आवश्यकता होती है और हमने यहां यही किया है

हाँ, Dualite मेरे घटकों के लिए कोड बनाने में बहुत मददगार और तेज़ था।

निष्कर्ष

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