دیزاین توکن (Design tokens) چیست؟ و چرا؟

تو دنیای پیچیده دیزاین سیستم ها، یکپارچگی و قابلیت ارتقا جزو اصلی ترین و حیاتی ترین مسئله هاست. تو همین زمینه، یعنی یکپارچگی، قابلیت رشد و ارتقا، اصطلاحی که ممکنه از زبون دیزاینرهای مختلف و یا حتی توی مقاله های متفاوت خونده و شنیده باشید "Design Tokens"، تو این پست قصد داریم تا حد ممکن به صورت ساده در مورد اینکه دیزاین توکن‌ها چی هستن و به چه درد میخورن صبحت کنیم.

قبل از هر چیز بیاییم مثل اکثر مقاله های دیگه ای که باهم جلو رفتیم، تکلیف یه سری واژه ها رو روشن کنیم، تا تو متن مقاله راحت تر بتونیم صحبت کنیم. خیلی از واژه های تخصصی که ما تو رومزه باهاشون سر و کار داریم، یا کلا ترجمه ای ازشون وجود نداره یا حتی در صورت وجود، ترجمشون اونجور که باید مفهوم رو نمیرسونه و بدتر پیچیده اش میکنه. در نتیجه من تو اکثر مقاله ها اول تکلیف یه سری واژه ها رو روشن میکنم و بعد شیرجه میزنیم تو اصل مطلب.
دیزاین توکن، Design tokens، نماد‌های طراحی
حتی اگه از این بگذریم که من کلا با ترجمه واژه طراحی مشکل دارم، واژه نماد‌های طراحی (Design Tokens) اصلا و به هیچ‌وجه اونطور که باید و شاید مفهوم و منظور واژه Design tokens رو نمیرسونه، خود واژه انگلیسی Design tokens هم با توجه به اینکه متن اصلی این مقاله فارسیه، تو برخی موارد مشکل چپ‌چین و راست‌چین بودن ایجاد میکنه، در نتیجه در طول این مقاله من تنها از واژه‌های دیزاین توکن یا توکن‌های دیزاین که به فارسی نوشته شدن استفاده میکنم و با این واژه ها پیش میریم.

اگه با مفهوم دیزاین توکن ها آشنا نیستید و یا حتی اصلا همچین اسمی رو تا حالا نشینید، نترسید، اینجا دقیقا همونجاست که میخواییم راجبش حرف بزنیم! تو این مقاله، سعی میکنیم از چرایی دیزاین توکن ها، دلیل وجودشون و اینکه چرا اصلا مهم هستن صحبت کنیم. در نهایت هم به این میپردازیم چطور ازشون به عنوان یه قدرت برتر تو دیزاین سیستم استفاده کنیم. خب دیگه مقدمه بسه و بریم سراغ اصل مطلب.

معرفی دیزاین توکن

اگه بخواییم خیلی خلاصه در موردش صحبت کنیم، دیزاین توکن‌ها عنصر یا بخش‌های اتمیک (Atomic) یه دیزاین سیستم هستن. اما این یعنی چی؟ توکن ها رو به عنوان سازه‌هایی تصور کنید که تصمیم های دیزاین رو مثل رنگ‌ها، تایپوگرافی‌ها، فاصله‌ها و موارد دیگه ای از این همین دست رو تو خودشون جا دادن و عملا مسیر دیزاین رو مشخص میکنن. دیزاین توکن‌ها متغیرهایی هستن که مسئول ذخیره‌سازی مقدار های اساسی و پایه ای دیزاین مثل: رنگ ها، تایپوگرافی ها، فاصله ها، سایه‌ها، حتی انیمیشن‌ها و ... هستن. این توکن ها معمولا در دیزاین‌ها و یا کتابخانه‌ها (Library) به‌جای مقدار های بی معنی مثل کد هگز (Hex) استفاده میشن تا از انعطاف‌پذیری و یکپارچگی تو تمام محصول بیشتر از قبل مطمعن بشیم.

دیزاین توکن ها تو دنیای واقعی

برای اینکه مفهوم رو بهتر متوجه بشیم مثال توکن‌هارو توی دنیای واقعی باهم دیگه جلو میبریم. بیاید فرض کنیم که دوست ما یه اسم بلند داره، البته که احتمالا همه ما با همچین افرادی در ارتباط هستیم و حتی ممکن خود ما اون فرد باشیم. تو بیشتر وقت ها به خاطر سپردن این اسم های طولانی کار سختیه و احتمالا اکثر ما فراموش میکنیم، در نتیجه چه به صورت خودآگاه چه حتی ناخودآگاه سعی میکنیم که اسم این دوست رو یا به صورت مستعار یا اینکه اسم کوچک یا مخفف شده ای از اون رو تو ذهمون ذخیره کنیم. یکی از ساده ترین حالت های مخفف سازی که ما تو روزمره انجام میدیم، کوتاه کردن اسم های دو بخشیه، برای مثال خیلی از ما اسم محمد‌علی رو تنها محمد یا حتی علی صدا میکنیم.

خب تا اینجا ما اسم هارو فقط مخفف میکردیم اما ممکنه با توجه به موقعیت افراد برای این اسم ها چندین حالت مستعار هم در نظر بگیریم، این میتونه از صدا کردن نام خانوادگی شخص در موقعیتی خاص باشه یا صدا کردن شخص به واسطه عنوان شغلی و یا چیز های دیگه‌ی شبیه به این. به مثال زیر توجه کنید:

تمام این اسم ها دارن به یک نفر اشاره میکنن و تفاوتی نمیکنه ما کدوم رو صدا کنیم، در تمامی حالت ها به یک نفر میرسیم، صرفا داریم در موقعیت های مختلف از یکی از اونها استفاده میکنیم. بنابراین هر وقت گفتیم محمد، خسروی، مسئول بایگانی و... میدونیم به کی داریم اشاره میکنیم.

حالا بیایید اون اسم طولانی که مثال زدیم رو به عنوان یک مقدار رنگ در نظر بگیریم (مثال: #f5f5f5) و اسم های مستعار رو به عنوان اسم مستعار اون رنگ بدونیم.

بایید این مثال رو یکم شفاف تر کنیم و مستقیم ببریمش تو دیزاین:
فرض کنیم رنگی وجود داره با کد: #f5f5f5 ، مسلما به خاطر سپردن کد این رنگ سخته، درسته؟ پس بیایید به این رنگ یه نام مستعار بدیم، به عنوان مثال اسمش رو میذاریم: Neutral 150. بعد از اون حالا باید ببینیم این رنگ کجا ها در حال استفاده هستش یا قراره کجا ها استفاده بشه؟ تو فرض دوم بیایید فرض کنیم که قراره این رنگ به عنوان رنگ پس زمینه اصلی و همینطور روی دکمه ثانویه استفاده بشه. در نتیجه حالا میتونیم دوتا اسم دیگه هم بهش بدیم، تو لیست زیر همه ی اسم ها به یک رنگ اشاره میکنن و اون هم همون رنگ #f5f5f5 هستش.

• Neutral150
• main-background
• secondary-button

خب حالا که ما فهمیدیم این رنگ اسم های متفاوتی داره، میتونیم زمانی که میخواییم برای پس زمینه اصلی تو هر بخش از دیزاین، رنگ استفاده کنیم، به جای اینکه داکیومنت رو بخونیم تا متوجه بشیم رنگ پس زمینه #f5f5f5 هستش یا حتی این رنگ رو حفظ کنیم، خیلی راحت به جای اسم اصلی رنگ از اسم مستعار اون یعنی main-background استفاده کنیم.

تا اینجای کار درک خوبی از نحوه مفید بودن توکن ها و یا همون اسم گذاری ها پیدا کردیم. حالا بیایید بریم تا توکن های مختلف رو باهم بررسی کنیم.

یکی از رفرنس های اصلی این مقاله، متریال ۳ (Material 3) هستش، گوگل تو متریال ۳ توکن هارو به سه دسته کلی تقسیم میکنه که البته من به شخصه حالتی که توکن ها تو دو دسته قرار میگیرن رو ترجیح میدم (حالتی که مایکروسافت با اون ها برخورد میکنه) اما تو این پست سعی میکنیم همچنان با حالت گوگل پیش بریم که توکن ها تو سه بخش تقسیم شدن. تو پست های بعدی که میخواییم کامل راجب چرایی و چگونگی تقسیم بندی ها صحبت کنیم، مفصل در مورد حالت های مختلف توضیح میدم.

• رفرنس توکن‌ (Reference tokens): اساسی و پایه ای ترین توکن‌ها.
• سیستم توکن‌ (System tokens): توکن‌هایی که شخصیت و مسیر دیزاین سیستم رو مشخص میکنن، از رنگ و تایپوگرافی گرفته تا ارتفاع و شکل‌ها.
• کامپوننت توکن‌ (Component tokens): توکن‌هایی مربوط به عنصر‌ها و کامپوننت‌های جزئی تر مثل یه دکمه (button) یا ورودی متنی (text-input).

رفرنس توکن‌ (Reference tokens)

رفرنس توکن‌ها معمولا به مقدار ثابت و استاتیک هر تصمیم دیزاینی اشاره میکنن. برای مثال به کد هگز (HEX) برای رنگ یا فونت و وزن برای تایپوگرافی. رفرنس توکن‌ها همچنین می تونن به رفرنس توکن‌های دیگه هم اشاره کنن و محدودیتی از این لحاظ ندارن. همونطور که از اسمشون مشخصه اون‌ها رفرنس توکن‌ هستن و بر اساس زمینه کاربر یا دستگاه تغییر نمی‌کنن. مواردی مثل کد هگز(Hex)، تایپ‌فیس‌ها، وزن فونت از جمله توکن‌های رفرنس هستن.

سیستم توکن‌ (System tokens)

سیستم توکن‌ها تصمیماتی هستن که زبان دیزاین رو برای یک موضوع یا زمینه خاص در دیزاین سیستم تعیین و هدفی رو که یک رفرنس توکن‌ در UI انجام میده رو مشخص می‌کنن. بیایید یکم برگردیم بالا و بریم سراغ مثالی که بالا تر زدیم تا موضوع برامون شفاف تر بشه. رفرنس توکن‌‌ neutral-150 و سیستم توکن هم همون main-background ماست.

تفاوتی که بین رفرنس توکن‌ها و سیستم توکن‌ها وجود داره اینکه که با رفرنس توکن‌ها، ما صرفا به مقدار های دیزاین (رنگ #f5f5f5f به neutral-150) اسم دادیم اما هنوز نوع و جهت استفاده اون ها مشخص نیست. با استفاده از سیستم توکن‌ها ما این مقدار ها رو معنی دار و نوع استفاده اون ها تو لول بالا رو مشخص میکنیم. از طرفی رفرنس توکن ها همیشه یک مقدار ثابت دارن اما این در حالیه که سیستم توکن ها بسته به نوع استفاده میتونه مقدارشون تغییر کنه برای مثال توی موبایل و دسکتاپ دو مقدار متفاوت یا حتی توی تم روشن و تیره دو رنگ متفاوت داشته باشن. سیستم توکن‌ها باید تا حد امکان به رفرنس توکن‌ها اشاره کنن و به مقادیر استاتیک یا ثابت اشاره ای نکنن.

کامپوننت توکن‌ (Component tokens)

تو مرحله سوم کامپوننت توکن‌ها قرار دارن، شخصا ترجیح میدم این مرحله رو به شکل دیگه مدیریت کنم و جزو مستقیمی از توکن‌ها قرار ندم اما همونطور که بالا تر در موردش صحبت کردیم، فعلا با حالت سه مرحله ای که حالت گسترده‌تری داره پیش میریم تا بعد مفصل در مورد حالت‌های دیگه صحبت کنیم. کامپوننت توکن‌ها عناصر و مقادیری رو نشون میدن که یک بخش جزئی رو میسازن، مثل متن برچسب، دکمه‌ها و... . درست مثل سیستم توکن‌ها، کامپوننت توکن‌ها هم تا حد ممکن، نباید به مقادیر مستقیم مثل کدهای هگز (HEX) یا ریشه ها اشاره کنن و باید به یک سیستم توکن یا رفرنس توکن اشاره کنن.

با همه ی این تفاسیر چرا ما فقط یه رفرنس توکن برای هر عنصر (یا حتی کامپوننت) نمی سازیم؟ قطعا زحمت کمتری داره و کمتر هم پیچیده میشه. چرا باید سیستم توکن‌ها و کامپوننت توکن‌ها رو بسازیم؟ خب اینجا دوباره میریم سراغ مثال:

بیایید در نظر بگیریم که شما فقط رفرنس توکن‌ها رو برای استفاده ساختید و برای مثال روی یه دکمه (‌Button) اعمال کردید و الان هم تصمیم دارید برای همین یک جز یعنی دکمه (Button) تغییرات ایجاد کنید. شما نمیتونید اون رو از طریق رفرنس توکن تغییر بدید، به این شکل که برید و مقدار رفرنس توکن رو عوض کنید، چون این شکلی هر چیزی که به اون رفرنس توکن وصل باشه تغییر میکنه. شما باید اون دکمه رو به صورت دستی و هر جایی که ازش استفاده کردید، تغییر بدید. در نهایت هم با این حجم از تغییرات اصلا دیگه نیازی به ساخت توکن نیست.

حالا بیایید تصور کنیم رفرنس توکن‌ها، سیستم توکن‌ها و کامپوننت توکن‌ها رو ایجاد کردیم و اون هارو مثل تصویر زیر بهم دیگه پیوند دادیم.

حالا اگه بخواییم برای مثال رنگ هر کامپوننت رو تغییر بدیم، فقط باید توکن کامپوننت مرتبط با اون رو تغییر بدیم و نهایت تو در هر جایی که این کامپوننت استفاده شده، تغییر انجام میشه. یا حتی اگه نیاز داریم تمام بخش ها تغییر کنن میتونیم رفرنس توکن یا سیستم توکن رو بسته به نیاز تغییر بدیم. این حالت از توکنایز کردن به ما این امکان رو میده تا بسته به نیاز، تغییرات و نگهداری از دیزاین سیستم رو تو هر لولی که میخواییم مدیریت کنیم.

حالا دوباره، دیزاین توکن چیه؟

بعد از این همه صحبت اگه بخواییم یه توضیح خلاصه از دیزاین توکن هارو داشته باشیم، باید بگیم که دیزاین توکن ها مقدار های دیزاینی مثل کد رنگ، وزن فونت، فاصله ها (Gap) و ... رو برای دیزاینر و تمام افراد ذینفع روی پروژه قابل درک میکنن. جدای این قابل درک سازی، مدیریت و نگهداری از دیزاین سیستم رو بسیار بسیار ساده تر میکنن و برای تغییرات ساده و یا حتی تغییرات بزرگ زمان و هزینه ی کمتری رو صرف میکنن.

تو این پست که اولین پست از مجموعه پست های دیزاین توکن بود سعی کردم تا خیلی خلاصه، مفهوم و چرایی دیزاین توکن هارو توضیح بدم، تو پست های بعدی که لیستشون رو به مرور این زیر هم میذارم در مورد بخش های دیگه دیزاین توکن‌ها مثل نامگذاری‌ها، تقسیم‌بندی‌ها، انواع توکن و ... صحبت میکنیم. اگه همچنان بخش خاصی از دیزاین توکن‌ها براتون مفهوم نیست یا همچنان گنگه، میتونیم تو کامنت ها در موردش صحبت کنیم. خوشحال میشم در این مورد باهم گپ بزنیم.

منابع:

Design tokens - Fluent 2 Design System (microsoft.design)

Fluent UI Web Components design tokens | Microsoft Learn

Design tokens – Material Design 3

Design tokens - Tokens - Atlassian Design System

Design Tokens- Future of Design Systems | by Rahul Bhojwani | Bootcamp (uxdesign.cc)