آموزش ها, مقالات آموزشی 26 دقیقه 396

Figma در مقابل Adobe XD: ما چگونه ابزار طراحی بعدی خود را انتخاب کردیم؟

چکیدهزمان تغییرات فرا رسید و تیم طراحی دوباره بحث در مورد مهاجرت از نرم افزار Sketch را شروع کرد. هر چند این اولین بار نبود اما جدی تر از قبل بود. تابستان گذشته در نظر داشتیم که نرم افزار دیگری را جایگزین اسکچ کنیم و در نهایت منصرف شدیم چرا که ارزشش را نداشت در […]

زمان تغییرات فرا رسید و تیم طراحی دوباره بحث در مورد مهاجرت از نرم افزار Sketch را شروع کرد. هر چند این اولین بار نبود اما جدی تر از قبل بود. تابستان گذشته در نظر داشتیم که نرم افزار دیگری را جایگزین اسکچ کنیم و در نهایت منصرف شدیم چرا که ارزشش را نداشت در نتیجه منتظر پیشرفت این ابزار در آینده شدیم و امروز مقایسه Figma در مقابل Adobe XD را خواهیم داشت.

برای طراحان Telesoftas این یک انقلاب دوم است – اولین انقلاب بزرگ مدتها پیش با مهاجرت از Photoshop به Sketch شروع شد. در آن زمان به نظر میرسید یک معامله بزرگ و پیشرفت چیزی انقلابی است. حالا این بار میتوانیم آن را دومین انقلاب طراحی و تغییر بزرگ بعدی بنامیم.


Figma در مقابل Adobe XD: ما چگونه ابزار طراحی بعدی خود را انتخاب کردیم؟

سابقه اسکچ و چرا تغییر لازم است؟

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

همکاری واقعاً زجرآور بود و برای این کار باید از افزونه ها و سایر سرویس ها استفاده میکردیم تا با طراحان دیگر سینک شویم که همیشه هم بی نقص کار نمیکرد و گاهی اوقات ما زمان انتقال طراحی ها از پلاگین به سرویس cloud باید مغایرت ها را برطرف میکردیم. و این غیر متعارف است که یک ابزار طراحی به سرویس های زیادی نیاز داشته باشد تا در سطح مینیمالیستی خود کاربردی باشد. ما برای همگام سازی طراحی، از Plant برای به اشتراک گذاشتن طرح ها با مشتریان یا PMs Invision برای ساخت انیمیشن Principle و برای به اشتراک گذاری با توسعه دهندگان Sympli استفاده میکردیم و گاهی اوقات نیز Anima برای ایجاد طرح بندی تطبیقی هوشمند، از آنجا که اسکچ یک ابزار استاندارد صنعتی است، ویژگی های missing product فرصت های زیادی را برای ایجاد مشاغل جدید به وجود آورد.

گرچه برخی از سرویس ها مفید هستند، اما به هزینه های ماهانه می افزاید. با توجه به نیاز به روز رسانی 99 دلار در سال، مجوز تیم Invision حدود 300 دلار در سال، قیمت Plant حدود 144 دلار در سال و Sympli برای هر دسترسی 108دلار است. از آنجا که ما به تعداد زیادی دسترسی نیاز داریم، Sympli به خودی خود هزینه زیادی دارد زیرا طراحان و توسعه دهندگان به این دسترسی نیاز دارند. این فقط مسئله قیمت گذاری نیست، بلکه کل گردش کار در نوسان است.

سابقه اسکچ
سابقه اسکچ
اسکچ و بررسی هزینه ها
اسکچ و بررسی هزینه ها

چرا Sketch عقب ماند؟

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

در حال حاضر شاهد پیشرفت محصول هستیم و خوب است که layout خودکار، مدیریت نماد و سبک، توسعه cloud و بهبود عملکردهای نمونه اولیه اتفاق می افتد، بنابراین من از این سپاسگزارم.

چرا Sketch عقب ماند؟
چرا Sketch عقب ماند؟


امید برای اسکچ تیمز و بررسی Figma در مقابل Adobe XD

طبق وبلاگ های اسکچ و ایمیل هایی که دریافت کردیم، برای Sketch 2020 مایکروسافت تیمز، cloud و قابلیت همکاری وعده داده شده، باز هم هیجان زده شدیم. سال گذشته بود و معتقد بودیم که این به روز رسانی های جدید به شما کمک میکند تا با XD و Figma همگام شوید. اما از دید ما اینها از نظر عملکرد و تجربه از اسکچ خیلی فاصله دارند. ما همراه اپدیت cloud را دریافت کردیم، اما در نهایت از این ویژگی ناامید شدیم چرا که cloud Sketch کند است، تنها چیزی که جایگزین کردیم Plant بود، اما همچنان فاقد نمونه اولیه (prototyping) ، همکاری (collaboration) است.

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

اسکچ تیمز
اسکچ تیمز

تحقیق در مورد ابزارها برای مقایسه Figma در مقابل Adobe XD

با تحقیق در مورد Framer X شروع کردیم و پروژه کوچکی را با آن انجام دادیم. البته از قبل زمانی را صرف YouTube و مقالات کردیم تا در مورد آن بیشتر بدانیم. ارزش اصلی این ابزار این است که شما طراحی ها را با اجزای (component) واقعی انجام میدهید، همه چیز کاملاً کاربردی است. به عنوان مثال مپ های یکپارچه، پخش کننده های ویدیو، فرم ها مانند یک پروداکت واقعی عمل میکنند. در مقطعی از نمونه سازی و طراحی تعاملی و واقعی، حقیقتا شگفت زده شدیم. Framer X “فروشگاه” خود را دارد که در آن میتوانید کامپوننت ها را دانلود کنید و با ترکیب آنها با طرح هایتان، دیزاین های قابل استفاده داشته باشید.

اما دوباره مشکل اتکای بیش از حد به افزونه های بیرونی به جای داشتن پروداکت کامل دوباره ظاهر میشود. استفاده از این ابزار نمیتوان گفت آسان است. به عنوان مثال، اگر میخواهید عملکرد شناور (hover functionality) را داشته باشید، باید به ویرایشگر کد بروید. ایده اصلی این است که در دراز مدت باید تسلط کافی بر React داشته باشید تا بتوانید بر آن مسلط شوید.

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

تحقیق در مورد ابزارها برای مقایسه Figma در مقابل Adobe XD
تحقیق در مورد ابزارها برای مقایسه Figma در مقابل Adobe XD

و سپس Figma آمد

پس از تحقیق درباره Framer، با بارگیری یک برنامه، تحقیقات در باب Figma را شروع کردم و در کمال تعجب، این برنامه رایگان است. تقریباً هر روز از یک ابزار به نام Miro برای سازماندهی ورکشاپ ها، همکاری با مشتریان، هم تیمی ها و سازماندهی تحقیقات استفاده میکنم. تجربه مولتی پلیر فیگما تا حدی برایم آشنا بود و حتی احساس کردم که میتواند جایگزین ابزار محبوب Miro شود.

این ابزار مینیمالیستی همه چیز مورد نیاز را دارد. دارای کامپوننت هوشمند، layout هوشمند است که حتی بهتر از اسکچ کار میکند. نمونه سازی و انیمیشن نیز پیشرفته است، حتی طراحی وکتور آنقدر خوب بود که به جایگزین شدن با ایلاستریتور نیز فکر کردم.  استفاده از Figma  انقدر هیجان انگیز بود که بیشتر کانال YouTube آن را تماشا کردم.

نرم افزار Figma
نرم افزار Figma

افزونه ها و انجمن Figma

کشف دیگری که کردم پلاگین ها بودند. به عنوان یک پروداکت، Figma به نظر کامل بود. همانطور که در سیستم نقطه ای درباره ی Figma تحقیق می کردم، در جایگاه اول قرار گرفت. سعی کردم تا آنجا که ممکن است هنگام تحقیق در مورد ابزارها بی طرف باشم، اما به سرعت عاشق آن شدم.

همکاری در سطح دیگری به نظر میرسید که تجربه مشابه آن را با میرو داشتم. من قبلاً این ابزار را میشناختم و اینکه مردم چگونه آن را تحسین میکردند، اما حالا میفهمم که چقدر ابزار خوبی است و نزدیک به رویای ما “یک ابزار برای جایگزینی همه و با مهاجرت به آن دیگر نیازی به Invision ، Sympli ، Plant ، Anima و حتی Miro نداریم و به نظر میرسد یک راه حل مناسب برای انجام ارائه باشد.

بررسی افزونه ها و انجمن Figma
بررسی افزونه ها و انجمن Figma

Figma در مقابل Adobe XD و زمان تصمیم گیری

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

زمان ارائه بود و با توجه به کرونا، همه ارائه ها از راه دور انجام میشد. من یک ارائه طولانی با تحقیقات گسترده در مورد آن تهیه و با Figma ارائه کردم. به نظر میرسید که من بیشتر نگرانی ها را در مورد آن برطرف کردم، اما برخی موارد جزئی وجود داشت که به خوبی Adobe XD کار نمیکرد. میتوانم اعتراف کنم XD یک رقیب شایسته است، انیمیشن و نمونه سازی آن بهتر است. این موضوع به راحتی در نمونه ای که ما افکت های شناور ساده انجام دادیم، به راحتی قابل مشاهده بود. در Figma باید در جایی یک حالت شناور ایجاد کنید و برای اجرا از اورلی استفاده کنید در حالی که در XD این کار با چند کلیک قابل اجرا بود.

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

Figma در مقابل Adobe XD و زمان تصمیم گیری
Figma در مقابل Adobe XD و زمان تصمیم گیری

برگشت به تخته رسم

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

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

برگشتن به تخته رسم
برگشتن به تخته رسم

نتیجه گیری

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

آینده ابزارهای طراحی

نظرسنجی سال 2019 نشان داد که Sketch هنوز انتخاب اول و Figma عقب مانده است. اما در مقابل این سؤال که در سال آینده بیشتر تمایل دارید کدام یک را امتحان کنید، جواب Figma بود. با توجه به وضعیت حال و همه گیر و نیاز کار از راه دور به نظر می آید که XD یا Figma باید از Sketch پیشی بگیرند. میتوان به این به عنوان یک تکامل نگاه کرد، تغییر برای همراهی با دنیای طراحی ضروری است. ما نمیدانیم در آینده چه خواهد شد و اتفاق بزرگ بعدی در دنیای ابزارهای طراحی چیست، ممکن است هوش مصنوعی و توسعه باشد.

به روز رسانی در Framer

با توجه به تحقیقاتی که در مورد Framer X داشتیم، ضمن راه‌اندازی برای وب، تغییراتی نیز ایجاد شده است. به نظر میرسد تمرکز آنها بهترین ابزار نمونه اولیه است که در حال حاضر به عنوان رقیبی برای Protopie یا Axure است و نه برای ابزارهای معمول طراحی؛ کنار گذاشتن این ابزار در ابتدا تصمیم خوبی بود، اما اگر ما در مورد پیش نمونه های تعاملی صحبت کنیم، فقط ابزار خوبی برای آن است.



راستی میتوانید آخرین مطالب ما را از طریق تلگرام و اینستاگرام نیز دنبال کنید. برای عضویت در کانال تلگرام و اینستاگرام بیت گرف روی دکمه زیر کلیک کنید. همچنین فیلم ها با کیفیت های مختلف در یوتیوب هم قرار دارد.

TELEGRAM INSTAGRAM youtube

امتیاز: 0 از ۵ - تعداد رای: 0
اشتراک گذاری این صفحه
گفتگو و سوالات شما در این قسمت میتوانید نظر یا سوال خود را در مورد مقاله یا آموزش مطرح کنید.
دیدگاهتان را بنویسید برای ارسال دیدگاه لازم است در سایت وارد شده یا ثبت نام کنید ...
مطالعه با تمرکز بیشتر
پست های پربازدید هفته 6 پست پربازدید در دسترس شماست!
آموزش هوش مصنوعی استیبل دیفیوژن...

آموزش هوش مصنوعی استیبل دیفیوژن...

مهسا سلطانی
دانلود اسکریپت Motion Bro v4.0.4...

دانلود اسکریپت Motion Bro v4.0.4...

مهدی فریدونی
دانلود و نصب اسکریپت motion...

دانلود و نصب اسکریپت motion...

احسان ملائی
دانلود Adobe Firefly | هوش...

دانلود Adobe Firefly | هوش...

مهدی فریدونی
میدجورنی رایگان و نحوه استفاده...

میدجورنی رایگان و نحوه استفاده...

مهسا سلطانی
جداسازی صدای خواننده از موزیک...

جداسازی صدای خواننده از موزیک...

مهدی فریدونی
دوره روتوش
دوره جامع گرافیک و ویدیو
×