توکن طراحی چیست؟ راهنمای عملی برای طراح‌ها و توسعه‌دهنده‌ها

طراح در فیگما رنگ «فیروزه‌ای اصلی» را انتخاب می‌کند. توسعه‌دهنده در کد #0fa89b می‌نویسد. شش ماه بعد برند کمی تغییر می‌کند و حالا باید در ۲۰۰ جای کد و ۵۰ فایل فیگما رنگ را پیدا و عوض کرد. نیمی از آن‌ها جا می‌مانند.

توکن طراحی این مشکل را حل می‌کند: هر تصمیم طراحی یک نام می‌گیرد، و همه‌جا از نام استفاده می‌شود، نه از مقدار.

#توکن چیست؟

یک جفت نام و مقدار:

--x-text-primary: #16151a;
--x-space-4: 1rem;
--x-radius-md: .5rem;

ولی ارزش واقعی توکن وقتی معلوم می‌شود که در لایه‌ها چیده شود.

#سه لایه

1. پایه: مقدارهای خام و کامل پالت. --x-firoozeh-500: #0fa89b
2. معنایی: نقش هر مقدار. --x-bg-brand: var(--x-firoozeh-500)
3. کامپوننت: تصمیم‌های یک کامپوننت. --x-button-radius: var(--x-radius-md)

قاعده‌ی طلایی: کامپوننت فقط از لایه‌ی معنایی و کامپوننت می‌خواند، هیچ‌وقت از لایه‌ی پایه. این‌طوری برای تغییر رنگ برند فقط یک خط در لایه‌ی معنایی عوض می‌شود.

#نام‌گذاری

• نقش، نه ظاهر: --x-bg-danger درست است؛ --x-red-light نه. اگر روزی رنگ خطا نارنجی شود، نام اول هنوز درست است.
• پیشوند: همه‌ی توکن‌ها یک پیشوند مشترک داشته باشند (--k- در کاشی) تا با متغیرهای پروژه‌ی میزبان تداخل نکنند.
• الگوی ثابت: {دسته}-{نقش}-{حالت}، مثل --x-border-brand-hover.
• نام‌های فارسی برای پالت: در یک دیزاین‌سیستم ایرانی، نام‌هایی مثل فیروزه، لاجورد، انار و پسته هم به‌یادماندنی‌اند و هم هویت دارند. کاشی همین کار را کرده است.

#یک منبع، چند خروجی

توکن‌ها را در یک فایل منبع (مثلاً JSON یا JS) تعریف کنید و از آن بسازید:

• متغیرهای CSS برای وب،
• خروجی تایپ‌شده برای جاوااسکریپت،
• پیش‌تنظیم Tailwind،
• متغیرهای فیگما.

این‌طوری فیگما و کد هیچ‌وقت از هم جدا نمی‌شوند.

#تم تیره و برندسازی

با توکن‌های معنایی، تم تیره فقط یک نقشه‌ی دیگر از همان نام‌هاست:

:root, [data-theme="dark"] { --x-bg-primary: #0b0b10; --x-text-primary: #ececf2; }
[data-theme="light"]       { --x-bg-primary: #ffffff; --x-text-primary: #16151a; }

کامپوننت‌ها هیچ تغییری نمی‌کنند. برای برند مشتری هم کافی است توکن‌های برند را عوض کنید. جزئیات طراحی تم تیره را در راهنمای تم تیره آورده‌ام.

#کنتراست خودکار

یک مزیت کمتر شناخته‌شده: چون همه‌ی رنگ‌ها در یک منبع‌اند، می‌شود کنتراست هر جفت متن و پس‌زمینه را موقع ساخت حساب کرد و اگر به حداقل ۴٫۵ به ۱ نرسید، ساخت را متوقف کرد. رنگی که استاندارد نیست، اصلاً وارد سیستم نمی‌شود.

برای تصمیم‌های پایه‌ی دیگر، هفت تصمیم دیزاین‌سیستم فارسی را ببینید.