یک محصول وب طی چند سال با افراد مختلف رشد کرده است. نتیجه، رابط کاربری پراکنده است: رنگها نامنظماند، فاصلهها ثابت نیستند، دکمهها چندین نسخه دارند و تایپوگرافی در صفحات مختلف تغییر میکند. تیم توسعه از دوبارهکاری خسته شده و طراح هم برای هر صفحه تصمیمهای تکراری میگیرد. در این کیس استادی، شما باید مسیر واقعی «مهاجرت به دیزاین سیستم» را مستند کنید؛ از آشفتگی تا استاندارد.
کار را با UI Audit شروع کنید. از ۸ تا ۱۲ صفحه کلیدی اسکرین بگیرید و تمام تفاوتها را استخراج کنید: رنگها، فونتها، رادیوسها، سایهها، اندازه دکمهها و الگوهای فرم. سپس یافتهها را دستهبندی کنید و یک لیست بدهی طراحی (Design Debt) بسازید. بعد وارد Foundations شوید: پالت رنگی (با نامگذاری معنایی مثل text/primary)، تایپوگرافی با مقیاس مشخص، سیستم فاصلهگذاری مبتنی بر 8pt و قواعد Grid.
در گام بعد باید Design Tokens را تعریف کنید. به جای Hexهای خام، توکنهای پایه و معنایی بسازید و یک جدول نگاشت ارائه دهید (Global → Semantic → Component). سپس یک UI Kit در Figma ایجاد کنید که شامل کامپوننتهای پایه و قابل استفاده مجدد باشد. هدف این کیس استادی صرفاً ساخت کامپوننت نیست؛ هدف این است که نشان دهید چگونه «تصمیم طراحی» را به «قانون» تبدیل میکنید.
در پایان، ۳ صفحه از محصول را با سیستم جدید بازطراحی کنید و Before/After بگذارید. نشان دهید که با دیزاین سیستم، تعداد استایلهای تکراری کم میشود، هَندآف سریعتر میشود و توسعهپذیری بالا میرود. این کیس استادی باید قابل ارائه به طراح ارشد و تیم فرانتاند باشد.