‏۶ اشتباه رایج تو نام‌گذاری Design Token

نویسندهٔ خبرنامهٔ Design Tokens می‌گه یه اسم ضعیف فقط پیدا کردن توکن رو کند نمی‌کنه: ریفکتور رو گرون می‌کنه و آدم رو به ساختن توکن تکراری وامی‌داره. اولین خطا اسم گذاشتن زودهنگام روی کامپوننته. button.primary.background می‌گه این رنگ مال دکمه‌ست، ولی شش ماه بعد همون رنگ تو segmented control و کارت تبلیغاتی هم لازم می‌شه. بهتره اول تصمیم مشترک رو اسم بذاری، مثل color.background.accent.

خطای دوم تا چهارم همه دربارهٔ پیش‌بینی‌پذیری‌ان. اسمی مثل sizing.border.2 مقدار امروز رو تو خودش قفل می‌کنه و با یه تغییر ۱ پیکسلی دروغ می‌شه، پس بهتره نقش رو توصیف کنی مثل color.text.muted. ترتیب بخش‌های اسم هم باید ثابت بمونه، مثلاً همیشه category، بعد property، بعد modifier.

قاطی کردن casing و جداکننده هم ظاهری به نظر می‌رسه ولی اتوماسیون رو خراب می‌کنه. نویسنده می‌گه یه فرمت کانونی مثل color.text.default تو منبع نگه دار و موقع تحویل به هر پلتفرم transform کن (یعنی همون اسم رو به شکل دلخواه اون پلتفرم تبدیل کن)، نه اینکه نویسندهٔ توکن سینتکس همهٔ پلتفرم‌ها رو حفظ باشه.

خطای پنجم صفت‌های مبهمه. primary و subtle آشنا به نظر می‌رسن، ولی کسی تعریفشون نکرده؛ primary یعنی رنگ برند، اکشن، پس‌زمینه یا پررنگ‌ترین متن؟ نویسنده می‌گه نقش رو هم تو اسم بیار، مثل color.action.primary که می‌شه تعریفش کرد رنگ مهم‌ترین اکشن یه صفحه، و یه واژگان کنترل‌شده بساز تا muted و subtle و soft سه اسم برای یه نقش نباشن.

ششمی تغییر نام بدون برنامه‌ست. عوض کردن اسم یه توکن یه breaking change ه، یعنی هرچی به اسم قدیمی وصل بوده می‌شکنه، حتی وقتی اسم جدید بهتره. راه پیشنهادی شش قدمه: توکن جدید رو اضافه کن، اسم قدیمی رو به‌عنوان alias به جدید وصل کن، تو مستندات deprecated علامتش بزن، مصرف باقی‌مونده رو تو ریپوها و فایل‌های طراحی اندازه بگیر، ددلاین حذف اعلام کن و فقط بعد از مهاجرت همه alias رو بردار.

نکات کلیدی:

• توکن کامپوننتی زودهنگام نساز؛ اول color.background.accent رو تعریف کن و بعد در صورت نیاز button.background.primary
• اسمی مثل sizing.border.2 مقدار رو تو اسم قفل می‌کنه و با یه تغییر ۱ پیکسلی باید همه‌جا rename بشه
• یه ترتیب ثابت برای بخش‌های اسم انتخاب کن و بدون استثنا همه‌جا به کارش ببر
• primary بدون نقش بی‌معنیه؛ color.action.primary یعنی رنگ مهم‌ترین اکشن صفحه
• تغییر نام یعنی شش قدم: توکن جدید، alias، deprecation، اندازه‌گیری مصرف، ددلاین، بعد حذف