सामग्री का रंग कस्टमाइज़ करना

1. परिचय

पिछले अपडेट की तारीख़: 18/04/22

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

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

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

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

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

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

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

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

• Figma खाता
• Figma Designlab फ़ाइल
• Figma प्लगिन Material Theme Builder

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

सेटअप

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

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

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

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

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

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

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

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

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

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

3. मटीरियल कलर स्कीम

सबसे पहले, Material में रंग का इस्तेमाल कैसे किया जाता है और नया कलर सिस्टम कैसे काम करता है, इसके बारे में खास जानकारी.

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

कलर स्पेस की मदद से, सोर्स कलर से ऐक्सेस की जा सकने वाली लाइट और डार्क कलर स्कीम जनरेट की जा सकती हैं. इसके लिए, पांच मुख्य रंग और फिर टोनल पैलेट जनरेट किए जाते हैं. इनमें कुछ टोनल स्टेप चुने जाते हैं.

रंग बदलने की इस तकनीक से, न सिर्फ़ ऐक्सेस की जा सकने वाली कलर स्कीम मिलती है, बल्कि ब्रैंड की ऐसी स्कीम बनाने के तरीके भी मिलते हैं जिन्हें ऐक्सेस किया जा सकता है. साथ ही, ये स्कीम, उपयोगकर्ता की बनाई गई कलर स्कीम के साथ काम करती हैं.

रंगों की स्कीम, पांच मुख्य रंगों से टोनल पैलेट में जनरेट की जाती हैं, ताकि ऐक्सेस की जा सकने वाली स्कीम बनाई जा सकें

ब्रैंड के नाम वाली थीम

M3, कस्टम पैरामीटर के व्यवस्थित इस्तेमाल का समर्थन करता है. इससे, आपके ब्रैंड की पहचान बताने वाले स्टाइल को तय करने और बनाए रखने में मदद मिलती है.

कस्टम स्कीम एक ऐसी कलर स्कीम होती है जो उपयोगकर्ता के डिवाइस के वॉलपेपर से नहीं, बल्कि ऐप्लिकेशन बनाने वाले व्यक्ति या कंपनी से मिलती है. M3 कलर सिस्टम और कस्टम स्कीम, ऐप्लिकेशन में डाइनैमिक कलर की सुविधा चालू करने के लिए ज़रूरी हैं.

कस्टम स्कीम, ज़रूरी टोकन (कलर स्लॉट) सेट अप करके, M2 और M3 के बीच के अंतर को कम करेगी, ताकि आसानी से माइग्रेट किया जा सके. साथ ही, इससे ब्रैंड के हिसाब से बेहतर अनुभव मिलेगा.

मटीरियल थीम बिल्डर में ब्रैंड के रंग जोड़ना

4. कलर स्कीम: ऐक्सेंट के रंग

कलर स्कीम की बुनियाद, पांच मुख्य रंगों का सेट है. ये रंग, अलग-अलग टोनल पैलेट से जुड़े होते हैं. इनमें 13 टोन होते हैं. हर टोनल पैलेट से चुनी गई टोन को, यूज़र इंटरफ़ेस (यूआई) में मौजूद कलर रोल के लिए असाइन किया जाता है. आइए, Material Theme Builder प्लगिन खोलकर शुरू करते हैं. इसके बाद, हम अपना पहला ऐक्सेंट कलर: प्राइमरी सेट अप करेंगे.

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

1. प्लगिन के मोडल में, कस्टम पर क्लिक करें. इससे थीम, पसंद के मुताबिक बनाई गई थीम पर स्विच हो जाएगी. इस लैब के लिए, हम पहले से जनरेट की गई मटीरियल-थीम का इस्तेमाल करेंगे. हालांकि, अगर आपको कोई नई थीम बनानी है, तो भी ऐसा किया जा सकता है. इसके बारे में ज़्यादा जानने के लिए, डाइनैमिक कलर को विज़ुअलाइज़ करना लेख पढ़ें.
2. इसके बाद, हम प्राइमरी की का रंग सेट करेंगे. प्राइमरी कलर, आपके ब्रैंड का मुख्य रंग या सबसे ज़्यादा इस्तेमाल किया जाने वाला प्राइमरी ऐक्सेंट कलर हो सकता है. मुख्य रंग के आधार पर, बाकी बटन के रंग अपने-आप भर जाएंगे. इसका मतलब है कि अगर आपको अतिरिक्त रंगों की ज़रूरत नहीं है, तो उन्हें जोड़ने की ज़रूरत नहीं है.

5. बाकी थीम बनाना

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

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

कलर स्कीम को पूरी तरह से अपनी पसंद के मुताबिक बनाने के लिए, सेकंडरी, टर्शियरी, और न्यूट्रल रंग चुनें..

आपके ब्रैंड के रंगों को अब मुख्य कलर स्कीम में शामिल किया जाएगा. इसे M3 कलर स्पेस से मैच करने के लिए बदला गया है. यह पूरी तरह से ऐक्सेस किया जा सकता है. साथ ही, इसे थीम के तौर पर कोड में एक्सपोर्ट और लागू किया जा सकता है.

अहम जानकारी

• ब्रैंडेड या कस्टम थीम को डाइनैमिक थीम की तरह ही बनाया जा सकता है.
• कलर रोल, आपके यूज़र इंटरफ़ेस (यूआई) में कलर स्कीम और उनके बीच के संबंध से जुड़े होते हैं.

6. आपकी थीम लागू की जा रही है

भूमिकाएं और टोकन

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

न्यूट्रल रोल का इस्तेमाल, सर्फ़ेस और बैकग्राउंड के साथ-साथ टेक्स्ट और आइकॉन को हाइलाइट करने के लिए किया जाता है.

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

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

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

डिज़ाइन टोकन, कलर रोल और उन्हें लागू करने के बीच एक सामान्य भाषा बनाते हैं.

कलर हैरारकी

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

सॉलिड सैचुरेटेड कलर से लोगों का ध्यान सबसे ज़्यादा खींचता है.

अहम जानकारी

• Material Theme Builder की मदद से बनाई गई स्टाइल का इस्तेमाल करके, मॉकअप पर ब्रैंड के रंग वाली स्कीम को आसानी से लागू किया जा सकता है.
• Figma में टोकन को स्टाइल के तौर पर दिखाया जाता है.
• यूज़र इंटरफ़ेस (यूआई) में, किसी चीज़ की अहमियत के क्रम को दिखाने के लिए रंग का इस्तेमाल किया जा सकता है.

7. थीम पर स्विच करें

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

मटीरियल कॉम्पोनेंट में भूमिकाएं पहले से मैप की गई होती हैं. साथ ही, ये मटीरियल थीम बिल्डर के साथ अपने-आप काम करती हैं.

Material Theme Builder मोडल से थीम पर स्विच करें.

1. आइए, लेआउट में मौजूद सभी टोकन (Figma स्टाइल) को दाईं ओर सेट करें, ताकि इस थीम का इस्तेमाल किया जा सके. इसके लिए, लेआउट का फ़्रेम चुनें और स्वैप करें पर क्लिक करें. आपको चुने गए रंगों में स्टाइल प्रीफ़िक्स अपडेट दिखेगा.
2. क्या सभी जानकारी अपडेट नहीं हुई है? प्लांट केयर टिप कार्ड जैसे कस्टम कॉम्पोनेंट में, सबसे पहले Figma स्टाइल लागू करनी होगी. देखभाल से जुड़ी सलाह वाला कंटेनर चुनें. कंटेनर को चुनने के बाद, स्टाइल असाइन करने के लिए चार बिंदु वाले आइकॉन पर क्लिक करें. इसके बाद, टर्शरी कंटेनर चुनें. केयर टिप कार्ड के कॉन्टेंट के साथ भी ऐसा ही करें. हालांकि, इसे ऑन-टर्शरी कंटेनर असाइन करें. सूची में मौजूद छोटे लेबल भी कस्टम कॉम्पोनेंट हैं. हालांकि, हम इनके बारे में बाद में बात करेंगे!
3. Material Design कॉम्पोनेंट, डिफ़ॉल्ट मैपिंग का इस्तेमाल कर रहे हैं. हालांकि, यूज़र इंटरफ़ेस (यूआई) के लिए सबसे सही स्टाइल असाइनमेंट का इस्तेमाल किया जा सकता है. अलग-अलग कलर हाइरार्की और ब्रैंड एक्सप्रेशन का इस्तेमाल करके देखें.

(कोड के लिए एक्सपोर्ट की गई फ़ाइल में सिर्फ़ थीम शामिल होती है. अगर किसी इंजीनियर के साथ काम किया जा रहा है, तो टोकन मैपिंग के बारे में बताने के लिए मॉक शेयर करें. ऐसा इसलिए, क्योंकि इसे एक्सपोर्ट में शामिल नहीं किया जाएगा)

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

अहम जानकारी

• कस्टम थीम, Material Design किट के कॉम्पोनेंट पर लागू की जा सकती हैं.
• Material Theme Builder की मदद से बनाई गई स्टाइल का इस्तेमाल करके, मॉकअप पर ब्रैंड के रंग वाली स्कीम को आसानी से लागू किया जा सकता है.
• यूज़र इंटरफ़ेस (यूआई) में, किसी चीज़ की अहमियत के क्रम को दिखाने के लिए रंग का इस्तेमाल किया जा सकता है.

8. मुख्य स्कीम के अलावा अन्य स्कीम में निवेश करना

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

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

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

कलर स्कीम में, पसंद के मुताबिक रंग शामिल किए जा सकते हैं.

9. बढ़ाने और पसंद के मुताबिक बनाने की सुविधा

कस्टम रंगों के साथ स्कीम को बढ़ाने से, सिमैंटिक या अतिरिक्त ब्रैंडिंग रंगों जैसे रंगों को जोड़ा जा सकता है.

कस्टम स्कीम में, पसंद के मुताबिक रंग जोड़े गए हैं.

1. प्लगिन के मोडल में, मुख्य रंगों के नीचे, रंग जोड़ें पर क्लिक करें.
2. मौजूदा थीम, नई Custom0 लाइन के साथ अपडेट हो जाएगी. कलर वेल पर क्लिक करके इस रंग को अपडेट करें. इसके बाद, कोई नया रंग चुनें.
3. इन एक्सटेंडेड रंगों को, सिर्फ़ पढ़ने वाली स्टाइल में Custom0 के तौर पर स्टाइल में देखा जा सकता है. इसमें टोनल पैलेट और स्कीम, दोनों मौजूद हैं. आइए, सूची के कुछ लेबल को नए रंग के साथ मैप करें. इसके लिए, लेबल का बैकग्राउंड चुनें और जोड़े गए किसी रंग की भूमिका (on-custom0 कंटेनर) असाइन करें.

चुने गए रंगों में पसंद के मुताबिक रंग सेट करना.

4. Material Theme Builder, रंगों को Custom# के तौर पर अपने-आप जनरेट करता है. जोड़े गए कस्टम कलर का नाम बदलने के लिए, स्टाइल पैनल में थीम के स्टाइल ग्रुप को बड़ा करें. यह तब दिखेगा, जब कुछ भी नहीं चुना गया होगा. इसके बाद, सोर्स सबग्रुप में Custom0 ढूंढें. यहां सोर्स का नाम बदलने से, प्लगिन के मोडल में रंग का नाम बदल जाएगा.

कस्टम कलर स्टाइल, स्टाइल पैनल में देखी जा सकती हैं.

5. जोड़े गए रंग को हटाने के लिए, उसी तरीके का इस्तेमाल किया जा सकता है. इसके लिए, स्टाइल पर राइट क्लिक करें और उसे मिटा दें. अगली बार प्लगिन खोलने पर, जोड़ा गया रंग हट जाएगा. ऐसा हो सकता है कि नाम बदलने और मिटाने की कार्रवाई, कलर डायग्राम में न दिखे.

अहम जानकारी

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

10. बधाई हो

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

अगले चरण

• Android व्यू और Jetpack Compose के लिए, Material 3 के रंग लागू करने का तरीका जानें.
• Material को पसंद के मुताबिक बनाने की सुविधा का इस्तेमाल करके, अपने उपयोगकर्ताओं को उनकी पसंद के हिसाब से रंग चुनने के ज़्यादा विकल्प दें.
• कलर सिस्टम के बारे में ज़्यादा जानें.
• Android व्यू में कलर हार्मनाइज़ेशन का इस्तेमाल करने का तरीका जानें.
• अपने डिज़ाइन में, पसंद के मुताबिक बनाए गए रंग लागू करें!

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

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