چرا از اسکچ به فیگما؟

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

· امکانات یا ویژگی ها (Features)

· دیزاین سیستم (Symbols VS Component)

· همکاری ها (Collaboration)

· handoffs

· پروتوتایپینگ(Prototyping)

· خروجی گرفتن فایل (Export Files)

· کار کردن آفلاین (Offline work)

· افزونه ها (Plugins)

امکانات یا ویژگی ها
هر دو ابزار تقریبا دارای ویژگی های یکسانی هستن، همون میانبر ها و همون ساختار. اگر شما میدونین چطور با یکی از این دو ابزار کار کنین، بنابراین میتونین از دیگری هم استفاده کنین.

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

· فیگما روی هر سیستم عاملی از جمله: ویندوز، مک او اس و ... اجرا میشه، چون مبتنی بر وبه!

· اسکچ یک برنامه سفارشی و مختص به مک او اسه. پس تنها روی مک اجرا میشه.

· اسکچ و فیگما در حال حاضر کارایی و عملکرد تقریبا مشابهی دارن.

· در فیگما لود شدن پروژه زمان زیادی میبره، در حالیکه اسکچ تنها به زیر ۵ ثانیه زمان نیاز داره.

دیزاین سیستم (Symbols VS Component)
زمانیکه با اسکچ کار میکردم تا دیزاین سیستم بسازم، کار راه بنداز بود. اما وقتی به فیگما سوئیچ کردم متوجه شدم فیگما خیلی بهتره! اجازه بدید بیشتر توضیح بدم:
استایل های لایه/متن اسکچ خیلی کلی تعریف میشن (اصلا اتمیک نیستند). مثلا وقتی میخوام استایل متن بسازم، همه‌ی خصوصیات مثل فونت، وزن، سایز و … رو با هم ذخیره میکنه! باعث میشه مجبور شم همیشه یه لیست طولانی از استایل ها بسازم!

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

بیاید به فیگما رجوع کنیم:

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

تو فیگما مثل اسکچ نیست که مشخصه‌ی رنگ رو تو استایل های متنی و لایه ای داشته باشیم . تو فیگما یک رنگ اصلی تعیین میکنیم و اگه رنگ رو تو یک مکان تغییر بدیم، همه جا تغییر میکنه!

حالا بیاین درباره ی کامپوننت ها صحبت کنیم:
اون چیزی که من به خوبی متوجهش شدم اینه که فیگما تو این مورد هم بسیار بهتر عمل میکنه. سیمبل های اسکچ رو گرفته و از محدودیت هاش کم کرده.
تو اسکچ اگه یک سیمبل دارین فقط میتونین اون رو از طریق (Overrides) تغییرات جزئی بدین، اما نمیتونین عناصر درون کامپوننت رو حذف کنین. برای مثال اگه دکمه ای دارین که همراه با آیکونه، باید دو سیمبل بسازین; یکی با آیکون و یکی بدون آیکون. کامپوننت های فیگما کمی متفاوتن. شما در کنار اینکه میتونین از طریق Overrides تغییراتی اعمال کنین، همچنین میتونین لایه های کامپوننت و خصوصیت های لایه ها رو اصلاح کنین.

همکاری
مسئله‌ی همکاری بین طراح‌ها برای انتخاب ابزار مناسب خیلی مهمه. فیگما برای سهولت همکاری طراح ها Time Viewer یا Google Docs رو در نظر گرفته تا همه‌ی طراح‌ها بتونن بصورت همزمان روی یک فایل (پروژه) کار کنن. تو این حالت چند نشانگر ماوس رو میبینین که تو محیط کار فیگما در حال گردش هستن! همچنین میتونین مشاهده کنین که طراح‌های دیگه چه کاری انجام میدن. راستش من حس خوبی ندارم نسبت به کسی که تمام وقت کار منو تماشا میکنه یا همیشه با طراح‌های دیگه روی یک پروژه کار میکنه. چون وقتی پروژه بزرگتر میشه و دو نفر میخوان همزمان رو یک اسکرین کار کنن واقعا بهم ریختگی بزرگی بوجود میاد! البته ناگفته نمونه، طراح‌های زیادی هم هستن که این روش کار رو میپسندن.

بیاین ببینیم با اسکچ چه کاری میتونیم انجام بدیم :
به نظر میاد اسکچ تو این مورد بخاطر وجود پلاگینی به اسم Abstract بهتر عمل کرده; به طراح‌ها این امکان رو میده تا سیستم انشعابی (مانند Github برای توسعه دهندگان) داشته باشن و هر طراح، طرح ها رو تو Branch مخصوص به خودش طراحی و بارگزاری میکنه، بعد این Branch رو ادغام میکنه و اگه تداخلی وجود داشته باشه، اون رو حل میکنه. من شخصا این روش کار رو ترجیح میدم اما برخی از طراح‌ها اون رو پیچیده میدونن.

Handoffs (معادل فارسی خوبی نتونستم پیدا کنم!)

نحوه ارسال یا اشتراک گذاری طرح برای توسعه دهنده:
برای اینکار تو خود نرم افزار فیگما بخش مخصوصی وجود داره. اما بزرگترین مشکلی که توسعه دهنده‌ها از اون رنج میبرن اینه که وقتی میخوام یک اسکرین از پروژه رو بفرستم، باید لینک کل فایل پروژه رو برای اونها ارسال کنم و اونها هر سری باید برای مدت نسبتا زیادی صبر کنن تا پروژه لود بشه تا فقط یک اسکرین از پروژه رو ببینن. تو جلسات هماهنگی اگه بخوایم لینک طرح رو باز کنیم، میتونیم جلسه رو به اتمام برسونیم در حالی که لینک ها هنوز لود نشدن!
تو اسکچ برای به اشتراک گذاری اسکرین Sketch Cloud وجود داره; اما من معتقدم هنوز نیاز به توسعه داره. شما میتونید از پلاگین های زیادی استفاده کنین تا این روند روون تر بشه. ابزار هایی مثل Zeplin، Invision و Abstract . با همه ی این پلاگین ها میتونین اسکرین ها رو بصورت مجزا انتشار بدین.

پروتوتایپینگ
پروتوتایپ تو فیگما خیلی خوبه و شما میتونید User Test رو به راحتی با اون انجام بدین. چون اشتراک گذاری اون پیچیدگی‌ای نداره و همیشه همراه با طراحی بروز میشه.
پروتوتایپ اسکچ خیلی خوب نیست چون اشتراک گذاری اون خیلی پیچیدست. شما مجبورین مرتباً برای اشتراک گذاری پروتوتایپ با Sketch Cloud کار کنید و این اصلا جالب نیست. خبر خوب اینکه چندین پلاگین برای ساخت انیمیشن و پروتوتایپ های خوب با اسکچ و فیگما مثل Principle, Flinto, و Protopie وجود داره.

خروجی گرفتن
هر دو در خروجی گرفتن مشابه هستن. همچنین پلاگین هایی برای یکپارچه سازی خروجی ها وجود داره که برای هر دو برنامه معرفی شدن. برای مثال پلاگین Zeplin و Simpli که خروجی گرفتن رو آسون تر میکنن.

اما اون چیزی که وقتی با فیگما کار میکنم دلتنگش میشم، Copy کردن هر Artborad، لایه یا گروه و Paste کردن اون تو خارج از برنامه (مثلا Jiraیا Slack) هست، متاسفانه این تو فیگما امکان پذیر نیست. اما تو اسکچ میشه این کار رو انجام داد و لذتش رو برد! من همیشه این کار رو برای اینکه فایل‌های اضافی زیادی رو دسکتاپ نداشته باشم انجام میدادم و امیدوارم فیگما به زودی این امکان رو اضافه کنه.

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

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

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

اکانت من در اینستاگرام

منبع: https://uxdesign.cc/should-i-switch-figma-sketch-79c9828684a