अपने ऐप्लिकेशन में डाइनैमिक कलर को विज़ुअलाइज़ करना

1. परिचय

पिछली बार कब अपडेट किया गया: 21/09/21

ऐप्लिकेशन, बेसलाइन स्कीम, उपयोगकर्ता के जनरेट किए गए डाइनैमिक कलर या ब्रैंड के कलर का इस्तेमाल कर सकते हैं.

Material You के साथ लॉन्च की गई, डाइनैमिक कलर की नई सुविधाओं के बारे में ज़्यादा जानें. इस लैब में, डाइनैमिक कलर पैलेट बनाए जाएंगे. इससे आपको यह समझने में मदद मिलेगी कि कलर सिस्टम कैसे काम करता है, ऐक्सेस की जा सकने वाली कलर पैलेट बनाने के लिए किन कॉन्सेप्ट का इस्तेमाल किया जाता है, और डिज़ाइन के नए टूल का इस्तेमाल करके, डाइनैमिक कलर के साथ अपने ऐप्लिकेशन को विज़ुअलाइज़ करने के तरीके क्या हैं.

आपको क्या सीखने को मिलेगा

• Material Design के कलर सिस्टम में नया क्या है
• अपने ऐप्लिकेशन में, उपयोगकर्ता के जनरेट किए गए रंग को लागू करने का तरीका
• मदद के लिए टूल

ज़रूरी शर्तें

इस लैब के लिए, हम डिज़ाइन के कुछ बुनियादी सिद्धांतों का इस्तेमाल करेंगे.

• डिज़ाइन के बुनियादी सिद्धांतों की जानकारी: कलर पैलेट
• Android की मौजूदा कलर स्कीम और भूमिकाओं के बारे में जानकारी
• Figma की जानकारी

आपको किन चीज़ों की ज़रूरत होगी

• Figma खाता
• Figma की डाइनैमिक कलर वाली Designlab फ़ाइल
• Figma प्लगिन Material Theme Builder

2. अपनी प्रोफ़ाइल बनाना शुरू करें

सेटअप

शुरू करने के लिए, आपको Designlab की Figma फ़ाइल को ऐक्सेस करना होगा. लैब के लिए ज़रूरी सभी चीज़ें, Figma फ़ाइल में मौजूद हैं. आपके पास फ़ाइल को डाउनलोड और इंपोर्ट करने या Figma कम्यूनिटी से डुप्लीकेट करने का विकल्प होता है.

सबसे पहले, Figma में साइन इन करें या खाता बनाएं.

Figma Community से डुप्लीकेट किया गया

मटीरियल डिज़ाइन की मदद से, अपने ऐप्लिकेशन में डाइनैमिक कलर को विज़ुअलाइज़ करना फ़ाइल पर जाएं या Figma Community में, मटीरियल डिज़ाइन की मदद से, अपने ऐप्लिकेशन में डाइनैमिक कलर को विज़ुअलाइज़ करने की सुविधा खोजें. फ़ाइल को अपनी फ़ाइलों में कॉपी करने के लिए, सबसे ऊपर दाएं कोने में मौजूद डुप्लीकेट बनाएं पर क्लिक करें.

फ़ाइल का लेआउट

फ़ाइल में मौजूद कॉन्टेंट देखें. आपको दिखेगा कि फ़ाइल में सारी जानकारी मौजूद है और इसकी शुरुआत एक सामान्य जानकारी से होती है. हर सेक्शन को आर्टबोर्ड की एक लाइन में बांटा गया है. ये आर्टबोर्ड एक-दूसरे से लिंक होते हैं. सेक्शन में कुछ मुख्य कॉन्सेप्ट के बाद, एक्सरसाइज़ दी गई हैं. ये सेक्शन और एक्सरसाइज़ एक-दूसरे से जुड़ी हुई हैं. इसलिए, इन्हें क्रम से पूरा किया जाना चाहिए.

इस कोडलैब में, आपको इन कॉन्सेप्ट और एक्सरसाइज़ के बारे में ज़्यादा जानकारी मिलेगी. हमारा सुझाव है कि Material You की नई सुविधाओं के बारे में ज़्यादा जानने के लिए, कोडलैब के साथ-साथ इसे पढ़ें.

Intro आर्टबोर्ड से शुरू करके, ऐसे बटन दिए गए हैं जो आर्टबोर्ड को क्रम से लिंक करते हैं. बटन पर क्लिक करके लिंक ऐक्सेस करें.

Figma प्लगइन इंस्टॉल करना

यह कोडलैब, डाइनैमिक कलर स्कीम और टोकन जनरेट करने के लिए, नए Figma प्लगिन पर काफ़ी हद तक निर्भर करता है. Figma कम्यूनिटी पेज से सीधे Figma Plugin इंस्टॉल करें या Figma कम्यूनिटी में "Material Theme Builder" खोजें.

3. कलर कॉन्सेप्ट

डाइनैमिक कलर क्या है?

Material You में, रंग को ज़्यादा निजी अनुभव के तौर पर फिर से डिज़ाइन किया गया है. डाइनैमिक कलर एक्सट्रैक्शन की मदद से, रंगों के अनुभव की रेंज को काफ़ी हद तक बढ़ाया जा सकता है.

डाइनैमिक कलर, Material You का एक अहम हिस्सा है. इसमें एक एल्गोरिदम, उपयोगकर्ता के वॉलपेपर से कस्टम कलर बनाता है. इन कलर को उपयोगकर्ता के ऐप्लिकेशन और सिस्टम यूज़र इंटरफ़ेस (यूआई) पर लागू किया जाता है.

ल्यूमिनेंस

डाइनैमिक कलर की सुविधा को इस तरह से बनाया गया है कि यह अलग-अलग स्थितियों में काम कर सके. अलग-अलग व्यूइंग कॉन्टेक्स्ट में कंट्रास्ट रेशियो को मैनेज करने के लिए, ल्यूमिनेंस लेवल एक अहम एट्रिब्यूट है. इसकी मदद से, प्रॉडक्ट टीम के हर रंग के कॉम्बिनेशन की जांच किए बिना भी, रंगों को एक साथ इस्तेमाल किया जा सकता है.

जिन एलिमेंट की ल्यूमिनेंस एक जैसी होती है उनमें पढ़ने के लिए सही कंट्रास्ट नहीं होता. वहीं, जिन एलिमेंट की ल्यूमिनेंस अलग-अलग होती है उन्हें आसानी से पहचाना जा सकता है.

चमक या टोन से पता चलता है कि डिजिटल कलर वैल्यू, रोशनी के किस लेवल को दिखाती है.

टोनल पैलेट

टोनल पैलेट, एक रंगत (डाइनैमिक तरीके से निकाला गया रंग) को उससे मिलती-जुलती टोन के स्पेक्ट्रम में बदलता है. किसी रंग को 13 टोन में ट्रांसलेट करने से, टोनल रेंज के ग्रुप को अलग-अलग कॉन्टेक्स्ट में लागू किया जा सकता है. इसे टोनल पैलेट कहा जाता है. इसे कॉम्पोनेंट के अंदर मौजूद अलग-अलग एलिमेंट से लेकर, ऐप्लिकेशन की पूरी थीम तक लागू किया जा सकता है.

रंग को टोनल रेंज में बदला गया है.

अहम जानकारी

• ल्यूमिनेंस के साथ डिज़ाइन करने से, कलर पैलेट को ज़्यादा आसानी से ऐक्सेस किया जा सकता है.
• एक्सट्रैक्ट किए गए सोर्स कलर से पांच टोनल पैलेट बनते हैं.

4. रंगों को एक्सट्रैक्ट करना

सीड टू स्कीम

आइए, देखते हैं कि डाइनैमिक कलर, Material Theme Builder के साथ कैसे काम करता है.

1. Material Theme Builder खोलें. डाइनैमिक विकल्प को चुनने के बाद, कोई इमेज डालें या फ़ाइल ब्राउज़र से कोई इमेज चुनें. ध्यान दें कि इमेज के हिसाब से सीड कलर अपडेट हो जाएगा.
2. वॉलपेपर से रंग की वैल्यू निकाली जाती हैं और उन्हें "टाइप" असाइन किया जाता है. इससे यह तय होता है कि कोई रंग, स्कीम में मौजूद अन्य रंगों से कैसे जुड़ा होगा. इन वैल्यू को दिखाने के लिए, "मुख्य रंगों" (दाईं ओर) को अपडेट किया गया है.

3. इसके बाद, इन्हें ल्यूमिनेंस के आधार पर टोनल पैलेट में बदला जाता है. इससे, हल्के से लेकर गहरे टोन वाली पांच कलर रेंज जनरेट होती हैं. रंग के आउटपुट में, टोनल पैलेट को इस तरह लेबल किया जाता है.
4. पांच टोनल रेंज में से, कुछ टोन (चमक के आधार पर) को पहले से तय की गई भूमिकाओं में शामिल किया जाता है. इन भूमिकाओं से मिलकर एक स्कीम बनती है. डिज़ाइन टोकन की मदद से, रंगों को किसी स्कीम में मैप किया जाता है.

टर्शरी टोनल रेंज से बनाई गई टर्शरी कलर भूमिकाएं और कॉम्पोनेंट पर मैप की गई हैं.

अहम जानकारी

• Material Theme Builder दिखाता है कि डाइनैमिक कलर कैसे काम करता है और इससे एक्सट्रैपोलेट की गई कलर स्कीम कैसे बनती हैं.

5. थीम और टोकन

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

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

Figma में, प्लगिन इन टोकन को स्टाइल के तौर पर जनरेट करता है. इसका मतलब है कि जनरेट की गई स्टाइल का इस्तेमाल करने पर, MD टोकन का इस्तेमाल किया जाएगा.

टोनल पैलेट में मौजूद रंगों को डिज़ाइन टोकन के ज़रिए, लाइट या डार्क स्कीम पर मैप किया जाता है.

मैपिंग सिस्टम, किसी कॉम्पोनेंट के हर एलिमेंट को टोन असाइन करता है.

टोकन सेट अप करना

अपने डिज़ाइन में डाइनैमिक कलर लागू करने के लिए, हमें मौजूदा मटीरियल-थीम में मॉकअप को टोकन पर सेट करना होगा.

1. आइए, इस थीम का इस्तेमाल करने के लिए, लेआउट के दाईं ओर मौजूद सभी टोकन (Figma स्टाइल) सेट करें. इसके लिए, लेआउट का फ़्रेम चुनें और बदलें पर क्लिक करें. आपको चुने गए रंगों में स्टाइल प्रीफ़िक्स अपडेट दिखेगा.

चुने गए डिज़ाइन में इस्तेमाल की गई कनेक्ट की गई थीम को अपडेट करने के लिए, स्वैप करें पर क्लिक करें.

2. अब कोई इमेज डालें या फ़ाइल ब्राउज़र से कोई इमेज चुनें. मॉकअप की वैल्यू, इमेज से निकाले गए डाइनैमिक कलर के हिसाब से दिखेंगी.
3. शफ़ल बटन पर क्लिक करें. इससे सीड कलर रैंडमाइज़ हो जाएगा. इसके बाद, इमेज से रंग निकालने के बजाय, सीड कलर से रंग निकाले जाएंगे. यह एक और तरीका है, जिससे यह तुरंत देखा जा सकता है कि डाइनैमिक कलर, आपके डिज़ाइन मॉकअप पर कैसा असर डाल सकता है.

सीड कलर को रैंडम करने के लिए, शफ़ल बटन पर क्लिक करना.

डिज़ाइन टोकन, डिज़ाइन से जुड़े छोटे-छोटे फ़ैसले होते हैं. इनका दोबारा इस्तेमाल किया जा सकता है. ये डिज़ाइन सिस्टम की विज़ुअल स्टाइल बनाते हैं. टोकन, स्टैटिक वैल्यू को ऐसे नामों से बदलते हैं जिनसे उनके बारे में आसानी से पता चल जाता है.

किसी थीम के बिना प्लगिन खोलने पर, आपको सेटअप स्क्रीन दिखेगी. 'शुरू करें' पर क्लिक करने से, डिफ़ॉल्ट बेसलाइन ‘मटेरियल-थीम' को Figma स्टाइल ग्रुप के तौर पर जनरेट किया जाएगा. इसे अपने मॉकअप से कनेक्ट किया जा सकता है या Material Design किट के साथ इस्तेमाल किया जा सकता है.

अहम जानकारी

• टोकन, वैल्यू के बजाय रंग की भूमिका को दिखाते हैं. इससे डाइनैमिक कलर की सुविधा काम करती है.
• मटीरियल डिज़ाइन टोकन सेट अप करने के लिए, Material Theme Builder का इस्तेमाल किया जा सकता है.

6. यूज़र इंटरफ़ेस (यूआई) पर लागू करना

दिए गए लेआउट, Material Design Kit की मदद से बनाए गए थे. इसमें Material Design टोकन का इस्तेमाल किया जाता है. हालांकि, कुछ कस्टम एलिमेंट ऐसे हैं जिन्हें मैप नहीं किया गया है.

1. लेख वाले कार्ड चुनें. भरे हुए हिस्से में, स्टाइल (चार बिंदु वाला आइकॉन) को material-theme/surface पर सेट करें. (आपके पास प्लैटफ़ॉर्म खोजने का विकल्प भी है).
2. इसी तरह, कार्ड में टाइप चुनें और उन्हें ऑन-सरफ़ेस पर सेट करें. साथ ही, चेकबॉक्स को प्राइमरी पर सेट करें.

डिज़ाइन के कार्ड में इस्तेमाल की गई Figma स्टाइल.

इसके बाद, हम बाकी स्कीम के लिए अतिरिक्त मॉकअप बनाएंगे.

थीम बनाना और उन्हें दोहराना

हमने अब डाइनैमिक कलर को विज़ुअलाइज़ करने के लिए, मॉकअप को पूरी तरह से कनेक्ट कर दिया है. हालांकि, हम एक साथ कई थीम भी बना सकते हैं और उन्हें अलग-अलग मॉकअप पर स्वैप कर सकते हैं, ताकि एक साथ कई डाइनैमिक कलर को विज़ुअलाइज़ किया जा सके.

1. प्लगिन मॉडल में, ड्रॉपडाउन पर क्लिक करें और ‘नई थीम जोड़ें' को चुनें.

चेतावनी: थीम का नाम अलग होना चाहिए, ताकि वैल्यू को बदला न जा सके.

2. थीम का कोई यूनीक नाम डालें और ‘थीम बनाएं पर क्लिक करें.' इससे बनाई गई हर थीम के लिए, नए रंग के डायग्राम भी जनरेट होंगे.

ड्रॉपडाउन मेन्यू से नई थीम जोड़ना.

3. कोई इमेज जोड़ें या सीड कलर को शफ़ल करें.
4. प्लगिन मोडल में, कोई मॉकअप (ऐप्लिकेशन यूज़र इंटरफ़ेस कॉम्पोनेंट) चुनें और बदलें पर क्लिक करें. इससे स्टाइल की वैल्यू, ड्रॉपडाउन में दिखाई गई मौजूदा थीम के हिसाब से अपडेट हो जाएंगी.
5. मॉकअप की डुप्लीकेट कॉपी बनाने के लिए, CMD + D दबाएं.

चुने गए डिज़ाइन में इस्तेमाल की गई कनेक्ट की गई थीम को अपडेट करने के लिए, स्वैप करें पर क्लिक करें.

6. पहले से लेकर पांचवें चरण को दोहराएं.

अब आपके पास डाइनैमिक कलर के अलग-अलग वर्शन वाले कई डिज़ाइन हैं!

अहम जानकारी

• Material Theme Builder, कनेक्ट किए गए किसी भी Material Design टोकन के साथ डाइनैमिक कलर को विज़ुअलाइज़ कर सकता है.
• इस प्लगिन का इस्तेमाल, थीम को मैनेज करने और उनके बीच स्विच करने के लिए किया जा सकता है. इसमें हल्के और गहरे रंग वाली थीम भी शामिल हैं.

7. बधाई हो

डाइनैमिक कलर के बारे में जानने और उसे लागू करने के लिए, बहुत बढ़िया! Material Theme Builder, Material Design में रंग को आसान बनाने में आपकी मदद करता है. इसके लिए, यह डाइनैमिक कलर को विज़ुअलाइज़ करता है, पसंद के मुताबिक थीम बनाता है, और कोड में एक्सपोर्ट करता है.

अगले चरण

• Material Design Kit का भी इस्तेमाल किया जा सकता है. इसमें पहले से कनेक्ट किए गए कॉम्पोनेंट होते हैं, ताकि सीधे थीम बनाई जा सकें और उन्हें लिंक किया जा सके.
• Material को पसंद के मुताबिक बनाने की सुविधा का इस्तेमाल करके, अपने उपयोगकर्ताओं को उनकी पसंद के हिसाब से रंग चुनने के ज़्यादा विकल्प दें.
• कलर सिस्टम के बारे में ज़्यादा जानें.
• इन्हें अपने डिज़ाइन पर लागू करें!

अगर आपका कोई सवाल है, तो @MaterialDesign on Twitter पर जाकर, हमसे कभी भी पूछें.

डिज़ाइन से जुड़े ज़्यादा कॉन्टेंट और ट्यूटोरियल के लिए, youtube.com/MaterialDesign पर बने रहें