सिमेंटिक डिज़ाइन टोकन आर्किटेक्चर: वैश्विक, सिमेंटिक और घटक टोकन
तीन स्तरों में डिज़ाइन टोकन की संरचना कैसे करें, थीम और कई ब्रांडों का समर्थन कैसे करें, और उन्हें W3C DTCG प्रारूप का उपयोग करके वेब, iOS और Android पर कैसे भेजें।
कोर टेकअवे
अधिकांश परिपक्व डिज़ाइन प्रणालियाँ टोकन के तीन स्तरों का उपयोग करती हैं: वैश्विक (कच्चे मान जैसे नीला-600), सिमेंटिक (उद्देश्य, जैसे रंग.क्रिया.प्राथमिक) और घटक (विशिष्ट उपयोग, जैसे बटन.बैकग्राउंड)। घटक सिमेंटिक टोकन का संदर्भ देते हैं, सिमेंटिक टोकन वैश्विक संदर्भ देते हैं, और थीम या ब्रांड केवल सिमेंटिक परत की अदला-बदली करते हैं। उन्हें W3C DTCG प्रारूप में संग्रहीत करें और बिल्ड टूल के साथ प्लेटफ़ॉर्म कोड जेनरेट करें।
तीन स्तर
Material Design टोकन के तीन वर्गों का वर्णन करता है: संदर्भ, सिस्टम और घटक। कई टीमें उन्हें वैश्विक, अर्थपूर्ण और घटक कहती हैं। नाम अलग-अलग हैं, लेकिन विचार एक ही है: कच्चे मूल्यों को उनके उपयोग के तरीके से अलग करें।
- वैश्विक (संदर्भ): सिस्टम में प्रत्येक कच्चा मान, जैसे नीला-600, स्पेस-4, फ़ॉन्ट-आकार-16, स्प्रिंग-जेंटल।
- सिमेंटिक (सिस्टम): कोई मान किसके लिए है, जैसे कि color.text.primary, color.action.primary,motion.enter.
- घटक: एक घटक सिस्टम का उपयोग कैसे करता है, जैसे बटन.बैकग्राउंड या डायलॉग.मोशन.ओपन।
सिमेंटिक टोकन क्यों मायने रखते हैं
यदि कोई बटन सीधे ब्लू-600 का उपयोग करता है, तो प्रत्येक थीम परिवर्तन का अर्थ है प्रत्येक घटक को संपादित करना। यदि यह कलर.एक्शन.प्राइमरी, डार्क मोड, हाई कंट्रास्ट या नए ब्रांड का उपयोग करता है तो केवल वही बदलता है जो कलर.एक्शन.प्राइमरी इंगित करता है। सामग्री नोट करती है कि टोकन उच्च-कंट्रास्ट पैलेट को लागू करना या टाइप स्केल सिस्टम-वाइड को बिल्कुल इसी तरह से बदलना संभव बनाते हैं।
थीम्स और अनेक ब्रांड
मल्टी-ब्रांड या व्हाइट-लेबल उत्पादों के लिए, प्रति ब्रांड सिमेंटिक और कंपोनेंट टोकन का एक सेट और एक वैश्विक पैलेट रखें। प्रत्येक थीम सिमेंटिक टोकन से लेकर वैश्विक मूल्यों तक का मानचित्रण है। अक्टूबर 2025 में जारी W3C डिज़ाइन टोकन विनिर्देश (2025.10) का पहला स्थिर संस्करण, थीम और मल्टी-ब्रांड समर्थन, डिस्प्ले पी 3 और ओकेएलसीएच जैसे आधुनिक रंग स्थान, और उपनाम और घटक-स्तरीय संदर्भ जोड़ता है।
मोशन टोकन यहां भी हैं
अवधि, सहजता वक्र और स्प्रिंग्स समान स्तरों का अनुसरण करते हैं। एक वैश्विक टोकन अपनी कठोरता और नमी के कारण वसंत-कोमल हो सकता है; एक सिमेंटिक टोकन मोशन.एंटर इसे इंगित करता है; एक घटक टोकन शीट.मोशन.ओपन मोशन.एंटर की ओर इंगित करता है। एक कम गति वाली थीम जोड़ें जो मोशन टोकन को छोटे फ़ेड में रीमैप करती है।
हर प्लेटफॉर्म पर टोकन भेजना
टोकन को DTCG JSON के रूप में भंडार में रखें, जो सत्य का एकमात्र स्रोत है। Style Dictionary जैसा एक बिल्ड टूल उन्हें CSS वेरिएबल्स, स्विफ्ट, Kotlin, Flutter या अन्य प्रारूपों में बदल देता है। समान प्रारूप को पढ़ने वाले डिज़ाइन टूल सिंक में रह सकते हैं, और AI कोडिंग टूल सीधे JSON को पढ़ सकते हैं।
- सत्य का स्रोत: Git में DTCG JSON, कोड की तरह समीक्षा की गई
- निर्माण: प्रत्येक परिवर्तन पर प्रत्येक प्लेटफ़ॉर्म पर रूपांतरित करें
- डिज़ाइन टूल सिंक: आयात या प्लगइन, कभी भी हाथ से कॉपी किए गए मान नहीं
- लिंटिंग: घटकों में कच्चे मूल्यों को वर्जित करें
याद रखने योग्य कुंजी Principle
- तीन स्तर: वैश्विक (मूल्य), अर्थ संबंधी (उद्देश्य), घटक (उपयोग)
- घटक सिमेंटिक टोकन का संदर्भ देते हैं, कभी भी कच्चे मान का नहीं
- थीम और ब्रांड सिमेंटिक परत को फिर से मैप करते हैं
- W3C DTCG प्रारूप अक्टूबर 2025 में अपने पहले स्थिर संस्करण (2025.10) पर पहुंच गया
- मोशन टोकन और एक कम गति वाली थीम शामिल करें
अक्सर पूछे जाने वाले प्रश्नों
स्रोत
- Design tokens overview — Material Design 3
- Design Tokens specification reaches first stable version — W3C डिज़ाइन टोकन समुदाय समूह
- Design Tokens Community Group — designtokens.org
- Style Dictionary — styledictionary.com