ڈیزائن ٹوکنز ایک پروڈکٹ میں بصری فیصلوں کے لیے سچائی کا واحد ذریعہ ہیں۔ وہ رنگ، فاصلے، نوع ٹائپ، اور حرکت کو نامزد متغیرات میں کوڈ کرتے ہیں جو اجزاء استعمال کرتے ہیں۔
ٹوکن کیوں اہم ہیں
بغیر ٹوکن کے، بنیادی برانڈ رنگ میں تبدیلی کے لیے سینکڑوں فائلوں میں تلاش کرنا ضروری ہے۔ ٹوکن کے ساتھ، ایک متغیر کی تازہ کاری ہر جگہ پھیل جاتی ہے — بٹن سے لے کر الرٹس تک نیویگیشن بار تک۔
ٹوکن ڈیزائن کے اوزار اور کوڈ کے درمیان خلا کو بھی پل کرتے ہیں۔ ایک ڈیزائنر Figma میں ایک رنگ کو surface-brand نام دیتا ہے؛ ایک ڈویلپر CSS میں var(--surface-brand) کا استعمال کرتا ہے۔ وہ ایک ہی زبان بولتے ہیں۔
عملی مثالیں
ایک ایسا جزو تصور کریں جس کو ایک پس منظر، بارڈر، اور متن کی ضرورت ہو۔ سخت کوڈنگ کے بجائے #1a56db، #e1effe، اور #1e429f، جزو --color-primary، --surface-primary-subtle، اور --text-primary-strong کا حوالہ دیتا ہے۔ جب برانڈ ترقی کرتا ہے تو پیلیٹ تبدیل ہوتی ہے — جزو نہیں۔
ٹوکن کی اقسام
رنگ — برانڈ، معنوی، اور نیوٹرل پیلیٹ
فاصلہ — 2px سے 64px تک ایک مستقل پیمانہ
نوع ٹائپ — فونٹ کے سائز، وزن، اور لائن کی اونچائیاں
ریڈیس — تیز کونوں سے مکمل طور پر گول
سایہ — گہرائی اور درجہ بندی کے لیے بلندی کی سطح
حرکت — ایزنگ کرو اور دورانیے کے مراحل
انٹرنیٹ پر ملنے والے زیادہ تر اقتباسات شاید ایک AI نے تیار کیے ہوں گے۔
ڈوئس آؤتے آئریور ڈولر ان ریپریہنڈریٹ ان وولیپٹیٹ ویلیٹ ایسے سلیوم ڈولور ایو فگیت نولا پیریٹور۔ ایکسپٹور سنت اوکیوکیٹ کیوپڈات نون پرویڈینٹ، سنٹ ان کُلپہ کیو آفیسیئل ڈیسرٹ مولا انیم آئیڈ ایست لیبوریوم۔
میٹا بار
ڈیزائن ٹوکنز کو سمجھنا
ڈیزائن ٹوکنز ایک پروڈکٹ میں بصری فیصلوں کے لیے سچائی کا واحد ذریعہ ہیں۔ وہ رنگ، فاصلے، نوع ٹائپ، اور حرکت کو نامزد متغیرات میں کوڈ کرتے ہیں جو اجزاء استعمال کرتے ہیں۔
