توکن‌های طراحی منبع حقیقی واحد برای تصمیمات بصری در سراسر یک محصول هستند. آن‌ها رنگ، فاصله، تایپوگرافی و حرکت را به متغیرهای نام‌گذاری شده‌ای که اجزا از آن‌ها استفاده می‌کنند، رمزگذاری می‌کنند.
چرا توکن‌ها اهمیت دارند
بدون توکن‌ها، تغییر رنگ اصلی برند نیاز به جستجو در صدها فایل دارد. با توکن‌ها، یک به‌روزرسانی متغیر در همه جا منتشر می‌شود — از دکمه‌ها تا هشدارها تا نوارهای ناوبری.
توکن‌ها همچنین شکاف بین ابزارهای طراحی و کد را پر می‌کنند. یک طراح رنگ surface-brand را در Figma نام‌گذاری می‌کند؛ یک توسعه‌دهنده از var(--surface-brand) در CSS استفاده می‌کند. آن‌ها به یک زبان صحبت می‌کنند.
مثال‌های عملی
به یک جزئیات فکر کنید که به یک پس‌زمینه، یک حاشیه و متن نیاز دارد. به جای کد زدن #1a56db، #e1effe و #1e429f، جزئیات به --color-primary، --surface-primary-subtle و --text-primary-strong اشاره می‌کند. وقتی برند تغییر می‌کند، پالت تغییر می‌کند — جزئیات تغییر نمی‌کند.
دسته‌بندی‌های توکن
رنگ — پالت‌های برند، معنایی و خنثی
فاصله — یک مقیاس منسجم از ۲px تا ۶۴px
تایپوگرافی — اندازه‌های فونت، وزن‌ها و ارتفاع خط
شعاع — از گوشه‌های تیز تا کاملاً گرد
سایه — سطوح ارتفاع برای عمق و سلسله مراتب
حرکت — منحنی‌های تسهیل و مراحل مدت
بیشتر نقل‌قول‌های موجود در اینترنت احتمالاً توسط یک هوش مصنوعی تولید شده‌اند.
دویس آوت ایریوره دولور در رپریهندیت در وولپتات ولت اسه سیلوم دولوره او یوت فاجیت نولا پاریاتور. اکسپتور سینت اوککات کوپیداتات نون پرویدنت، سانت در کلمبا کوی اوفیشا دسرنت موولیت انیم ایست لابوروم.
نوار متا
درک توکن‌های طراحی
توکن‌های طراحی منبع حقیقی واحد برای تصمیمات بصری در سراسر یک محصول هستند. آن‌ها رنگ، فاصله، تایپوگرافی و حرکت را به متغیرهای نام‌گذاری شده‌ای که اجزا از آن‌ها استفاده می‌کنند، رمزگذاری می‌کنند.
