डिज़ाइन टोकन के रूप में आइकन कैसे कार्यान्वित किए जा सकते हैं?

हालांकि डिज़ाइन टोकन के बारे में बात करते समय उन्हें कम ध्यान मिलता है, आइकन टोकन बहुत शक्तिशाली हो सकते हैं।

किसी अन्य प्रकार के टोकन की तरह, आइकन टोकन स्तर 1 और स्तर 2 का होना चाहिए, स्तर 3 वैकल्पिक होना चाहिए।

जब आइकन टोकन की बात आती है तो इसके कम से कम 2 प्रमुख लाभ हैं:

1. प्रत्येक आइकन की भूमिका में अधिक कठोर विचार।
2. अधिक संरचित, स्केलेबल और रखरखाव योग्य आइकन सेट।

कल्पना कीजिए कि हम इन आइकनों को उस उत्पाद के लिए चुनते हैं जिसे हम वर्तमान में विकसित कर रहे हैं।

आप उनका नाम कैसे रखेंगे?

मुझे लगता है कि आप में से कम से कम कुछ अपनी शब्दार्थ/भूमिका/कार्य चुनेंगे, इसलिए: होम, पसंदीदा/लाइक, ट्रैश, एडिट और नोटिफिकेशन।

हालांकि यह बिल्कुल भी गलत नहीं है, यह ऐसा करने का सांकेतिक तरीका नहीं है।

तो आइए डिज़ाइन टोकन के पहले और दूसरे स्तर पर नज़र डालें:

1. संदर्भ टोकन

पहले अपने हथियार उठाओ, राक्षस बाद में आते हैं।

यह वह जगह है जहाँ हम अपनी पसंद स्थापित करते हैं, जैसे:

• मैं इस लाल #ff0044 को चुनता हूँ और इसे "color.chills" कहूँगा।
• मैं कॉमिक सैन्स चुनता हूं और इसे "फॉन्ट. लवली" कहूंगा।

• मैं इस घर को चुनता हूं और मैं इसे "आइकन.100" कहूंगा।

• मैं इस घर को चुनता हूं और मैं इसे "आइकन हाउस" कहूंगा।

जैसा कि आप देख सकते हैं कि कुछ संदर्भ टोकन जैसे रंग या आइकन के नामकरण के लिए दो "स्कूल *" हैं।

*दरअसल ऐसा कोई स्कूल नहीं है, मैं सिर्फ उन दो तरीकों को और अधिक परिष्कृत स्पर्श देना चाहता था जिनका उपयोग मैं अक्सर संदर्भ चिह्नों को नाम देने के लिए करता हूं।

" सिमेंटिक" स्कूल:

• मैं इस घर को चुनता हूं और मैं इसे "आइकन हाउस" कहूंगा।
• मैं इस दिल को चुनता हूं और मैं इसे "आइकन.हार्ट" कहूंगा।
• मैं इस ट्रैश कैन को चुनता हूँ और मैं इसे "icon.trash-can" कहूँगा।
• मैं इस पेंसिल को चुनता हूं और मैं इसे "आइकन.पेंसिल" कहूंगा।
• मैं इस घंटी को चुनता हूं और मैं इसे "icon.bell" कहूंगा।

• मैं इस घर को चुनता हूं और मैं इसे "आइकन.100" कहूंगा।
• मैं इस दिल को चुनता हूं और मैं इसे "आइकन.120" कहूंगा।
• मैं इस ट्रैश को चुनता हूं और मैं इसे "icon.155" कहूंगा।
• मैं इस पेंसिल को चुनता हूं और मैं इसे "आइकन.156" कहूंगा।
• मैं इस घंटी को चुनता हूँ और मैं इसे "icon.172" कहूँगा।

भला - बुरा

यदि " अज्ञेयवादी " संचार और याद रखने के लिए बहुत सार है, तो " सिमेंटिक " संदर्भ टोकन (AKA आधार टोकन, आदिम, वैश्विक टोकन) के मूल अज्ञेयवाद के खिलाफ जाता है।

संदर्भ टोकन को आमतौर पर "फ़ॉन्ट-वेट.100" या "स्पेस.400" नाम दिया जाता है। नामकरण रंग और चिह्न "color.blue" और "icon.house" वर्गीकरण में फिट नहीं होंगे, है ना?

जबकि "icon.100" मुझे किसी भी आइकन को अंदर फेंकने की इजाजत देता है, "icon.house" काम करने के लिए 1000 गुना अधिक सहज है। फिर भी, मैं पहले विकल्प, " अज्ञेयवादी " का उपयोग करना पसंद करता हूं। यहाँ पर क्यों:

मैं चाहता हूं कि मेरे संदर्भ टोकन खाली बक्से हों। मैं जो कुछ भी अंदर रखूं वह बॉक्स को आकार नहीं देना चाहिए। यदि मैं इनमें से किसी एक बॉक्स को आज दिल के आइकन से भरता हूं, तो मैं इसे बिना किसी नाम के विवाद के कल एक स्टार में बदलने में सक्षम होना चाहता हूं।

"अर्थ" टोकन के दूसरे स्तर पर शुरू होगा, "सिस्टम टोकन"।

2. सिस्टम टोकन

यहां वह जगह है जहां चीजें अधिक दिलचस्प होती हैं: निर्णय।

फैसलों से मेरा मतलब है:

• मैं होम के लिए अपने आइकन के रूप में " rt.icon.house " या " rt.icon.100 " (rt = संदर्भ टोकन) का उपयोग करने का निर्णय लेता हूं , इसलिए " st.icon.home " (st = सिस्टम टोकन)।
• मैं पसंदीदा के लिए अपने आइकन के रूप में " rt.icon.heart " या " rt.icon.120 " का उपयोग करने का निर्णय लेता हूं , इसलिए " st.icon.favorite "।
• मैं हटाने के लिए अपने आइकन के रूप में " rt.icon.trash-can " या " rt.icon.155 " का उपयोग करने का निर्णय लेता हूं , इसलिए " st.icon.delete "।
• मैं संपादित करने के लिए अपने आइकन के रूप में " rt.icon.pencil " या " rt.icon.156 " का उपयोग करने का निर्णय लेता हूं , इसलिए " st.icon.edit "।
• मैं सूचनाओं के लिए अपने आइकन के रूप में " rt.icon.bell " या " rt.icon.182 " का उपयोग करने का निर्णय लेता हूं , इसलिए " st.icon.notifications "।

संभावना है कि आप डेवलपर्स या अन्य डिजाइनरों को सूचित करने के लिए सिस्टम टोकन का उपयोग करेंगे, निर्णय: "हे जॉन, कृपया मोडल के लिए st.icon.close का उपयोग करें"।

1. प्रत्येक आइकन की भूमिका में अधिक कठोर विचार।

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

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

2. अधिक संरचित, स्केलेबल और रखरखाव योग्य आइकन सेट।

इस लाभ की व्याख्या करने के लिए, आइए कुछ आवर्ती स्थितियों को याद करें:

समस्या 1: आपको क्रॉस आइकन पसंद नहीं है और आप इसे पतले आइकन से बदलना चाहते हैं।

समाधान: आप अपना संदर्भ टोकन खोलें और आंतरिक आकार को बदलें/समायोजित करें।

परिणाम: उस संदर्भ टोकन की ओर इशारा करते हुए सभी सिस्टम टोकन अब अपडेट किए जाएंगे, अर्थात्:

• हटाएं (किसी तत्व को हटाने की क्रिया के लिए)
• निकालें (किसी तत्व को हटाने की क्रिया के लिए)
• बंद करें (किसी तत्व को बंद करने की क्रिया के लिए)।
• त्रुटि (त्रुटि संदेश के साथ)

समाधान: आप एक नया संदर्भ टोकन “ icon.trash ” बनाते हैं, फिर नए “ icon.trash ” को लक्षित करने के लिए सिस्टम टोकन “ icon.delete ” को अपडेट करते हैं । यह रिमूव, क्लोज और एरर को बरकरार रखेगा।

परिणाम 1: कोई भी घटक जो “ icon.delete ” का उपयोग करता है, अब एक ट्रैश कैन दिखाएगा।

जैसा कि आप देख सकते हैं, यह सभी संभावित लचीलापन किसी बिंदु पर काम आएगा। दूसरी ओर, अग्रिम कार्य की लागत महत्वपूर्ण नहीं है।

संक्षेप में दुहराना…

आप एक rt.icon को बदल सकते हैं और उस आइकन को लक्षित करने वाले सभी सिस्टम और घटक टोकन को प्रभावित कर सकते हैं। उदाहरण के लिए मैं दिल के आइकन को स्टार में बदलता हूं।

आप एक st.icon को बदल सकते हैं और सिमेंटिक तत्व को लक्षित करने वाले सभी घटक टोकन को प्रभावित कर सकते हैं। ईजी "पसंदीदा" अब एक स्टार द्वारा दर्शाया गया है जबकि दिल "लाइक" के लिए उपयोग किया जाता है।

आप एक ct.icon को बदल सकते हैं और केवल एक बहुत विशिष्ट घटक को प्रभावित कर सकते हैं। ईजी कार्ड घटक, डार्क मोड में, "पसंदीदा" के लिए प्रकाश मोड में उपयोग किए जाने वाले रेखांकित स्टार के बजाय एक भरे हुए स्टार का उपयोग करेगा।

फिग्मा टोकन

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

फिर भी, Figma Tokens टीम के अनुसार, इस सुविधा का उपयोग करना बहुत जल्द हो सकता है क्योंकि अभी भी कार्य प्रगति पर है:

"वर्तमान में छवि स्रोत को अपने स्वयं के CORS (क्रॉस-ऑरिजनल रिसोर्स शेयरिंग) सत्यापन की आवश्यकता है। कुछ वेबसाइटों ने इसे पहले ही लागू कर दिया है (उदाहरण के लिए अनस्प्लैश), लेकिन अन्यथा आप इसे CORS प्रॉक्सी के पीछे रख सकते हैं। सीओआरएस पर अधिक जानकारी यहां पाई जा सकती है । हम भविष्य में रिलीज़ में एक CORS प्रॉक्सी जोड़ेंगे।" यहाँ पूरा लेख है।