‏هایپرتوکن‌ها: لایه‌ی گمشده بین توکن و کامپوننت

تو این مقاله کریستین والار سراغ مفهومی می‌ره که جیک آلبا از فیگما اسمشو گذاشته «هایپرتوکن». نویسنده تأکید می‌کنه که این هنوز یه قابلیت آماده یا اعلام رسمی فیگما نیست، بلکه ایده‌ایه که تیم آلبا داره باز و رو به جلو روش کار می‌کنه و تو کانفیگ ۲۰۲۶ ازش رونمایی شده. ماجرا از یه شکاف قدیمی شروع می‌شه: یه توکن فقط یه تصمیمه، ولی یه کامپوننت یه مجموعه‌ی کامله و کار جالب تو فاصله‌ی بین این دوتاست.

توکن دیزاین یعنی یه تصمیم که اسم داره؛ مثلاً color.text.primary به‌جای کد رنگ #1A1A1A. ارزشش هم به همین اسمه، چون اسم بعد از یه ری‌برند سالم می‌مونه ولی مقدار خام نه. مشکل اینجاست که خیلی وقتا تصمیم‌ها تکی نمی‌مونن و گروهی سفر می‌کنن.

یه تیتر هیچ‌وقت یه تصمیم نیست؛ هر بار فونت و سایز و وزن و ارتفاع خط و فاصله‌ی حروف با همن:

font-family: Inter;
font-size: 32px;
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.01em;

نویسنده می‌گه بسته‌بندی این خصوصیت‌ها چیز تازه‌ای نیست — کلاس CSS، میکسین SCSS، @apply تِیلویند و استایل متن فیگما همه همینن. مشکل اصلی وقتیه که همین بسته تو چند ابزار مختلف دستی تکرار می‌شه و کپی‌ها به‌مرور از هم دور می‌شن.

هایپرتوکن یعنی همون بسته‌ی نام‌دار، ولی یه لایه بالاتر از ابزارها و به شکل داده‌ی ساخت‌یافته با فیلدهای برچسب‌دار. وعده‌ش اینه که یه مرحله‌ی build از روی همین یه منبع، کلاس CSS و استایل متن فیگما و استراکت Swift رو تولید کنه؛ یعنی export به‌جای کپی‌پیست. منبع رو عوض کنی، همه‌ی پلتفرم‌ها آپدیت می‌شن و چون داده‌ی برچسب‌داره، ایجنت به‌جای مهندسی‌معکوسِ استایل‌شیت، اجزاش رو مستقیم می‌خونه.

نویسنده می‌گه چرا این تازه مهم شده؟ چون چیزی که فایلتو می‌خونه دیگه یه ماشینه. اگه هوش مصنوعی یه تیتر رو به‌صورت پنج ارجاع جدا ببینه، باید حدس بزنه این پنج‌تا با هم چی می‌سازن. آلبا اینو به یه جمله‌ی خوب خلاصه می‌کنه: یه ساندویچ پنیر خواستی و یه دانشنامه دستت دادن. هایپرتوکن نسخه‌ی کوتاهشه؛ به‌جای پونزده خط مقدار خام، ماشین دو کلمه‌ی Surface.brand رو می‌گیره و کمتر حدس می‌زنه.

نویسنده صادقانه می‌پرسه این همون composite token نیست؟ و جوابش تا حد زیادی «چرا، هست» ـه؛ استاندارد W3C/DTCG از قبل توکن‌های ترکیبی داره. فرقش تو دامنه و کامپایله: توکن‌های ترکیبی یه منوی ثابت و کوتاهن که یکی دیگه برات چیده، ولی هایپرتوکن هر تکه‌ی تکرارشونده‌ی سیستم خودتو پوشش می‌ده و از روی یه منبعِ سخت‌گیرانه به شکل قطعی به همه‌ی فرمت‌ها کامپایل می‌شه.

فعلاً هیچ دکمه‌ی «هایپرتوکن» تو فیگما نیست و همین نبودن، خودِ همون کاوشه. نویسنده می‌گه این یه مفهومه که باید به سمتش طراحی کنی، نه قابلیتی که همین حالا برداری. یه سقف هم هست که بهتره قبلش ببینیش: هایپرتوکن فقط استایل ثابته و حالت‌هایی مثل hover و focus و رفتار و دسترسی‌پذیری تو کامپوننت زندگی می‌کنن، نه تو توکن.

نکات کلیدی:

• هایپرتوکن یعنی یه بسته‌ی نام‌دار از خصوصیت‌های استایل که یه لایه بالای ابزارها و به شکل داده‌ی ساخت‌یافته تعریف می‌شه
• یه مرحله‌ی build از روی یه منبع، نسخه‌ی CSS و فیگما و iOS رو می‌سازه تا کپی‌های دستی از هم دور نشن
• انگیزه‌ی اصلی اینه که ایجنت‌های هوش مصنوعی فایل رو با اسم‌گذاری دقیق کمتر حدس بزنن
• ته‌ماجرا یه composite token با منوی ثابتِ برداشته‌ست، ولی نکته‌ش منبع واحدیه که به همه‌چی کامپایل می‌شه
• این هنوز قابلیت رسمی فیگما نیست و هایپرتوکن فقط استایل ثابته، نه رفتار و دسترسی‌پذیری