توکن‌های طراحی چیستند؟ هم‌نام‌سازی Figma و کد

وقتی رنگ دکمه در Figma «آبی ۶۰۰» است و در CSS یک کد هگز بی‌نام، ناهماهنگی دیر یا زود پیش می‌آید. توکن طراحی راه‌حل است: تصمیم‌ها را یک‌بار و با نام ثبت می‌کند. این مقاله ساختار فرمت JSON گروه جامعهٔ Design Tokens را می‌خواند و گردش‌کار ساده‌ای پیشنهاد می‌دهد. هشدار: آن فرمت گزارش گروه جامعه است، نه استاندارد W3C.

توکن چیست؟

توکن طراحی یک تصمیم نام‌گذاری‌شده است؛ مثلاً رنگ اصلی، فاصلهٔ پایه یا اندازهٔ فونت عنوان. به‌جای کپی‌کردن مقدار در هر جا، همه به نام ارجاع می‌دهند و تغییر مقدار از یک نقطه انجام می‌شود.

ساختار JSON در فرمت گروه جامعه

فرمت Design Tokens فایل‌های JSON را برای تبادل توکن میان ابزارها تعریف می‌کند. نوع رسانهٔ پیشنهادی application/design-tokens+json است و application/json هم مجاز است. هر توکن مقدار ($value) و در صورت نیاز نوع ($type) دارد و توکن‌ها گروه‌بندی می‌شوند. نمونهٔ آموزشی و ساده (نه نقل از اسپک):

{ "color": { "brand": { "$type": "color", "$value": "#0f766e" } } }

نکته: اسپک نسخهٔ 2025.10 برای رنگ، ساختار شیء با colorSpace و components را نشان می‌دهد؛ رشتهٔ هگز بالا فقط برای خوانایی مثال است و در نسخهٔ فعلی ممکن است معتبر نباشد. قبل از پیاده‌سازی نسخهٔ منتشرشدهٔ جاری را بخوانید.

نام‌گذاری: ارجاع و سطح معنایی

توکن می‌تواند به جای مقدار صریح به توکن دیگری ارجاع (alias) بدهد. اسپک دلیل‌ها را بیان تصمیم طراحی، حذف تکرار، ایجاد رابطهٔ معنایی و حفظ سازگاری می‌داند. توصیهٔ نویسنده: دو لایه بسازید؛ مقدار خام (blue-600) و نام معنایی (color.action.primary) که به آن ارجاع می‌دهد. نام‌های معنایی کاربرد را می‌گویند و با تغییر برند فقط ارجاع عوض می‌شود.

گردش‌کار همگام‌سازی

این بخش توصیهٔ نویسنده است و ابزار خاصی را ادعا نمی‌کند:

1. یک منبع حقیقت انتخاب کنید (فایل JSON توکن‌ها در مخزن یا خروجی ابزار طراحی).
2. نام‌ها در طراحی و کد یکی باشد؛ تفاوت فقط در قالب خروجی (متغیر CSS، شیء JS، متغیر طراحی).
3. تغییر توکن مثل تغییر کد بازبینی شود: درخواست ادغام، توضیح و نسخه.
4. مبدل (translation tool) فایل را به قالب هر پلتفرم تبدیل کند.

محدودیت‌ها و وضعیت اسپک

صفحهٔ پیش‌نمایش اسپک می‌گوید این نسخه مرجع قطعی نیست و استاندارد W3C هم محسوب نمی‌شود؛ خود فرمت هنوز در حال تغییر است. ابزارها پشتیبانی متفاوتی دارند و ما قابلیت Figma یا مبدل‌ها را بررسی نکردیم، پس پیش از انتخاب مستندات رسمی هر ابزار را ببینید. برای زمینهٔ تجربهٔ کاربری، UX چیست؟ را ببینید.

منابع و مراجع

• Design Tokens Format Module 2025.10 (Community Group draft/report) — Design Tokens Community Group (W3C Community Group)، 2025.10.