سیستم طراحی (Design System) چیست و چه زمانی لازم می‌شود؟

سیستم طراحی دقیقاً چیست

سیستم طراحی، مجموعه‌ای از اجزای قابلِ استفادهٔ مجدد و قواعدِ استفاده از آن‌هاست: دکمه، فیلد، کارت، رنگ، فونت و فاصله — به‌همراه راهنمایی که می‌گوید هر کدام کِی و چطور به کار می‌رود. تفاوتِ آن با یک فایلِ مرتبِ فیگما، در «قواعد» است؛ سیستم طراحی، کتابِ قانونِ تیم است، نه فقط جعبه‌ابزارش.

• برای چه کسانی: تیم‌هایی که چند محصول یا چند سازنده دارند و روزانه در حالِ اختراعِ دوبارهٔ دکمه‌اند.
• خروجی: یکدستیِ بصری، سرعتِ ساختنِ صفحاتِ جدید و تصمیم‌های کمتر.
• سیستم طراحی، فرزندِ هویت بصری برند است؛ وقتی هویت روشن باشد، سیستم از دلش در می‌آید.

اجزای معمول

• اجزای بصری: رنگ، تایپوگرافی، فاصله و شبکه؛ کالرِ توکن‌ها، مقیاسِ فاصله و دو سه فونتِ تعریف‌شده.

• کامپوننت‌ها: دکمه، فیلد، کارت، ناوبری؛ هر کامپوننت با حالت‌هایش (عادی، فعال، خطا، غیرفعال).

• راهنماها: چه وقتی از کدام کامپوننت استفاده شود؛ متنِ همین راهنماها، نیمهٔ فراموش‌شدهٔ اکثر سیستم‌هاست.

• برای بخشِ متن، قواعدِ تایپوگرافی فارسی برای وب نقطهٔ شروعِ خوبی است و برای جفت‌کردن فونت‌ها، ترکیب فونت فارسی.

چه زمانی لازم می‌شود

• نشانهٔ اول: دو صفحهٔ محصول، دو دکمهٔ متفاوتِ «ثبت» دارند و کسی نمی‌داند کدام درست است.

• نشانهٔ دوم: ساختِ هر صفحهٔ جدید، از صفر شروع می‌شود و هفته‌ها طول می‌کشد.

• نشانهٔ سوم: تغییرِ رنگِ برند، کابوسِ دوهفته‌ایِ کلِ تیم می‌شود.

• اگر دو نشانه از سه نشانه را می‌بینید، وقتِ شروع است؛ نه برای «ساختنِ سیستمِ کامل»، برای شروعِ کوچک.

چه زمانی زود است

• وقتی تیمِ یک‌نفره دارید و دو سه صفحهٔ محدود می‌سازید، فایلِ مرتبِ فیگما با چند استایلِ مشترک کافی است؛ سیستمِ کامل، هزینهٔ بی‌مصرف دارد.

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

• قانونِ کلی: سیستم طراحی، از دلِ تکرار بیرون می‌آید؛ تکرارِ واقعی که دردِ واقعی ساخته، نه از رویهٔ شرکت‌های بزرگ.

شروع کوچک و رشد تدریجی

• هفتهٔ اول: رنگ‌ها و فاصله‌ها را در فیگما استایل کنید و فقط سه کامپوننتِ پرتکرار بسازید: دکمه، فیلد و کارت.

• ماهِ اول: راهنمایِ کوتاهِ استفاده برای همین سه کامپوننت بنویسید؛ یک صفحه برای هرکدام، با مثالِ درست و غلط.

• فصل اول: صفحاتِ موجود را به‌تدریج مهاجرت دهید؛ مهاجرتِ یک‌شبه، همیشه نیمه‌کاره می‌ماند.

• سیستمِ خوب، زنده است: هر ماه یک کامپوننتِ جدید، هر فصل یک بازبینیِ کامل.

سیستم طراحی، در واقع همان انضباطِ تیم است که شکلِ بصری گرفته؛ تیمی که برای دکمه‌هایش قانون می‌نویسد، برای محصولش هم قانون می‌نویسد و این دومین، همان چیزی است که کارفرما «حرفه‌ای» می‌نامد.