طراحی سیستم UI و Design Tokens: از Figma تا کد پایدار
سیستم طراحی بدون token فقط مجموعه کامپوننت است؛ با token تبدیل به زبان مشترک طراحی و توسعه میشود که مقیاس میگیرد.
علی مرتضوی
بنیانگذار پارادایس کد
سیستم طراحی چیست و چه زمانی لازم میشود
سیستم طراحی مجموعهای از اصول، tokenها، کامپوننتها و الگوهای تعامل است که تجربه یکپارچه میسازد. وقتی بیش از چند صفحه، بیش از یک طراح و بیش از یک توسعهدهنده دارید، بدون سیستم طراحی هر صفحه dialect خودش را دارد.
اشتباه رایج این است که سیستم طراحی را فقط کتابخانه دکمه و input بدانیم. کامپوننت مهم است، اما بدون token رنگ، فاصله، تایپوگرافی و radius، هر کامپوننت variantهای ناسازگار میسازد.
برای برندهای ایرانی که RTL و فونت فارسی دارند، سیستم طراحی باید از ابتدا دوزبانه فکر شود: نه فقط آینه کردن LTR.
Design Token به زبان ساده
token یعنی نام معنادار برای مقدار طراحی: color.primary.500 به جای #2563eb پراکنده در صد فایل. وقتی برند عوض میشود، یک منبع حقیقت را بهروز میکنید.
tokenها را لایهبندی کنید: primitive (مثلاً blue-500)، semantic (text.primary، surface.elevated)، component (button.primary.bg). لایه semantic جلوی وابستگی مستقیم UI به پالت خام را میگیرد.
در Tailwind v4 و CSS variables مدرن، tokenها را به صورت custom property در :root تعریف کنید. dark mode با override همان tokenها ساده میشود.
از Figma به کد بدون شکاف
اگر طراح در Figma variable تعریف میکند و توسعهدهنده در کد hex جدا میزند، سیستم میمیرد. نامگذاری token در Figma و repo باید همراستا باشد. export دستی هر sprint غیرقابل دوام است.
کامپوننتهای پایه — Button، Input، Card، Modal — باید variant و size محدود داشته باشند. هر درخواست «فقط این صفحه استثنا» سوراخ سیستم میکند. استثناها را جمع کنید و بعداً به variant رسمی تبدیل کنید.
مستندسازی کوتاه برای هر کامپوننت: چه زمانی استفاده شود، چه زمانی نه. Storybook یا catalog داخلی برای تیم ارزش زیادی دارد.
دسترسیپذیری و حالتهای تعامل
token کنتراست را جدی بگیرید. متن روی surface باید WCAG AA را بگذراند. focus ring استاندارد در سیستم طراحی تعریف شود، نه حذف outline برای زیبایی.
stateهای hover، active، disabled و loading برای هر کنترل تعاملی مشخص باشند. در RTL، آیکون جهتدار (مثل chevron) باید mirror شود؛ آیکونهای بیجهت نه.
اندازه touch target در موبایل حداقل ۴۴px در نظر گرفته شود. فرمهای فارسی با label واضح و پیام خطای نزدیک فیلد تجربه بهتری میدهند.
همزیستی با فریمورک UI
چه HeroUI، چه shadcn، چه کامپوننت اختصاصی — سیستم طراحی لایه بالاتر است. wrapperهای پروژهای روی primitiveهای کتابخانه بسازید تا وابستگی مستقیم صفحات به vendor کم شود.
spacing scale یکنواخت (مثلاً مضرب ۴) از تصمیمهای جزئی جلوگیری میکند. grid و breakpointها را در سند کوتاه ثبت کنید.
انیمیشن را tokenize کنید: duration.fast، easing.standard. حرکت بیهدف حواسپرتی است؛ حرکت هدفمند جهت را میدهد.
نگهداری و تکامل سیستم
سیستم طراحی موجودیت زنده است. نسخهگذاری breaking change در token و کامپوننت را اعلام کنید. تیم محصول باید بداند چه چیزی deprecated است.
audit دورهای UI: آیا صفحات جدید از token استفاده میکنند؟ آیا رنگ hardcode برگشته؟ regression بصری با اسکرینشات خودکار کمک میکند.
در پارادایس کد، سیستم طراحی را همزمان با اولین صفحات محصول میسازیم تا بعداً بازنویسی visual انجام نشود. token خوب سرمایهگذاری است که هر feature جدید ارزانتر میشود.
دانش و مقالات
نیاز به اجرای همین مفاهیم در محصولتان دارید؟
پارادایس کد از مشاوره تا پیادهسازی کامل کنار شماست.