دیزاین توکن چیست؛ زبان مشترک طراح و برنامه‌نویس

دیزاین توکن (Design Token) یک تصمیم بصری کوچک و نام‌گذاری‌شده است؛ مثلاً رنگ دکمه‌ی اصلی، فاصله‌ی استاندارد بین دو کارت یا شعاع گوشه‌ی فیلدها که به‌جای عدد خام با نامی مثل color-action-primary ذخیره می‌شود. طراح در فیگما و برنامه‌نویس در کد هر دو به همین نام اشاره می‌کنند، پس اگر مقدار عوض شود، همه‌جای محصول با هم عوض می‌شود.

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

دیزاین توکن دقیقاً چیست و چه مشکلی را حل می‌کند؟

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

توکن این زنجیره را می‌شکند. عدد فقط یک بار و در یک منبع تعریف می‌شود و بقیه‌ی جاها به نام آن ارجاع می‌دهند. به همین دلیل توکن را «منبع واحد حقیقت» برای تصمیم‌های بصری می‌دانند: فیگما، CSS، اندروید و iOS همه از یک فایل تغذیه می‌شوند.

تفاوت توکن با یک متغیر معمولی در «معنا» است. متغیر blue-500 فقط می‌گوید این رنگ چیست؛ توکن color-text-link می‌گوید این رنگ کجا و برای چه کاری استفاده می‌شود. همین معنا است که به تیم اجازه می‌دهد بدون ترس، مقدارها را عوض کند یا یک تم تیره بسازد.

چه چیزهایی را می‌شود توکن کرد؟

• رنگ: پس‌زمینه‌ها، متن، حاشیه‌ها، رنگ‌های وضعیت (موفقیت، خطا، هشدار).
• فاصله‌گذاری: پدینگ داخلی کامپوننت‌ها و فاصله‌ی بین بخش‌ها.
• تایپوگرافی: خانواده‌ی فونت، اندازه، وزن و ارتفاع خط.
• شعاع گوشه و ضخامت حاشیه.
• سایه و ارتفاع (Elevation).
• زمان و منحنی حرکت انیمیشن‌ها، مثل مدت باز شدن یک منو.

سه لایه‌ی دیزاین توکن؛ از عدد خام تا کامپوننت

بیشتر دیزاین سیستم‌های بالغ توکن‌ها را در دو یا سه لایه می‌چینند. هر لایه به لایه‌ی پایین‌تر ارجاع می‌دهد، نه به عدد خام. این ارجاع را «الیاس» (Alias) می‌گویند.

لایه‌ی اول: توکن‌های پایه (Primitive)

این لایه فهرست همه‌ی مقدارهای مجاز است: طیف رنگ‌ها، پله‌های فاصله و اندازه‌های فونت. نام‌ها توصیفی و بی‌طرف‌اند، مثل blue-600 یا space-16. توکن پایه نمی‌گوید کجا استفاده شود و معمولاً طراح مستقیم آن را روی لایه‌ها نمی‌گذارد.

لایه‌ی دوم: توکن‌های معنایی (Semantic)

اینجا تصمیم طراحی گرفته می‌شود. color-bg-surface به gray-50 اشاره می‌کند، color-text-primary به gray-900 و color-action-primary به blue-600. طراحان در کار روزانه تقریباً فقط با همین لایه کار می‌کنند. تم تیره هم در همین لایه ساخته می‌شود: نام ثابت می‌ماند و فقط مقصد الیاس در حالت تیره عوض می‌شود.

لایه‌ی سوم: توکن‌های کامپوننت (Component)

در سیستم‌های بزرگ، بعضی کامپوننت‌ها توکن اختصاصی دارند؛ مثلاً button-primary-bg که به color-action-primary اشاره می‌کند. مزیتش این است که اگر روزی فقط دکمه‌ها باید تغییر کنند، به بقیه‌ی محصول دست نمی‌زنید. اگر تیم کوچکی دارید، این لایه را فعلاً نسازید؛ دو لایه‌ی اول برای بیشتر محصولات کافی است و لایه‌ی سوم را وقتی اضافه کنید که نیاز واقعی پیش آمد.

نام‌گذاری توکن‌ها؛ الگویی که شش ماه بعد هم بفهمید

نام توکن مهم‌ترین بخش آن است، چون بعد از انتشار، عوض کردنش یعنی تغییر در فایل‌های طراحی و کد. یک الگوی رایج این است: دسته، سپس ویژگی، سپس نقش و در آخر حالت. مثلاً color-bg-danger-hover یعنی رنگ، برای پس‌زمینه، با نقش خطر، در حالت هاور.

• نام را بر اساس کاربرد بگذارید، نه ظاهر: color-text-error بهتر از color-red-text است، چون شاید روزی رنگ خطا نارنجی شود.
• برای محصولات فارسی و راست‌چین از start و end به‌جای left و right استفاده کنید؛ space-inline-start در هر دو جهت معنا دارد.
• پله‌های عددی را با فاصله بسازید (۱۰۰، ۲۰۰، ۳۰۰) تا بعداً بتوانید پله‌ی میانی اضافه کنید.
• یک زبان را انتخاب کنید و یکدست بمانید؛ نام توکن‌ها چون وارد کد می‌شوند، معمولاً انگلیسی و با حروف کوچک نوشته می‌شوند.
• قبل از نهایی کردن، نام‌ها را با برنامه‌نویس‌ها مرور کنید تا با قراردادهای کد آن‌ها هم‌خوان باشد.

اگر می‌خواهید درباره‌ی ساختار نام‌ها عمیق‌تر شوید، مقاله‌ی قراردادهای نام‌گذاری و سازمان‌دهی سیستم طراحی را هم بخوانید.

از فیگما تا کد؛ مسیر یک دیزاین توکن

در فیگما، توکن‌ها معمولاً با قابلیت متغیرها (Variables) ساخته می‌شوند. هر کالکشن متغیر می‌تواند یکی از لایه‌ها باشد و الیاس دقیقاً همان ارجاع یک متغیر به متغیر دیگر است. مودها (Modes) هم برای حالت روشن و تیره یا چند برند به کار می‌روند.

قدم بعدی رساندن این تصمیم‌ها به کد است. فیگما امکان خروجی گرفتن از مودهای متغیرها و وارد کردن آن‌ها را به‌صورت فایل JSON بر اساس قالب جامعه‌ی دیزاین توکن‌ها (DTCG) اضافه کرده است. این گروه در مهر ۱۴۰۴ (اکتبر ۲۰۲۵) اولین نسخه‌ی پایدار مشخصات خود را با شماره‌ی 2025.10 منتشر کرد که در سایت رسمی Design Tokens Community Group در دسترس است.

بعد از آن، ابزاری مثل Style Dictionary فایل JSON را به خروجی هر پلتفرم تبدیل می‌کند: متغیرهای CSS برای وب، فایل منابع برای اندروید و کد Swift برای iOS. پلاگین Tokens Studio هم برای تیم‌هایی که می‌خواهند توکن‌ها را مستقیم با مخزن گیت همگام کنند گزینه‌ی رایجی است.

• طراح مقدار یا الیاس را در فیگما تغییر می‌دهد.
• فایل JSON توکن‌ها خروجی گرفته و در مخزن کد ثبت می‌شود.
• برنامه‌نویس یا یک فرایند خودکار، Style Dictionary را اجرا می‌کند.
• خروجی هر پلتفرم ساخته و در نسخه‌ی بعدی محصول منتشر می‌شود.

لازم نیست از روز اول همه‌ی این زنجیره را خودکار کنید. حتی اگر فعلاً فایل توکن‌ها را دستی به برنامه‌نویس بدهید، همین که هر دو طرف یک نام مشترک دارند، نیمی از مشکل حل شده است.

یک مثال واقعی: تغییر رنگ برند در اپ فروشگاهی

یک اپ فروشگاهی فارسی را تصور کنید که دکمه‌ی «افزودن به سبد»، لینک‌ها، تب فعال و نشان تخفیف همه با یک قرمز برند رنگ شده‌اند. تیم تصمیم می‌گیرد قرمز را برای دکمه‌ها نگه دارد ولی نشان تخفیف را متمایز کند، چون کاربران تخفیف را با پیام خطا اشتباه می‌گرفتند.

بدون توکن، این یعنی گشتن تک‌تک صفحه‌ها. با توکن معنایی، نشان تخفیف از اول به color-bg-promo اشاره می‌کرد که فعلاً همان قرمز بود. تغییر فقط یک خط است: color-bg-promo حالا به پله‌ای از رنگ نارنجی اشاره می‌کند. دکمه‌ها، لینک‌ها و پیام‌های خطا دست‌نخورده می‌مانند.

همین الگو برای تم تیره هم کار می‌کند. در حالت تیره، color-bg-surface به‌جای خاکستری روشن به خاکستری تیره اشاره می‌کند و هیچ کامپوننتی نیاز به نسخه‌ی جداگانه ندارد. برای نکته‌های بصری حالت تیره، مقاله‌ی نکاتی برای طراحی دارک مود را ببینید.

اشتباه‌های رایج در ساخت توکن

• ساختن توکن برای هر مقداری که یک بار استفاده شده؛ نتیجه، فهرستی چندصدتایی است که هیچ‌کس از آن استفاده نمی‌کند.
• گذاشتن توکن پایه مستقیم روی لایه‌ها؛ در این صورت لایه‌ی معنایی بی‌اثر می‌شود و تم تیره دوباره دستی می‌شود.
• نام‌گذاری بر اساس ظاهر، مثل color-light-gray؛ وقتی در حالت تیره این توکن تیره می‌شود، نامش دروغ می‌گوید.
• تعریف توکن فقط در فیگما بدون هماهنگی با کد؛ توکنی که در کد وجود ندارد، فقط یک استایل فیگماست.
• تغییر نام توکن‌های منتشرشده بدون اعلام و دوره‌ی گذار؛ برای حذف یا تغییر نام، اول نام قدیمی را منسوخ اعلام کنید.

توکن خوب عدد را پنهان می‌کند و نیت را آشکار؛ وقتی کسی نام توکن را می‌خواند، باید بفهمد این مقدار برای چه کاری است، نه این‌که چه رنگی دارد.

از کجا شروع کنیم؟ یک برنامه‌ی کوتاه برای تیم‌های کوچک

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

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

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

سوالات متداول

فرق دیزاین توکن با استایل فیگما چیست؟

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

آیا برای یک پروژه‌ی کوچک هم توکن لازم است؟

اگر محصول قرار است رشد کند، تم تیره بگیرد یا روی بیش از یک پلتفرم منتشر شود، بله. برای یک لندینگ یک‌باره، چند متغیر رنگ و فاصله کافی است.

چند توکن برای شروع کافی است؟

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

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

معمولاً به شکل یک فایل JSON در مخزن کد که با ابزاری مثل Style Dictionary به متغیرهای CSS یا فایل‌های اندروید و iOS تبدیل می‌شود. مهم این است که یک منبع اصلی وجود داشته باشد و هر دو طرف از آن بخوانند.

جمع‌بندی: توکن یعنی یک تصمیم، یک نام، همه‌جا

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

اگر می‌خواهید ساخت توکن، کامپوننت و مستندات را روی یک پروژه‌ی واقعی و زیر نظر مدرس تمرین کنید، دوره‌ی دیزاین سیستم آکادمی طراحی دایره همین مسیر را پروژه‌محور جلو می‌برد.