دیزاین سیستم در فیگما چیه؟

اگه وارد دنیای طراحی UI/UX شدی، یه لحظه فکر کن:

·       چطور اپ بزرگی مثل تپسی یا اسنپ‌فود با ده‌ها صفحه و هزاران دکمه، این‌قدر منظم و هماهنگ طراحی شدن؟

·       اگه یه دکمه کوچیک بخواد تغییر کنه، باید همه صفحه‌ها رو دستی ویرایش کنن؟

اینجاست که یه قهرمان وارد می‌شه:
Design System یا سیستم طراحی

Design System چیه؟

"یه جعبه ابزار بزرگ و منظم برای طراحی"

این جعبه ابزار شامل:

·      رنگ‌ها

·      فونت‌ها

·      آیکون‌ها

·      دکمه‌ها

·      فرم‌ها

·      کامپوننت‌ها (اجزای قابل استفاده مجدد)

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

Design System در Figma چطوری ساخته میشه؟

Figma دقیقاً برای همین طراحی شده. به راحتی می‌تونی:

·      Styles تعریف کنی (برای رنگ، متن، سایه و...)

·      Components بسازی (دکمه، کارت، فرم و...)

·      Variants اضافه کنی مثلاً دکمه روشن، خاموش، Hover

میتونی فایل Design System رو Share کنی تا همه‌ی تیم ازش استفاده کنن

مزایای استفاده از Design System

1. سرعت طراحی بالا می‌ره

فقط یک بار طراحی می‌کنی، همه‌جا استفاده می‌کنی.

2. ظاهر همه صفحات یکدسته  

طراحی منظم و حرفه‌ای می‌شه

3. تیم طراحی منسجم می‌مونه   

همه با یه منبع واحد کار می‌کنن

4. توسعه راحت‌تر می‌شه   

برنامه‌نویس می‌دونه از چه ساختاری استفاده کنه

5. تغییرات سریع و مرکزی   

فقط یه جا تغییر بده، همه جا آپدیت میشه

معروف‌ترین دیزاین سیستم‌های دنیا:

Material design گوگل:

https://m3.material.io

·      استفاده شده در اپ‌های اندروید و گوگل

·      دکمه‌ها، سایه‌ها، رنگ‌ها و انیمیشن‌هاش معروفه

·      توی فیگما کامپوننت‌هاش آماده هست (رایگان)

·      الهام برای: طراحی اپلیکیشن‌های موبایل، مخصوصاً اندروید

Carbon – IBM

https://carbondesignsystem.com

·      بسیار حرفه‌ای و مرتب

·      مخصوص طراحی داشبورد و اپ‌های پیچیده شرکتی

·      همه‌چیزش داکیومنت شده و قابل استفاده در کدنویسی

·      الهام برای: طراحی رابط‌های سازمانی یا پیچیده

Fluent مایکروسافت

https://fluent.microsoft.com

• سیستم طراحی اپ‌ها و ویندوز

• سبک شفاف و مینیمال

• آیکون‌ها و حالت‌های hover جذاب

• الهام برای: طراحی دسکتاپ یا اپ‌های حرفه‌ای‌تر

Atlassian Design System

https://atlassian.design

·      مخصوص محصولات Trello و Jira و confluence

·      تمرکز روی فرم، کامنت، دیتاهای زیاد

·      الهام برای: طراحی ابزارهای مدیریت پروژه و تیمی

Shopify Polaris

https://polaris.shopify.com

·      مخصوص فروشگاه‌های آنلاین

·      دکمه‌ها، فرم‌ها و فیلترهاش عالیه

·      الهام برای: طراحی پنل ادمین، سایت فروشگاهی

Apple Human Interface Guidelines (HIG)

https://developer.apple.com/design/human-interface-guidelines

مخصوص طراحی اپ‌های iOS و macOS  

مینیمال، ظریف، با انیمیشن‌های ملایم

الهام برای: طراحی اپ آیفون و اپ‌های لوکس

Ant Design – Alibaba

https://ant.design

·      ساخت چین ولی بسیار پرکاربرد جهانی

·      بیشتر برای داشبورد و اپ‌های تحت وب

·      الهام برای: طراحی وب‌اپ‌های پیچیده

مثال‌های واقعی از Design System در برندهای ایرانی

1. تپسی

اپلیکیشن حمل‌ونقل تپسی یه Design System خیلی منظم داره:

·      رنگ اصلی: نارنجی

·      فونت: ایران‌سنس

·      آیکون‌های اختصاصی برای سفر، پشتیبانی و...

·      کامپوننت‌های واضح برای دکمه، فرم رزرو، کارت سفر

تغییر رنگ دکمه «رزرو سفر»؟ فقط کافیه کامپوننت اصلی ویرایش بشه؛ تو کل اپ تغییر می‌کنه!

2. اسنپ‌فود

اسنپ‌فود با ده‌ها سرویس مختلف (رستوران، داروخانه، سوپرمارکت...) حتماً باید از Design System استفاده کنه.

·      رنگ اصلی: قرمز

·      دکمه‌ها با حالت‌های مختلف (Hover, Active, Disable)

·      آیکون‌های اختصاصی برای دسته‌بندی‌ها

·      ساختار منظم برای کارت غذا، اطلاعات رستوران و فرم جستجو

مثلاً کامپوننت "کارت غذا" یه بار ساخته شده و برای همه غذاها فقط اطلاعات تغییری می‌کنه.

3. آپ

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

·      رنگ برند: سبز تیره

·      فونت: رسمی و ساده

·      آیکون‌های کاربردی و واضح

·      ساختار ثابت برای کارت‌های خدمات، دکمه‌ها و اعلان‌ها

نتیجه؟ کاربر سریع‌تر متوجه عملکرد هر بخش می‌شه چون همه چی استاندارد و تکرارشونده‌ست.

ساختن Design System در Figma (گام‌به‌گام)

قدم 1: ساختن  Styleها

• مثلا رنگها (primary آبی) و (secondary خاکستری)

• فونت‌ها (تیتر، بدنه، زیرنویس)

• افکت‌ها (سایه، گردی گوشه‌ها)

قدم 2: ساختن  Components

• دکمه‌ها در اندازه و حالت‌های مختلف

• فیلدهای ورودی و فرم‌ها

• کارت‌ها برای محصولات یا اطلاعات

قدم 3: استفاده از  Variants

• مثلاً دکمه با ۳ حالت: عادی، کلیک‌شده، غیرفعال

قدم 4: سازمان‌دهی در یک فایل مستقل

• فایل Design System رو جدا نگه دار تا توی همه پروژه‌ها استفاده بشه با قابلیت share

نکات حرفه‌ای برای طراح‌ها

همیشه قبل از طراحی یه صفحه، ببین چه چیزی توی Design System داری

اگه چیزی جدید طراحی کردی که می‌تونه تکراری باشه، اون رو به Design System اضافه کن

هر ماه Design System رو بررسی و به‌روزرسانی کن

حتماً Document  بنویس برای آموزش تیم (یا خودت در آینده)

جمع‌بندی نهایی

·      دیزاین سیستم یه سرمایه مهم برای طراح‌های حرفه‌ایه

·      فیگما بهترین ابزار برای ساخت و استفاده از اون هستش

·      برندهای موفق ایرانی مثل تپسی، اسنپ‌فود و آپ از اون استفاده می‌کنن

·       اگه دنبال استخدام، پروژه یا مهاجرت هستی، حتماً تو پورتفولیوت نشون بده که کار با Design System بلدی

#سیستم_طراحی #تپسی #اسنپ_فود #فیگما #طراحی_محصول #سیستم_طراحی_ایرانی
#design_system #figma_design #UI_design #product_design #Figma