वैरिएबल फ़ॉन्ट पर माइग्रेट करना

1. परिचय

पिछला अपडेट: 05/11/22

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

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

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

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

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

• टाइप स्केल की जानकारी होनी चाहिए.
• Figma की जानकारी होनी चाहिए.
• एचटीएमएल और सीएसएस की बुनियादी जानकारी.

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

• Figma खाता
• Figma designlab फ़ाइल
• वेब के लिए पसंदीदा कोड एडिटर

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

सेटअप

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

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

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

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

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

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

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

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

वैरिएबल फ़ॉन्ट की जांच करना

शुरू करने से पहले, हमें यह पक्का करना होगा कि हमारे पास वैरिएबल फ़ॉन्ट है! इस फ़ाइल में Roboto Flex का इस्तेमाल किया गया है. यह फ़ॉन्ट, Figma में पहले से उपलब्ध है. इसके अलावा, इसे fonts.google.com से भी डाउनलोड किया जा सकता है

3. वैरिएबल फ़ॉन्ट क्या होते हैं?

वैरिएबल फ़ॉन्ट, एक नया और दिलचस्प फ़ॉन्ट फ़ॉर्मैट है. इससे उपयोगकर्ताओं को अपने टाइप और आइकॉन पर कंट्रोल मिलता है. Roboto Serif और Roboto Flex, वैरिएबल फ़ॉन्ट टेक्नोलॉजी के लिए बनाए गए नए टाइपफ़ेस हैं. इनमें से हर एक में, कई तरह के ऐक्सिस होते हैं.

एक्सप्रेशन और ऐक्सिस

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

फ़ायदे

वैरिएबल फ़ॉन्ट की मदद से, एक ही फ़ॉन्ट फ़ाइल में कई स्टाइल डिलीवर की जा सकती हैं. इससे वेबसाइटें ज़्यादा टिकाऊ, छोटी, और तेज़ हो जाती हैं. साथ ही, डिज़ाइनर को ज़्यादा कंट्रोल मिलता है.

4. डिज़ाइन में वैरिएबल फ़ॉन्ट का इस्तेमाल करना

ऐक्सिस बदलना

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

1. वेट से किसी अक्षर की मोटाई तय होती है. इससे स्ट्रोक की मोटाई को लगातार और पूरी तरह से बदला जा सकता है.

2. चौड़ाई से पता चलता है कि टाइपफ़ेस के वर्णों ने कितना हॉरिज़ॉन्टल स्पेस लिया है.

3. स्टाइल को सीधा से तिरछा करें. इसे टाइपोग्राफ़र ‘ऑब्लिक' स्टाइल भी कहते हैं. हालांकि, ऐसा बहुत कम होता है, लेकिन स्लेंट दूसरी दिशा में भी काम कर सकता है. इसे ‘बैकस्लेंटेड' या ‘रिवर्स ऑब्लिक' स्टाइल कहा जाता है.

4. ग्रेड, टाइपफ़ेस के ऑप्टिकल वेट का सेकंडरी मॉडिफ़ायर होता है. यह वेट ऐक्सिस से अलग होता है. वज़न और ग्रेड, दोनों से ही अक्षर की मोटाई पर असर पड़ता है. हालांकि, ग्रेड में किए गए बदलावों से अक्षर की मोटाई में ज़्यादा बारीक अंतर आता है.

5. ऑप्टिकल साइज़. स्टाइल को पॉइंट में तय किए गए टेक्स्ट के साइज़ के हिसाब से ढालें. छोटे साइज़ में, अक्षरों को आम तौर पर ज़्यादा आसानी से पढ़ने के लिए ऑप्टिमाइज़ किया जाता है. इनमें अक्षरों के बीच ज़्यादा जगह होती है, कम जानकारी के साथ मोटे स्ट्रोक होते हैं. बड़े साइज़ में, अक्षरों को आम तौर पर पतले स्ट्रोक और ज़्यादा जानकारी वाले फ़ॉर्म के साथ हेडलाइन के लिए ऑप्टिमाइज़ किया जाता है. साथ ही, ज़्यादा वेट और चौड़ाई के लिए भी ऑप्टिमाइज़ किया जाता है.

Figma के बाहर वैरिएबल फ़ॉन्ट ऐक्सिस का इस्तेमाल करने के लिए, वैरिएबल फ़ॉन्ट का डेमो देखें.

5. स्टाइल के बारे में ज़्यादा जानें

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

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

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

Material Theme Builder की मदद से, डिफ़ॉल्ट Material टाइप स्केल को Figma स्टाइल के तौर पर जनरेट किया जा सकता है. इसके अलावा, M3 डिज़ाइन किट को डुप्लीकेट करके भी ऐसा किया जा सकता है.

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

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

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

7. कोड में लागू करना

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

हम इसे लागू करने के लिए, बुनियादी एचटीएमएल और सीएसएस का इस्तेमाल करेंगे. हम MWC या किसी फ़्रेमवर्क का इस्तेमाल नहीं करेंगे.

Google Fonts पर वैरिएबल फ़ॉन्ट

Google Fonts को फ़ॉन्ट डिलीवरी सेवा के तौर पर इस्तेमाल करें. इससे आपको अपनी वेबसाइट पर कई तरह के फ़ॉन्ट आसानी से लागू करने में मदद मिलेगी. इनमें वैरिएबल फ़ॉन्ट भी शामिल हैं!

fonts.google.com पर जाकर, देखें कि कौनसे वैरिएबल फ़ॉन्ट उपलब्ध हैं. फ़िल्टर करने के लिए, खोज के नीचे मौजूद सिर्फ़ वैरिएबल फ़ॉन्ट दिखाएं पर क्लिक करें. वैरिएबल फ़ॉन्ट में, पेज के सबसे नीचे एक प्लेग्राउंड शामिल होता है. यहां फ़ैमिली में उपलब्ध हर ऐक्सिस के लिए, स्लाइडर सेट किए जा सकते हैं.

सीएसएस की मदद से स्टाइल करना

सभी फ़ॉन्ट में, पसंद के मुताबिक बनाने के लिए ऐक्सिस की संख्या एक जैसी नहीं होती. फ़िलहाल, मोटाई, चौड़ाई, झुकाव, इटैलिक, और ऑप्टिकल साइज़ सबसे ज़्यादा इस्तेमाल किए जाते हैं.

इन्हें सीएसएस की उन बुनियादी फ़ॉन्ट प्रॉपर्टी की मदद से सेट किया जा सकता है जो वैरिएबल फ़ॉन्ट से पहले मौजूद थीं. हालांकि, मई 2022 तक, सभी ऐक्सिस के लिए यह सुविधा बड़े पैमाने पर उपलब्ध नहीं है. फिर भी, नई प्रॉपर्टी font-variation-settings का इस्तेमाल करके, सभी ऐक्सिस को भरोसेमंद तरीके से सेट किया जा सकता है.

Axes	Abbreviation	CSS property
Weight	wght	font-weight
Width	wdth	font-stretch
Slant	slnt	font-style*
Italic	ital	font-style*
Optical Size	opsz	font-optical-sizing

*फ़ॉन्ट-स्टाइल में स्लांट (slnt) और इटैलिक (ital) पर भरोसा नहीं किया जा सकता.

8. Google Fonts API की मदद से इंपोर्ट करना

हम सिर्फ़ Roboto का इस्तेमाल कर रहे थे, लेकिन अब fonts.google.com पर हमारे लिए उपलब्ध सभी फ़ॉन्ट देखें.

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

1. कार्ड के सैंपल यूज़र इंटरफ़ेस (यूआई) वाले इस कोड को अपनी पसंद के वेब आईडीई में कॉपी करें.

<html>
 <title>Migrating to Variable fonts</title>
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
/* imports __________________ */


/* body __________________________ */
body {
 font-size: 18px;
 color: #21005D;
 background: #E8DEF8;
}
/* typography __________________________ */

h1 {   
   line-height: 0;
/* add font styles for headline */
}

h2 {
   line-height: 0;
/* add font styles for care titles */
}

p {
   margin: 0;
   line-height: 150%;
/* add font styles for body copy */
}

.label {
/* add font styles for labels */
}

/* layout __________________________ */
article {
   margin: 16px auto;
   padding: 16px 24px;
   width: 30%;
   background: #FFFFFF;
   border: 1px solid #4F8438;
   border-radius: 24px;
}
div.labels {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 12px;
}
span.label {
   margin: 8px 0;
   padding: 4px 8px;
   background: #C4EED0;
   border-radius: 8px;
}
article.care {
   padding: 8px 24px;
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 8px;
}
</style>
  <body>
   <article>
     <h1>philodendron</h1>
     <p>The philodendron is part of a large family of plants comprising 489 spcies. Known for their large interesting leaves, growing mainly in tropical climates. Most philodendron make for ideal houseplants, with some more rare exceptions are easy to propogate and require less attention as some fussier plant families</p>
     <div class="labels">
       <span class="label">easy care</span>
       <span class="label">tropical</span>
     </div>
   </article>

   <article class="care">
       <span class="material-icons">water</span>
       <h2>water</h2>
       <p>Water when dry</p>
   </article>

   <article class="care">
       <span class="material-icons">light</span>
       <h2>light</h2>
       <p>Bright indirect light</p>
   </article>
 </body>
 </html>

2. हमने पिछले अभ्यास में हेडलाइन, टाइटल, बॉडी, और लेबल के लिए स्टाइल स्पेसिफ़िकेशन सेट किए थे. इन्हें नोट कर लें. इन बातों को ध्यान में रखते हुए, Roboto Flex के पेज पर जाएं. स्लाइडर को उन स्पेसिफ़िकेशन के हिसाब से सेट करें जो आपने Figma में सेट किए हैं. इसके बाद, साइड ड्रॉअर में जोड़ने के लिए, हर एक के लिए इस स्टाइल को चुनें.
3. ड्रॉर में, चुनी गई स्टाइल में जाकर, वेब पर इस्तेमाल करें को ढूंढें. अपने कोड में फ़ॉन्ट जोड़ने के दो तरीके हैं: <link> या @import का इस्तेमाल करके. हमें सिर्फ़ एक की ज़रूरत है. इसलिए, @import को चुनें.
4. @import से लेकर सेमीकोलन तक के हिस्से को कॉपी करें. इसके बाद, इसे स्टाइल टैग में इंपोर्ट करने से जुड़ी टिप्पणी के बाद चिपकाएं.
5. सिर्फ़ Roboto Flex फ़ॉन्ट का इस्तेमाल किया गया है. इसलिए, फ़ॉन्ट फ़ैमिली को कॉल करने के लिए बॉडी सेट करें. इसके लिए, "फ़ैमिली तय करने के लिए सीएसएस के नियम" जोड़ें. यह इंपोर्ट कोड में शामिल है.

body {
 font-family: 'Roboto Serif', sans-serif;
 font-size: 18px;
 color: #0C332A;
 background: rgb(247, 245, 245);
}

यह चुने गए फ़ॉन्ट और स्टाइल सेट को इंपोर्ट करता है. हालांकि, ऐक्सिस रेंज का इस्तेमाल करने से, अलग-अलग स्टाइल के बजाय स्टाइल की लगातार रेंज का इस्तेमाल किया जा सकता है. रेंज बनाने के लिए, दो वैल्यू को .. से जोड़ें. उदाहरण के लिए, 100..900). पक्का करें कि आपने सिर्फ़ वे रेंज जोड़ी हों जो फ़ॉन्ट के स्लाइडर में मौजूद हैं. ऐसा न करने पर, फ़ॉन्ट ठीक से लोड नहीं होगा.

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

9. सीएसएस वैरिएबल फ़ॉन्ट प्रॉपर्टी

फ़ॉन्ट इंपोर्ट करने के बाद, आइए स्टाइल करने के लिए कुछ सीएसएस प्रॉपर्टी पाने के लिए, वापस Figma पर जाएं. साथ ही, font-variation-settings सीएसएस प्रॉपर्टी पर एक नज़र डालें.

1. दाईं ओर मौजूद पैनल में चुने गए h1 हेडलाइन से शुरू करके, सबसे ऊपर मौजूद जांच करें टैब को चुनें. इससे पैनल, डेवलपर को हैंडऑफ़ करने के लिए कोड की जांच करने वाले मोड पर स्विच हो जाता है. कोड, आखिरी सेक्शन है.
2. अगर आपने अब तक ऐसा नहीं किया है, तो ड्रॉपडाउन मेन्यू में जाकर फ़ॉर्मैट को सीएसएस के तौर पर बदलें. अगर स्टैंडर्ड एट्रिब्यूट का इस्तेमाल किया जाता है, तो उन्हें font-weight, font-stretch, font-style, font-optical-sizing के तौर पर दिखाया जाता है. इसके बाद, लो-लेवल font-variation-settings एट्रिब्यूट दिखाए जाते हैं. इनमें ऐसे कस्टम ऐक्सिस होते हैं जो रजिस्टर नहीं किए गए हैं. font-variation-settings का इस्तेमाल करने से पहले, स्टैंडर्ड एट्रिब्यूट का इस्तेमाल करें.

Figma, चौड़ाई (wdth) के लिए font-stretch के बजाय font-variation-settings का इस्तेमाल करता है.

3. टाइप से जुड़े इस सीएसएस कोड को कॉपी करें, ताकि हम अपने h1 सिलेक्टर को स्टाइल कर सकें.

h1 {    
    line-height: 0;
    font-size: 36px;
    font-weight: 125;
    font-stretch: 167%;
}

4. केयर कार्ड के टाइटल की स्टाइल को h2 में कॉपी किया जा सकता है. मुख्य मैसेज के लिए भी ऐसा ही करें. इसके लिए, p में कॉपी करें. लेबल की स्टाइल को .label में कॉपी किया जा सकता है

10. बधाई हो

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

अगले चरण

• Material 3 टाइप से जुड़े दिशा-निर्देश देखें.
• Roboto Flex के बारे में ज़्यादा पढ़ें.
• इन्हें अपने डिज़ाइन पर लागू करें!

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

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