1. परिचय
पिछली बार अपडेट किया गया: 18/04/22
ऐप्लिकेशन, बेसलाइन स्कीम, उपयोगकर्ता के जनरेट किए गए डाइनैमिक कलर या ब्रैंड के रंगों में से अलग-अलग रंगों को चुन सकते हैं.
पिछले Material You कलर लैब में, डिज़ाइन मॉकअप में डाइनैमिक कलर को विज़ुअलाइज़ करने का तरीका बताया गया था. हालांकि, अपने ऐप्लिकेशन को ब्रैंड के हिसाब से बनाने के लिए, मटीरियल थीमिंग का इस्तेमाल भी किया जा सकता है. अपने ब्रैंड के रंगों के साथ नए कलर सिस्टम का इस्तेमाल करने से, एक आसानी से ऐक्सेस की जा सकने वाली कलर स्कीम बनती है और यह ज़्यादा डाइनैमिक सुविधाओं का इस्तेमाल कर सकती है!
आप इन चीज़ों के बारे में जानेंगे
- मटीरियल थीम बिल्डर की मदद से, पसंद के मुताबिक थीम बनाने का तरीका.
- मॉकअप डिज़ाइन करने के लिए, पसंद के मुताबिक थीम लागू की जा रही है.
- डाइनैमिक और कस्टम कलर, दोनों को साथ में इस्तेमाल किया जा सकता है.
ज़रूरी शर्तें
इस लैब के लिए, हम डिज़ाइन के कुछ बुनियादी सिद्धांतों पर काम करेंगे.
- डिज़ाइन के बुनियादी सिद्धांतों की जानकारी: रंग पटल बनाने से जुड़ी जानकारी
- Android के लिए मौजूदा कलर स्कीम और भूमिकाओं के बारे में जानकारी
- नॉलेज ऑफ़ फ़िग्मा
- ज़रूरी नहीं: ऐप्लिकेशन के कोडलैब में डाइनैमिक रंग को विज़ुअलाइज़ करना
आपको इनकी ज़रूरत होगी
- Figma खाता
- Figma Designlab फ़ाइल
- Figma प्लगिन मटीरियल थीम बिल्डर
2. अपनी प्रोफ़ाइल बनाना शुरू करें
सेटअप
शुरू करने के लिए, आपको Designlab Figma की फ़ाइल को ऐक्सेस करना होगा. लैब के लिए आपकी ज़रूरत की हर चीज़ Figma फ़ाइल में है. इस फ़ाइल को डाउनलोड और इंपोर्ट किया जा सकता है. इसके अलावा, आपके पास Figma कम्यूनिटी से इसकी डुप्लीकेट कॉपी बनाने का भी विकल्प होता है.
सबसे पहले, Figma में साइन इन करें या खाता बनाएं.
Figma कम्यूनिटी का डुप्लीकेट
पसंद के मुताबिक मटीरियल फ़ाइल पर जाएं या Figma कम्यूनिटी में मटीरियल डिज़ाइन की मदद से, अपने ऐप्लिकेशन में डाइनैमिक कलर को विज़ुअलाइज़ करना खोजें. फ़ाइल को अपनी फ़ाइलों में कॉपी करने के लिए, सबसे ऊपर दाएं कोने में मौजूद डुप्लीकेट पर क्लिक करें.
फ़ाइल लेआउट
फ़ाइल को देखते समय, ध्यान दें कि फ़ाइल के बारे में पूरी जानकारी दी गई है. सबसे पहले, फ़ाइल के बारे में जानकारी दें. हर सेक्शन को आर्टबोर्ड की एक पंक्ति में बांटा गया है. ये आर्टबोर्ड आपस में जुड़े हुए हैं. सेक्शन में कुछ मुख्य कॉन्सेप्ट और उसके बाद अभ्यास होते हैं. इसमें मौजूद सेक्शन और एक्सरसाइज़ एक-दूसरे पर आधारित होती हैं और इन्हें एक क्रम में पूरा किया जाना चाहिए.
यह कोडलैब आपको इन कॉन्सेप्ट और प्रैक्टिस के बारे में ज़्यादा जानकारी देता है. Material You की नई सुविधाओं के बारे में ज़्यादा जानने के लिए, कोडलैब के साथ-साथ इसे पढ़ें!
इंट्रो आर्टबोर्ड से शुरू करते हुए, आर्टबोर्ड को क्रम से लिंक करने के लिए बटन दिए गए हैं. लिंक ऐक्सेस करने के लिए, बटन पर क्लिक करें.
Figma प्लगिन को इंस्टॉल करें
यह कोडलैब, डाइनैमिक कलर स्कीम और टोकन जनरेट करने के लिए, काफ़ी हद तक नए Figma प्लगिन का इस्तेमाल करता है. सीधे Figma कम्यूनिटी पेज से Figma प्लगिन इंस्टॉल करें या "मटीरियल थीम बिल्डर" खोजें में शामिल हो सकते हैं.
3. मटीरियल कलर स्कीम
सबसे पहले, इस बारे में खास जानकारी कि मटीरियल में रंग का इस्तेमाल कैसे किया जाता है और नया कलर सिस्टम कैसे काम करता है.
रंग का इस्तेमाल स्टाइल को ज़ाहिर करने और इसका मतलब बताने के लिए किया जाता है कि क्या वह मतलब उपयोगकर्ता के लिए निजी है, ब्रैंडिंग में है या मतलब का मतलब. कलर सिस्टम, डाइनैमिक तौर पर बदलने वाली कलर स्कीम में होने वाले बदलाव को हैंडल करता है. ये स्कीम, उपयोगकर्ता के इनपुट बदलने पर पैदा होती हैं. टोनल संबंधों के लॉजिक और रंग और क्रोमा में बदलाव के सुविधाजनक रंग को लागू करने के लिए एक आधार है.
कलर स्पेस की मदद से, सोर्स कलर से एक्सट्रैक्ट किए गए हल्के और गहरे रंग की स्कीम जनरेट की जा सकती हैं. इसके लिए, पांच मुख्य कलर और फिर टोनल पैलेट जनरेट किए जाते हैं, जिसमें कुछ टोनल स्टेप चुने जाते हैं.
रंग बदलने की यह तकनीक न सिर्फ़ आसानी से ऐक्सेस की जा सकने वाली कलर स्कीम मुहैया कराती है, बल्कि ऐसी ब्रैंडेड स्कीम बनाने के तरीके भी मुहैया कराती है जो ऐक्सेस किए जा सकते हैं और उपयोगकर्ता की जनरेट की गई कलर स्कीम के साथ जुड़ सकते हैं.
कलर स्कीम को ऐक्सेस करने लायक स्कीम बनाने के लिए, पांच मुख्य रंगों से टोनल पैलेट में जनरेट की जाती हैं
ब्रैंड वाली थीम
M3 में कस्टम पैरामीटर का व्यवस्थित ऐप्लिकेशन इस्तेमाल किया जा सकता है, ताकि आपके ब्रैंड के बारे में लोगों को जानकारी देने वाली स्टाइल तय की जा सकें और उन्हें मैनेज किया जा सके.
कस्टम स्कीम एक कलर स्कीम है, जो उपयोगकर्ता के डिवाइस के वॉलपेपर से नहीं, बल्कि ऐप्लिकेशन बनाने वाली कंपनी से मिलती है. ऐप्लिकेशन में डाइनैमिक कलर लागू करने के लिए, M3 कलर सिस्टम और कस्टम स्कीम का इस्तेमाल किया जाता है.
कस्टम स्कीम, M2 और M3 के बीच के अंतर को कम कर सकती है. इससे ज़रूरी टोकन (कलर स्लॉट) सेट अप किए जा सकेंगे और लोगों को बेहतर अनुभव मिल पाएगा. ऐसा करने से, डेटा आसानी से माइग्रेट किया जा सकेगा.
मटीरियल थीम बिल्डर में ब्रैंड के रंग जोड़ना
4. कलर स्कीम: एक्सेंट रंग
कलर स्कीम की बुनियाद पांच मुख्य रंगों का सेट है, जो 13 टोन वाले अलग-अलग टोनल पैलेट से अलग-अलग जुड़ी हुई है. हर टोनल पैलेट के खास टोन, पूरे यूज़र इंटरफ़ेस (यूआई) में कलर भूमिकाओं के लिए असाइन किए जाते हैं. सबसे पहले, मटीरियल थीम बिल्डर प्लगिन खोलें और अपना पहला ऐक्सेंट कलर सेट अप करें: प्राइमरी.
सिर्फ़ प्राइमरी डालने से, पूरी कलर स्कीम बनाने के लिए उसे सोर्स के तौर पर इस्तेमाल किया जाएगा.
- प्लग इन मॉडल में, 'पसंद के मुताबिक' पर क्लिक करें. इससे थीम, पसंद के मुताबिक बनाई गई थीम पर स्विच हो जाएगी. इस लैब के लिए, हम पहले से जनरेट की गई मटीरियल-थीम का इस्तेमाल करेंगे. हालांकि, अगर आप चाहें, तो एक नई थीम भी बनाई जा सकती है. इस बारे में ज़्यादा जानने के लिए, डाइनैमिक कलर को विज़ुअलाइज़ करना देखें.
- इसके बाद, हम मुख्य कुंजी का रंग सेट करेंगे. मुख्य रंग, आपके ब्रैंड का मुख्य रंग या ऐक्सेंट का मुख्य रंग हो सकता है, जिसका सबसे ज़्यादा इस्तेमाल किया जाता है. मुख्य रंग के आधार पर, बाकी के मुख्य रंग दिखने लगेंगे. इसका मतलब है कि अगर आपको कोई और रंग जोड़ने की ज़रूरत नहीं है, तो उसे जोड़ने की ज़रूरत नहीं है.
5. बाकी थीम बनाएं
प्राइमरी का इस्तेमाल थीम जनरेट करने के लिए किया जाता है. हालांकि, ब्रैंड के मुख्य रंग को दिखाने के लिए ऐक्सेंट के रंग भी बनाए जा सकते हैं.
- प्लगिन मॉडल में, सेकंडरी कलर वेल पर क्लिक करके सेकंडरी कलर जोड़ें. सेकंडरी रोल का इस्तेमाल, यूज़र इंटरफ़ेस (यूआई) में कम अहम कॉम्पोनेंट के लिए किया जाता है. साथ ही, इससे कलर एक्सप्रेशन के ज़्यादा अवसर मिलते हैं. कलर स्कीमैटिक और ऐप्लिकेशन यूज़र इंटरफ़ेस (यूआई) में दूसरा रंग अपडेट हो जाएगा.
- टर्शीयरी के लिए भी ऐसा ही करें. टर्शीयरी रोल का इस्तेमाल, कंट्रास्ट उच्चारण के लिए किया जाता है. इनका इस्तेमाल प्राइमरी और सेकंडरी कलर को बैलेंस करने या किसी एलिमेंट की ओर लोगों का ध्यान खींचने के लिए किया जा सकता है. तीसरे रंग की भूमिका को मैन्युफ़ैक्चरर के लिए छोड़ दिया जाता है, ताकि मैन्युफ़ैक्चरर अपने विवेक से इसका इस्तेमाल कर सकें. इसका मकसद, प्रॉडक्ट में रंगों को और भी बेहतर तरीके से दिखाना है.
- अब सरफ़ेस और बैकग्राउंड के लिए, न्यूट्रल रोल का इस्तेमाल किया जाता है. साथ ही, ज़्यादा फ़ोकस वाले टेक्स्ट और आइकॉन का इस्तेमाल किया जाता है.
कलर स्कीम को पूरी तरह से पसंद के मुताबिक बनाने के लिए, सेकंडरी, थर्डरी, और न्यूट्रल उपलब्ध कराएं.
आपके ब्रैंड के रंग अब मुख्य कलर स्कीम में शामिल कर दिए जाएंगे, ताकि M3 कलर स्पेस से मैच कर सके और उसे पूरी तरह ऐक्सेस किया जा सके. साथ ही, उसे थीम के तौर पर कोड में ही एक्सपोर्ट और लागू किया जा सके.
6. आपकी थीम लागू की जा रही है
भूमिकाएं और टोकन
हर ऐक्सेंट के रंग (प्राइमरी, सेकंडरी, और तीसरे) को अलग-अलग टोन के साथ काम करने वाले चार रंगों के ग्रुप में दिया जाता है. इससे पेयरिंग, हाइलाइट, और विज़ुअल एक्सप्रेशन तय करने में मदद मिलती है. यह ग्रुप ऐक्सेंट के रंग, रंग, कंटेनर, और कंटेनर पर बना होता है.
न्यूट्रल रोल का इस्तेमाल, सतह और बैकग्राउंड के लिए किया जाता है. इसके अलावा, टेक्स्ट और आइकॉन पर ज़्यादा ज़ोर देने के लिए भी किया जाता है.
डिज़ाइन टोकन, डिज़ाइन से जुड़े उन छोटे और बार-बार किए जाने वाले फ़ैसलों को दिखाते हैं जो डिज़ाइन सिस्टम की विज़ुअल स्टाइल तय करते हैं. टोकन, स्टैटिक वैल्यू की जगह लेते हैं. जैसे, रंग के लिए हेक्स कोड को उसके नाम से बदल दिया जाता है. डिज़ाइन टोकन, उन स्टाइल के विकल्पों को बेहतर तरीके से बताते हैं जिनका कोई संबंध नहीं होता.
Figma प्लगिन, टोकन बनाता है और Figma स्टाइल के रूप में आपके खुद के सोर्स कलर को इनपुट के लिए इस्तेमाल करता है. ऐसा करके, मौजूदा मॉक-अप, ब्रैंड स्टाइल गाइड, और डिज़ाइन सिस्टम को भी इस्तेमाल किया जा सकता है.
डिज़ाइन टोकन, कलर रोल और उन्हें लागू करने के बीच एक ही भाषा बनाते हैं.
कलर हैरारकी
अपने मॉकअप पर कलर रोल लागू करते समय, एलिमेंट की अहमियत या हैरारकी को ध्यान में रखें. इस कॉन्सेप्ट से, ब्रैंड के रंगों को उनकी अलग-अलग भूमिकाओं में असाइन करने में मदद मिलेगी. साथ ही, उन्हें यूज़र इंटरफ़ेस (यूआई) में मैप भी किया जा सकेगा. आम तौर पर, ज़्यादा गहरे रंग वाले या ज़्यादा गहरे रंग, उपयोगकर्ता का ध्यान सबसे पहले आकर्षित करेंगे. इसलिए, मुख्य रंग वाली भूमिका उन कॉम्पोनेंट को मैप करती है जो कॉल-टू-ऐक्शन पर ज़्यादा फ़ोकस करते हैं. मटीरियल थीम बिल्डर, सही कलर जनरेट करने के लिए, M3 कलर सिस्टम का इस्तेमाल करता है. हालांकि, ज़्यादा सैचुरेशन वाले सेकंडरी या तीसरे रंग उपलब्ध कराने पर, ये प्राइमरी कलर से अलग हो जाते हैं. रंग से जुड़ी भूमिकाएं असाइन करने के लिए, यूज़र इंटरफ़ेस (यूआई) और कॉन्टेंट के बीच में अपने उपयोगकर्ताओं के जुड़ाव को ध्यान में रखें. ऐसा करने से, सभी कॉम्पोनेंट को प्राइमरी का इस्तेमाल नहीं करना चाहिए.
सॉलिड सैचुरेटेड कलर सबसे ज़्यादा ध्यान खींचता है.
7. थीम पर स्विच करें
आपकी बनाई गई कस्टम थीम को आपके डिज़ाइन में लागू करने के लिए, हमें मौजूदा मटीरियल-थीम में टोकन के हिसाब से मॉकअप सेट करना होगा.
कॉन्टेंट के कॉम्पोनेंट पहले से मैप की गई भूमिकाओं के साथ आते हैं और ये मटीरियल थीम बिल्डर के साथ अपने-आप काम करेंगे.
मटीरियल थीम बिल्डर मॉडल से थीम को स्वैप करें.
- इस थीम का इस्तेमाल करने के लिए, लेआउट में सभी टोकन (Figma स्टाइल) को दाईं ओर सेट करें. इसके लिए, लेआउट का फ़्रेम चुनें और 'स्वैप करें' पर क्लिक करें. आपको चुने हुए रंगों में स्टाइल प्रीफ़िक्स अपडेट दिखेगा.
- क्या आपको सभी जानकारी अपडेट नहीं है? पौधों की देखभाल टिप कार्ड जैसे कस्टम घटकों को पहले फिग्मा शैली लागू करनी होगी. देखभाल टिप वाला कंटेनर चुनें, जिसमें कंटेनर चुना गया है. शैली असाइन करने के लिए, 4 बिंदु वाले आइकॉन पर क्लिक करें, तीसरा कंटेनर चुनें. देखभाल टिप कार्ड की सामग्री के साथ भी ऐसा ही करें, लेकिन तीसरा कंटेनर असाइन न करें. सूची में मौजूद छोटे लेबल, कस्टम कॉम्पोनेंट भी होते हैं. हालांकि, हम बाद में उन पर बात करेंगे!
- मटीरियल डिज़ाइन कॉम्पोनेंट, डिफ़ॉल्ट मैपिंग का इस्तेमाल कर रहे हैं. हालांकि, यूज़र इंटरफ़ेस (यूआई) के हिसाब से, स्टाइल असाइनमेंट के साथ प्रयोग किया जा सकता है. अलग-अलग रंगों की हैरारकी और ब्रैंड एक्सप्रेशन के साथ खेलें.
(कोड के लिए एक्सपोर्ट फ़ाइल में सिर्फ़ थीम शामिल होती है. अगर किसी इंजीनियर की मदद ली जा रही है, तो टोकन मैपिंग की जानकारी शेयर करने के लिए मॉक शेयर करें. ऐसा इसलिए, क्योंकि एक्सपोर्ट में इस डेटा को शामिल नहीं किया जाएगा
बिना थीम वाले प्लग इन को खोलने पर, शुरू करने के लिए सेटअप स्क्रीन दिखेगी. ‘शुरू करें’ डिफ़ॉल्ट बेसलाइन 'सामग्री-थीम' जनरेट करेगी अपने मॉकअप से कनेक्ट करने या मटीरियल डिज़ाइन किट के साथ इस्तेमाल करने के लिए, Figma स्टाइल ग्रुप की मदद ली जा सकती है.
8. मुख्य स्कीम से आगे बढ़ना
अब आपके पास ब्रैंडेड कलर थीम है, जिसे कॉम्पोनेंट और डिज़ाइन मॉक के हिसाब से मैप किया गया है. हालांकि, हो सकता है कि आपको अतिरिक्त रंगों को शामिल करना पड़े. ऐसे में, अपनी पसंद के रंग जोड़ने के लिए, एक्सटेंडेड स्कीम इस्तेमाल की जाती है.
ये सिमैंटिक रंग, ब्रैंड के हिसाब से या प्रॉडक्ट के हिसाब से भी हो सकते हैं. इनके लिए भूमिकाएं असाइन करनी होंगी और कलर एल्गोरिदम के हिसाब से उनमें बदलाव करना होगा या जानकारी के तौर पर इनका इस्तेमाल करना होगा.
एक्सटेंडेड कलर स्कीम की मदद से डाइनैमिक (यूज़र जनरेटेड) कलर को ब्रैंड के कलर के साथ इस्तेमाल किया जा सकता है. इससे मुख्य स्कीम, लोगों को अपने हिसाब से अनुभव दे पाती है. वहीं, ब्रैंड के रंग, एक्सटेंडेड स्कीम में सेट किए जाते हैं. इसका मतलब है कि यूज़र इंटरफ़ेस (यूआई) एलिमेंट, आपके उपयोगकर्ताओं के हिसाब से ज़्यादा बेहतर हो सकते हैं. साथ ही, आपके ब्रैंड के रंग, ऐप्लिकेशन में ज़्यादा असरदार पलों को दिखाते हैं.
मुख्य स्कीम को बढ़ाया जा सकता है, ताकि उसमें पसंद के मुताबिक रंग शामिल किए जा सकें. 
9. विस्तार करना और कस्टमाइज़ हो रहा है
कस्टम रंगों के साथ स्कीम को बढ़ाने से सिमेंटिक या अतिरिक्त ब्रैंडिंग कलर जैसे रंग जोड़े जा सकते हैं.
कस्टम कलर वाली कस्टम स्कीम जोड़ी गई.
- प्लग इन मॉडल में मुख्य रंगों के नीचे, कोई रंग जोड़ें पर क्लिक करें.
- मौजूदा थीम नई Custom0 पंक्ति के साथ अपडेट हो जाएगी. कलर वेल पर क्लिक करके इस रंग को अपडेट करें और कोई नया रंग चुनें.
- ये बढ़ाए गए रंग, रीड ओनली स्टाइल में Custom0 के तौर पर पाए जा सकते हैं. इनके टोनल पैलेट और स्कीम, दोनों में मौजूद होता है. चलिए, लेबल बैकग्राउंड को चुनकर, कुछ सूची लेबल को नए रंग से मैप करते हैं. साथ ही, जोड़े गए रंग के लिए कोई एक रोल (custom0 कंटेनर पर) असाइन करते हैं.
चुने गए रंगों में पसंद के मुताबिक रंग सेट किया जा रहा है.
- मटीरियल थीम बिल्डर, अपने-आप कस्टम# के तौर पर कलर जनरेट करता है. किसी जोड़े गए कस्टम रंग का नाम बदलने के लिए, स्टाइल पैनल में थीम के स्टाइल के ग्रुप को बड़ा करें. यह तब दिखेगा, जब कुछ नहीं चुना गया होगा. इसके बाद, सोर्स सबग्रुप में Custom0 ढूंढें. यहां सोर्स का नाम बदलने पर, प्लगिन मॉडल में कलर का नाम बदल जाएगा.
पसंद के मुताबिक रंग स्टाइल, स्टाइल पैनल में देखे जा सकते हैं.
- जोड़े गए रंग को इसी तरह से मिटाया जा सकता है. इसके लिए, स्टाइल पर राइट क्लिक करके उसे मिटाएं. अगली बार प्लग इन खोलने पर जोड़ा गया रंग हटा दिया जाएगा. हो सकता है कि कलर डायग्राम में नाम बदलने और मिटाने की जानकारी न दिखे.
10. बधाई हो
आपने मटीरियल थीम बिल्डर का इस्तेमाल करके, पसंद के मुताबिक कलर थीम बनाने का तरीका सीखा है. साथ ही, आपने इसे डिज़ाइन मॉकअप में इस्तेमाल करने और कलर स्कीम में जोड़ने का तरीका भी सीख लिया है. नया Material 3 कलर सिस्टम, डिज़ाइन में आसानी से ऐक्सेस किया जा सकने वाला, सुविधाजनक, और एक जैसा रंग उपलब्ध कराता है. हमें इस बात का बेसब्री से इंतज़ार है कि आपको इनका इस्तेमाल कैसे करना है!
अगर आपका कोई सवाल है, तो Twitter पर@MaterialDesign का इस्तेमाल करके हमसे किसी भी समय सवाल पूछें.
डिज़ाइन से जुड़ा ज़्यादा कॉन्टेंट और ट्यूटोरियल देखने के लिए, youtube.com/MaterialDesign पर हमारे साथ बने रहें