از Figma تا پروداکشن بدون بدهی طراحی
بیشتر بدهی UI از فایل زیبای Figma نیست؛ از نبود توکن، حالتهای فراموششده و تصمیمهای یکبارمصرف در کد است. مسیر تحویل که فاصله دیزاین و فرانت را کم میکند.
علی مرتضوی
بنیانگذار پارادایس کد
بدهی طراحی از کجا متولد میشود؟
وقتی هر صفحه رنگ و فاصله مخصوص خود را دارد، وقتی دکمه در سه جا سه ارتفاع دارد، و وقتی حالت خطا فقط در یک فریم دیده شده، بدهی طراحی وارد کد میشود. هزینه بعداً به صورت ناسازگاری برند و کندی فیچر ظاهر میشود.
Figma تمیز لزوماً محصول تمیز نیست. اگر فایل برای ارائه باشد نه برای ساخت، توسعهدهنده مجبور به حدس میشود—و حدس یعنی بدهی.
توکنها قبل از صفحات قهرمان
رنگ، تایپ، فاصله، شعاع و سایه را به توکن نامدار تبدیل کنید و همان نامها را در Tailwind/CSS variables تکرار کنید. اختلاف `blue-600` دیزاین با `#2F6FED` کد، منبع ناسازگاری مزمن است.
قبل از پولیش هیرو، دکمه، اینپوت، جدول و مودال را در هر دو دنیا همنام کنید. صفحه قهرمان بدون primitives پایدار، ویترین براق با اسکلت شکننده است.
حالتهایی که در دمو فراموش میشوند
برای هر جریان کلیدی، فریمهای empty، loading، error، success، permission denied و داده بلند (متن ۳۰ کلمهای، جدول ۱۰۰ ردیفی) را بخواهید. نبود اینها یعنی فرانت در پروداکشن ارتحال میکند.
RTL را یک پوستهگذاری بعد از اتمام ندانید؛ از اول در کامپوننتها باشد. آیکونهای جهتی، فرمها و جدولهای قیمت رایجترین نقاط شکستاند.
Handoff که واقعاً handoff باشد
لینک Figma + export تصویر کافی نیست. مشخص کنید: رفتار ریسپانسیو، تعامل، دسترسی کیبورد، و اینکه کدام بخش illustration ثابت است و کدام داده API.
برای کامپوننتهای تکراری، یک جدول props ساده بین دیزاین و کد نگه دارید. وقتی دیزاینر variant جدید میسازد، باید بداند کدام prop اضافه میشود—نه اینکه فرانت یک بار دیگر فورک بصری بسازد.
جلوگیری از «نزدیک است» در QA
بازبینی بصری را با معیار انجام دهید: فاصله روی شبکه توکن، کنتراست، حالات فوکوس. بحث سلیقهای «یککم بزرگتر» را به تصمیم توکن برگردانید تا سیستم رشد کند نه استثنا.
اسکرینشات diff در PR برای صفحات پولساز ارزش دارد. اگر هر PR بدون معیار بصری مرجه شود، بدهی بهصورت نامرئی انباشته میشود.
ابزار و سرعت؛ بدون قفل شدن
Design tokens، Storybook یا معادل، و UI kit (مثل HeroUI) میتوانند فاصله را کم کنند—به شرطی که سفارشیسازی برند را روی توکن سوار کنید نه fork بیپایان کامپوننت.
از بازسازی کامل دیزاین سیستم وسط پروژه مشتری بپرهیزید مگر اینکه بدهی جلوی تحویل را گرفته باشد. اول مسیر بحرانی محصول را پایدار کنید.
قرارداد تیمی پیشنهادی
دیزاین: توکن + حالتها + responsive. فرانت: پیادهسازی با همان نامها + تست حالتها. محصول: اولویت بدهی UI در بکلاگ مثل باگ، نه «زیباسازی بعداً».
پارادایس کد handoff را بخشی از تعریف Done میداند: اگر حالت خطا و توکنها نیستند، طراحی آماده توسعه نیست—حتى اگر هیرو در ارائه درخشان باشد.
سؤالات متداول
آیا همه چیز باید Design System کامل باشد؟
نه. با primitives و ۲–۳ الگو شروع کنید. سیستم کامل را وقتی تکرار صفحه بالا رفت گسترش دهید.
Figma Dev Mode کافی است؟
کمک میکند اما جایگزین قرارداد توکن و حالتها نیست. اندازهها بدون نام مشترک دوباره منحرف میشوند.
بدهی موجود را چطور بازپرداخت کنیم؟
یک مسیر پولساز را انتخاب کنید، توکنها را استخراج کنید، همان مسیر را یکدست کنید، بعد الگو را به صفحات بعدی سرایت دهید.
طراح و توسعهدهنده جدا نیستند—چه کنیم؟
همان شخص هم باید دو لایه داشته باشد: تصمیم توکن/الگو جدا از پیادهسازی صفحه. نقش مخلوط بهانه برای بینظمی نیست.
دانش و مقالات
نیاز به اجرای همین مفاهیم در محصولتان دارید؟
پارادایس کد از مشاوره تا پیادهسازی کامل کنار شماست.