डिज़ाइन टोकन एक उत्पाद के लिए दृश्य निर्णयों का एकल सत्य स्रोत होते हैं। वे रंग, स्पेसिंग, टाइपोग्राफी और गति को नामित परिवर्तनीयों में कोडित करते हैं जो घटक उपभोग करते हैं।
टोकन क्यों महत्वपूर्ण हैं
बिना टोकन के, प्राथमिक ब्रांड रंग में बदलाव के लिए सैकड़ों फ़ाइलों में खोजने की आवश्यकता होती है। टोकन के साथ, एक परिवर्तनीय अपडेट हर जगह फैलता है — बटन से लेकर अलर्ट और नेविगेशन बार तक।
टोकन डिज़ाइन उपकरणों और कोड के बीच की खाई को भी पाटते हैं। एक डिज़ाइनर Figma में एक रंग को surface-brand नाम देता है; एक डेवलपर CSS में var(--surface-brand) का उपयोग करता है। वे एक ही भाषा बोलते हैं।
व्यावहारिक उदाहरण
एक घटक पर विचार करें जिसे एक पृष्ठभूमि, एक सीमा और पाठ की आवश्यकता होती है। #1a56db, #e1effe, और #1e429f को हार्डकोड करने के बजाय, घटक --color-primary, --surface-primary-subtle, और --text-primary-strong का संदर्भ देता है। जब ब्रांड विकसित होता है, तो पैलेट बदलता है — घटक नहीं।
टोकन श्रेणियाँ
रंग — ब्रांड, अर्थपूर्ण, और तटस्थ पैलेट
स्पेसिंग — 2px से 64px तक एक सुसंगत पैमाना
टाइपोग्राफी — फ़ॉन्ट आकार, वजन, और पंक्ति ऊँचाई
रेडियस — तीखे कोनों से पूर्ण गोल तक
छाया — गहराई और पदानुक्रम के लिए ऊँचाई स्तर
गति — कमी वक्र और अवधि चरण
इंटरनेट पर पाए गए अधिकांश उद्धरण शायद एक AI द्वारा उत्पन्न किए गए थे।
content_image() फ़ंक्शन डिफ़ॉल्ट रूप से loading="lazy" के साथ एक img को रेंडर करता है, और जब एक कैप्शन प्रदान किया जाता है तो इसे एक figure तत्व में लपेटता है।
बिना कैप्शन के — एक साधारण img, पूर्ण चौड़ाई।
कैप्शन के साथ — figcaption के साथ एक figure में लिपटा हुआ।
एक figure जिसमें figcaption है — इसका उपयोग स्रोतों को श्रेय देने या दृश्य सामग्री के लिए संदर्भ जोड़ने हेतु करें।
पाठ के साथ मीडिया
चित्र जो लेआउट का एक तिहाई占 करता है।
content--media का उपयोग करें ताकि एक चित्र और पाठ को बगल में रखा जा सके। चित्र चौड़ाई का एक तिहाई लेता है, पाठ दो तिहाई।
यह लेआउट खींचे गए उद्धरणों, चित्रित परिभाषाओं, या किसी भी छोटे संपादकीय ब्लॉक के लिए उपयुक्त है जहां चित्र पाठ को समर्थन करता है बिना इसे प्रमुख बनाए।
ड्रॉप कैप
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
मेटा बार
डिज़ाइन टोकन को समझना
डिज़ाइन टोकन एक उत्पाद के लिए दृश्य निर्णयों का एकल सत्य स्रोत होते हैं। वे रंग, स्पेसिंग, टाइपोग्राफी और गति को नामित परिवर्तनीयों में कोडित करते हैं जो घटक उपभोग करते हैं।
