Frontend Academy · पाठ

Style Dictionary के साथ डिज़ाइन टोकन

JSON में रंग, रिक्ति और टाइपोग्राफी टोकन परिभाषित करें, और Style Dictionary से उन्हें CSS वेरिएबल, JS कॉन्स्टेंट या iOS/Android फ़ॉर्मैट में बदलें।

पाठ 2, कुल 4 में से14 चरण

Style Dictionary के साथ डिज़ाइन टोकन, CoddyKit पर Frontend Academy का एक निःशुल्क पाठ है। यह 4 में से 2वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह Frontend Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Frontend Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

डिज़ाइन टोकन क्या हैं

डिज़ाइन टोकन डिज़ाइन सिस्टम के नामित मूल मान होते हैं: रंग, स्पेसिंग, फ़ॉन्ट आकार, बॉर्डर की गोलाई और शैडो। ये सत्य का मूल स्रोत होते हैं — हर component अपनी शैलियाँ इन्हीं से प्राप्त करता है।

टोकन महत्वपूर्ण क्यों हैं

टोकन डिज़ाइन संबंधी निर्णयों को कार्यान्वयन से अलग करते हैं। color.primary को नीले से हरा एक बार बदलें, और इसका उपयोग करने वाला हर component अपडेट हो जाएगा। इनसे वेब, iOS और एंड्रॉइड के लिए एक ही डिज़ाइन जारी करना भी संभव होता है।

टोकन का संग्रहण

टोकन को JSON या YAML में रखें — यह ऐसा तटस्थ प्रारूप है जिसका उपयोग अलग-अलग प्लेटफ़ॉर्म के टूल कर सकते हैं। JSON सबसे सामान्य है।

// tokens/color.json
{
  "color": {
    "brand": {
      "primary": { "value": "#2563eb" },
      "secondary": { "value": "#7c3aed" }
    },
    "text": {
      "default": { "value": "#111827" },
      "muted": { "value": "#6b7280" }
    }
  }
}

Style Dictionary

Style Dictionary (अमेज़न) डिज़ाइन टोकन के लिए व्यवहार में सबसे अधिक उपयोग किया जाने वाला बिल्ड टूल है। यह टोकन पढ़कर उन्हें कई आउटपुट प्रारूपों में बदलता है: CSS वेरिएबल्स, SCSS, JS कॉन्स्टेंट्स, iOS Swift और एंड्रॉइड XML।

npm install -D style-dictionary

कॉन्फ़िगरेशन

इनपुट टोकन और आउटपुट प्लेटफ़ॉर्म का विवरण देने वाली style-dictionary.config.js बनाएँ।

// style-dictionary.config.js
module.exports = {
  source: ['tokens/**/*.json'],
  platforms: {
    css: {
      transformGroup: 'css',
      buildPath: 'build/css/',
      files: [{ destination: 'tokens.css', format: 'css/variables' }]
    },
    js: {
      transformGroup: 'js',
      buildPath: 'build/js/',
      files: [{ destination: 'tokens.js', format: 'javascript/es6' }]
    },
    ios: {
      transformGroup: 'ios',
      buildPath: 'build/ios/',
      files: [{ destination: 'Tokens.swift', format: 'ios-swift/class.swift' }]
    }
  }
};

बिल्ड चलाना

सभी प्लेटफ़ॉर्म के लिए आउटपुट बनाने हेतु CLI चलाएँ।

npx style-dictionary build

# Output:
# build/css/tokens.css     — CSS variables
# build/js/tokens.js       — JS constants
# build/ios/Tokens.swift   — Swift constants

बना हुआ CSS आउटपुट

एकसमान नामकरण योजना वाले CSS वेरिएबल्स (नेमस्पेस के साथ kebab-case)।

:root {
  --color-brand-primary: #2563eb;
  --color-brand-secondary: #7c3aed;
  --color-text-default: #111827;
  --color-text-muted: #6b7280;
}

बना हुआ JS आउटपुट

JS/TS कोड में उपयोग के लिए JS ऑब्जेक्ट (Tailwind कॉन्फ़िगरेशन, CSS-in-JS)।

export const ColorBrandPrimary = '#2563eb';
export const ColorBrandSecondary = '#7c3aed';
export const ColorTextDefault = '#111827';

टोकन नामकरण की परंपराएँ

लिटरल नामों (color.blue-500) के बजाय अर्थपूर्ण नाम (color.primary) का उपयोग करें। अर्थपूर्ण टोकन आपको नाम बदले बिना मान बदलने देते हैं। दो-स्तरीय प्रणाली: लिटरल पैलेट (blue-500) → अर्थपूर्ण उपनाम (primary)।

{
  "color": {
    "palette": {
      "blue-500": { "value": "#2563eb" }
    },
    "brand": {
      "primary": { "value": "{color.palette.blue-500.value}" }
    }
  }
}

टोकन से थीम बनाना

थीम (हल्की/गहरी) का समर्थन करने के लिए अलग-अलग इनपुट के साथ कई प्लेटफ़ॉर्म बनाएँ — नाम समान रखें, मान अलग।

// Light theme:
--color-bg: white;
--color-text: black;

// Dark theme:
--color-bg: #111;
--color-text: white;

टोकन की श्रेणियाँ

सामान्य श्रेणियाँ: रंग, स्पेसिंग, टाइपोग्राफ़ी (फ़ॉन्ट-फ़ैमिली, आकार, लाइन-हाइट, वज़न), बॉर्डर (गोलाई, चौड़ाई), शैडो, ट्रांज़िशन (अवधि, ईज़िंग), z-index और ब्रेकपॉइंट।

टोकन रजिस्ट्री के टूल

Style Dictionary के अलावा: Tokens Studio (Figma प्लगइन), Specify और Supernova। इनसे डिज़ाइनर Figma में टोकन प्रबंधित करके उन्हें कोडबेस के साथ अपने-आप सिंक कर सकते हैं।

त्वरित जाँच

Style Dictionary के साथ डिज़ाइन टोकन का उपयोग करने का मुख्य लाभ क्या है?

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन: डिज़ाइन टोकन

टोकन नामित मूल मान होते हैं (रंग, स्पेसिंग, टाइप) — डिज़ाइन सिस्टम के लिए सत्य का मूल स्रोत। इन्हें JSON के रूप में रखें। Style Dictionary इन्हें CSS वेरिएबल्स, JS, iOS और एंड्रॉइड में बदलता है। लिटरल नाम (blue-500) के बजाय अर्थपूर्ण नाम (primary)। दो स्तर: पैलेट → अर्थपूर्ण उपनाम। अलग-अलग बिल्ड के माध्यम से थीम। Tokens Studio से Figma के साथ सिंक।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 41
पाठ: 163

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “Style Dictionary के साथ डिज़ाइन टोकन” पाठ निःशुल्क है?

हाँ—“Style Dictionary के साथ डिज़ाइन टोकन” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Frontend Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Frontend Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“Style Dictionary के साथ डिज़ाइन टोकन” में मैं क्या सीखूँगा?

JSON में रंग, रिक्ति और टाइपोग्राफी टोकन परिभाषित करें, और Style Dictionary से उन्हें CSS वेरिएबल, JS कॉन्स्टेंट या iOS/Android फ़ॉर्मैट में बदलें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Frontend Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Frontend Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Frontend Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 2वाँ पाठ है।

“Style Dictionary के साथ डिज़ाइन टोकन” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Frontend Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Frontend Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← Frontend Academy पर वापस जाएँ