مدرسه دیزاین ملینا
بازگشت به مقالاتفیگما

دیزاین سیستم رو از کجا شروع کنیم

دیزاین سیستم فقط مجموعه‌ای از کامپوننت‌ها نیست. یک زبان مشترکه بین طراح و برنامه‌نویس. بیاید از پایه بسازیمش.

۱۴۰۵/۰۲/۲۵8 دقیقه مطالعهمجتبا یزدانپناه

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

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

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

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

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

و در آخر، سیستم رو با آدم‌ها بسازید نه برای آدم‌ها. اگر برنامه‌نویس‌ها توی ساختش نقش نداشته باشن، ازش استفاده نمی‌کنن. یک جلسه‌ی کوتاه هفتگی برای بازبینی مشترک، بیشتر از هر مستنداتی به بقای سیستم کمک می‌کنه.

Design SystemFigmaComponents

سوالی برات پیش اومد؟

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