همه ما که کار طراحی می‌کنیم یه سری فایل فیگما داریم که می‌ترسیم دوباره باهاشون مواجه بشیم! از بس که این فایل‌ها به هم ریخته هستند و اگه بخوایم یه جایی شون رو تغییر بدیم باید کلی همه جا رو اصلاح کنیم یا اگه یه جا رو تکون بدیم کل ساختمون اون فایل به هم می‌ریزه!
این مقاله برای چه کسانی خوبه؟ افرادی که با فیگما کار کردن و اصول اولیه باهاش رو بلدن ولی میخوان کیفیت فایل‌شون رو ارتقا بدن و حرفه‌ای‌تر باهاش کار کنن.
این مدت که داشتم روی طراحی یک UI Kit کار می‌کردم که باهاش بتونم محصول‌مون رو توسعه بدم و تو این مسیر بارها و بارها به مشکل برخورد کردم یه سری نکات رو یاد گرفتم که به نظرم رسید خوبه یک جا جمع شون کنم که هم خودم بعدا بهش مراجعه کنم و هم بقیه افرادی که قصد دارن اصولی با فیگما کار کنن.
اول تیتروار میگم که این نکات چی هستند:
همیشه سعی کنین یک قاعده برای نام‌گذاری در نظر بگیرین و طبق اون قسمت‌های مختلف رو نام‌گذاری کنین. نام‌گذاری خوب چند تا مزیت داره:
اول اینکه وقتی کامپوننت می‌سازین و اونها رو داخل کتابخونه قرار میدین بهتون کمک میکنه اون کامپوننت رو راحت‌تر پیدا کنین. بعداً که دارین واریانت‌های مختلف اون کامپوننت رو تنظیم می‌کنین هم راحت‌تر یادتون میاد چی به چی بود. یه مقاله خود فیگما داره که پیشنهاد می‌کنم اگه قصد دارین UI Kit بسازین و نام‌گذاری کنین حتما حتما بخونینش. این هم لینک مقاله
وقتی از مدل نام‌گذاری خوب استفاده کنین اینقدر تمیز کامپوننت‌هاتون پوشه‌بندی میشن و راحت میتونین پیداشون کنین:
دومین نکته مهم وقتی هست که پروتوتایپی از نوع Smart Animation میزنین. این مدل پروتوتایپ خیلی جذابه اگه استفاده کرده باشین. اما اصل جذابیت اون وقتی هست که اسم فریم‌ها و تمام جزئیاتی که عین هم هستند، توی دو تا فریم اصلی عین هم باشن. وگرنه موقعی که دارین تغییر رو تماشا می‌کنین یهو ممکنه همه چیز برن توی دل همدیگه و اون زیبایی رو تجربه نکنین :(
سومین قسمت مهم توی تغییر بین واریانت‌ها هست. خیلی وقت‌ها میشه ما مثلا یک دکمه داریم و یک حالت Hover هم براش داریم که بین اینها یک پروتوتایپی زدیم. ولی وقتی توی قسمت نمایش پروتوتایپ روش Hover می‌کنین می‌بینین که رنگ متن یا آیکون همون قبلی ه و درست نیست. این به خاطر این هست که باز نام‌گذاری فریمی که بین دو تا واریانت کامپوننت مشترک هست یکی نبوده و فیگما نمیفهمه که باید رنگ حالت Hover رو به اون بده. البته این مسئله میتونه علت دیگه هم داشته باشه. اینکه ما کامپوننت میزنیم ولی به اون پایبند نیستیم و هی نمونه کامپوننت رو تغییرش میدیم. خب کامپوننت اصلی رو اصلاح کنین!
انقدر قابلیت‌های جذابی Frame توی فیگما داره که اگه بدونین دیگه رهاش نمی‌کنین :)
دقیقا همون طوری که گروه‌بندی می‌کنین (که توصیه می‌کنم هرگز گروه‌بندی نکنین!) میتونین چند تا فریم یا تکست و تصویر و شکل رو انتخاب کنین و با همدیگه درون یک Frame قرار بدین تا نظم بهتری بهشون داده باشین.
برای اینکه بعداً که میخواین فایل فیگماتون رو تغییر میدین از هر جا که دست میزنین کلش به هم نریزه پیشنهاد می‌کنم که از Auto Layout استفاده کنین. درسته که این قابلیت نمیذاره حالت‌های گریدی داشته باشین ولی با یه سری ترفند میتونین گریدهاتون رو هم با Auto Layout زیبا کنین و بچینین. و خیلی راحت با تغییر چند تا قسمت ویرایش مطلوبی که مد نظرتون هست رو به فایل تون بدین.
برای ایجاد فرم‌های گریدی یا جدولی میتونین یه سری فریم افقی رو درون یک فریم عمودی قرار بدین و یا برعکس:
وقتی از سمت راست گزینه Auto Layout رو انتخاب می‌کنین قابلیت‌های مختلفی بهتون داده میشه. میتونین فاصله بین المان‌های داخلی و فاصله‌هاشون از لبه‌های بالا و پایین و چپ و راست رو مشخص کنین و اینکه چینش از کدوم سمت شروع بشه. یه قابلیت دیگه هم که میتونین ازش استفاده کنین Space between هست که خیلی جذابه برای وقت‌هایی که میخواین المان‌ها کل فریم رو با فاصله یکسانی پر کنند. مثلا نمیخواین دقیقاً فاصله بین دو تا المان ۱۶ پیکسل باشه و میخواین به صورت یکنواختی اون فریم رو پر کرده باشن که بزرگ و کوچیکش هم کردین مشکلی پیش نیاد.
برای اندازه‌هایی که میدین حتما از استانداردهای یه دیزاین سیستم که دارین ازش استفاده می‌کنین یا الهام می‌گیرین استفاده کنین و الکی اندازه‌های مختلف ندین. این کار هم به نظم خروجی‌تون خیلی کمک میکنه.
وقتی از Auto Layout استفاده می‌کنین اتفاق جذاب دیگه اینه که ممکنه بخواین از نظر عرضی یا طولی فریم‌تون رو بکشین. اون وقت به هم نمی‌ریزه. البته به شرطی که این مقادیر رو درست تنظیم کرده باشین:
توی تصویر بالا دو تا کلمه Hug می‌بینین. اینا یعنی چی؟ وقتی نوع اندازه طولی یا عرضی فریم‌تون رو Hug Content تنظیم کرده باشین یعنی باید هر چی دو دلش هست رو بغل کنه و به اندازه اون بزرگ بشه. مثلا اگه متن داخلش بزرگتر شد فریم‌تون هم بزرگتر میشه. یا اگه المان جدیدی بهش اضافه کردین باز هم بزرگتر میشه.
اما جورهای دیگری هم میتونین این اندازه رو تنظیم کنین. مدل دیگه این هست که Fill Container زده باشین. در این حالت نگاه فریم شما درونگرا نیست بلکه برونگراست! یعنی چی؟ یعنی به فریم بیرونی و بالاسری خودش نگاه میکنه و خودش رو تا حدی که اون بهش فضا داده بزرگ میکنه.
مدل Fixed هم که دیگه معرف حضور هست و توضیح نمیخواد یعنی فریم شما اندازه‌اش ثابته و خودتون انتخاب می‌کنین چه سایزی داشته باشه.
اگه قابلیتی به اسم کامپوننت و واریانت نبود چه دلیلی داشت واقعا آدم از فیگما استفاده کنه؟! جبر زمانه!
پیشنهاد می‌کنم هر جایی که یک الگوی تکرار شونده دارین از کامپوننت استفاده کنین. ریزدانگی کامپوننت میتونه از حتی یک لیبل ساده باشه تا یه جدول پیچیده. خوبی استفاده از کامپوننت‌ها این هست که اگه یه جایی وسط چندین فریم احساس کردین که به معنای واقعی کلمه اشتباه کردین! برگردین و با یه تغییر کوچیک همه چیز رو با هم اصلاح کنین. البته این اصلاح همگانی بدون رعایت دو مورد بالایی (نام‌گذاری و چینش خودکار) به سادگی ممکن نیست.
کامپوننت در کامپوننت
حتی وقتی دارین یه Button ساده طراحی می‌کنین که ممکنه ۳۰، ۴۰ تا واریانت داشته باشه حتما محتوای داخلش رو هم کامپوننت کنین. این کار بهتون کمک میکنه اصلاحات بعدی‌تون روی اون واریانت‌ها راحت‌تر بشه. دیگه چه برسه به کامپوننت‌های پیچیده‌تر!
یه وقتایی هست مثلا توی فرم‌ها ممکنه یه قسمت ورودی از نوع متنی باشه یا کمبوباکس یا مثلا ورودی تاریخ باشه. که هر کدوم از اینها کامپوننت‌های مختلفی میتونن باشن. حتما از کامپوننت توی دل اینها استفاده کنین. علتش اینه که بعدا میتونین راحت با Instance Swap یا تغییر کامپوننت، کامپوننت درونی رو به راحتی تغییر بدین بدون اینکه ساختار بیرونی به هم بریزه. به طور مثال اینجا یه ورودی از نوع Date-Picker داریم. بعد برای اینکه چینش Label، توضیحات زیرش و ورودی به هم نخوره میشه راحت صرفا کامپوننت Date-Picker رو با یه کامپوننت دیگه مثل Input ساده عوض کرد.
انواع واریانت
اینکه چطور میشه یه واریانت ساده ساخت رو پیشنهاد می‌کنم از این لینک در خود فیگما آموزشش رو ببینین. اما اخیرا یه قابلیتی توسعه داده فیگما که میتونین Property های مختلفی تعریف کنین اما خود من حقیقتش هر چی گشتم راهنمایی براش پیدا نکردم. برای همین تصمیم گرفتم اینجا توضیح بدم. این قابلیت جدید خیلی کمک میکنه که مجبور نباشین واریانت‌های زیادی بسازین.
متغیر (Property) از نوع Boolean: خیلی وقت‌ها پیش میاد تفاوت بین دو تا واریانت در این هست که یه چیزی رو دارن یا ندارن. مثلا یه دکمه آیکون داره یا نداره. برای اینکار لازم نیست که بیاین یه سری واریانت جدید تولید کنین. کافی هست المانی که میخواین قابلیت برداشته شدن داشته باشه رو از داخل کامپوننت اصلی انتخاب کنین و از پنل سمت راست بر روی آیکون قرمز شده (Apply Boolean Property) کلیک کنین:
بعد از اون یک مودال براتون باز میشه که میخواد Property مورد نظرتون رو تنظیم کنین:
اگه از قبل Property ایجاد کردین لیستش رو بهتون نشون میده و میتونین از همون استفاده کنین.
متغیر (Property) از نوع Text: ایجاد این Property هم شبیه به قسمت قبل هست. با این تفاوت که فقط روی المان‌های متنی و ذیل Content قابل اعمال هست. تعریف این Property کمک میکنه موقعی که میخواین متن‌های درونی یک نمونه از کامپوننت رو تغییر بدین دیگه یه ساعت داخلش نگردین و البته وقتی تغییر دادین روی همه واریانت‌هاش تغییر کنه.
متغیر (Property) از نوع Instance Swap: یه وقتایی پیش میاد که یه کامپوننت در دل کامپوننت دیگه استفاده می‌کنین و میخواین وقتی اون رو عوض کردین و به جای اون یک کامپوننت دیگه گذاشتین، تمامی واریانت‌هاتون به روز بشن و از طرفی هم کار کاربری که داره از کامپوننت‌هاتون استفاده میکنه راحت‌تر بشه و از قسمت تنظیمات کامپوننت اون رو تغییر بده. مثلا فرض کنین که در Button همین آیکون یک کامپوننت باشه که بخواین بعدا افراد بتونن با آیکون‌های دیگه تغییرش بدن. این Property هم ایجادش شبیه دو قسمت قبلی هست ولی جاش یه مقدار فرق داره:
خب در نهایت یه کامپوننت داریم که هر جا ازش بخوایم استفاده کنیم تنظیماتش به صورت تصویر زیر هست که میتونین متن و آیکون و اینکه آیکون داشته باشه یا نه رو به راحتی تنظیم کنین:
در مورد Property های از نوع Boolean، Text و Instance Swap حتما حواستون باشه که در همه واریانت‌هایی که ایجاد کردین اون رو تنظیم کرده باشین وگرنه یهو میرین روی Button که آیکون نداره و بغلش آیکون نشون میده!
ایجاد پروتوتایپ بین واریانت‌های مختلف
حتما برای شما هم پیش اومده که میخواستین یک مدل دکمه داشته باشین که هر جا روش Hover یا کلیک کردین رفتار مشابهی نشون بده و مرتب مجبور نشین که به خاطرش Frame های زیادی ایجاد کنین. البته دکمه یه مثال ساده است و خیلی چیزهای پیچیده‌تری میشه با این قابلیت طراحی کرد.
برای اینکار باز پیشنهاد می‌کنم به لینک راهنمای فیگما مراجعه کنین و در مورد کامپوننت‌های تعاملی مطالعه کنین که خیلی کارتون رو ساده‌تر و حرفه‌ای‌تر میکنه.
خیلی ممنونم از اینکه متن رو خوندین. قطعا در نگارش من مشکلاتی هست که شاید خوب منظور رو نرسونده باشه. خوشحال میشم نظراتتون رو مطرح کنین در موردش. اگه نکته دیگری هم بوده که حین کار کمک تون کرده فایل تمیزتر و توسعه‌پذیرتری داشته باشین حتما در کامنت بذارین.
