Figma مقابل Sketch مقابل Axure - مراجعة قائمة على المهام

في مخطط معلومات Toptal الأخير: "أفضل أدوات UX" ، قمنا بفحص مجموعة واسعة من أدوات التصميم الرقمية في السوق ، ومعظمها قادر على المساعدة في المهام اليومية لمصمم UX الفردي.

ثلاثة من الأدوات المميزة ، Sketch ، و Figma ، و Axure ، ولدت أتباعًا مخلصين لأنهم يتفوقون في وظائف محددة ضمن سير عمل تصميم UX.

ومع ذلك ، فإن أداء هذه الأدوات يختلف باختلاف مهمة التصميم في متناول اليد . بدلاً من سرد جميع ميزاتها في جدول مقارنة ، سنحدد فعاليتها من خلال مراجعة قائمة على المهام.

فيما يلي نظرة عامة سريعة على المنافسين:

• رسم بواسطة Bohemian Coding ومقره لاهاي ، NL. Sketch هو تطبيق يعمل بنظام Mac فقط.
• Figma by Figma ومقرها سان فرانسيسكو ، كاليفورنيا. يعمل Figma على أي نظام تشغيل عبر متصفح.
• Axure من شركة Axure Software Solutions ومقرها سان دييغو ، كاليفورنيا. يحتوي Axure على إصدار Windows و Mac.

سنقوم بتسجيل كل أداة بناءً على مدى أدائها لمهام التصميم اليومية بشكل جيد - بدون المكونات الإضافية أو الوظائف الإضافية أو تطبيقات الجهات الخارجية. تشمل المهام:

1. القيام بفكر المفهوم
2. إنشاء مخرجات منخفضة الدقة
3. إنشاء مخرجات عالية الدقة
4. إنشاء نماذج تفاعلية
5. إنشاء نظام تصميم
6. التسليم من أجل التنمية

ملاحظة: عندما تحتوي الأدوات على ميزات متطابقة تقريبًا مطلوبة لإكمال مهمة ما ، سينتقل الفوز إلى الأداة الأسهل في الاستخدام وتوفر تسليمًا أسرع. إذا بدا هذا القرار قريبًا جدًا من الاتصال به ، فإن دعم الطرف الثالث هو العامل الفاصل.

المهمة: عمل تصورات المفهوم

التفكير هو عملية إبداعية لتوليد أفكار جديدة ، وعادة ما يتم إجراؤها بواسطة مجموعات متعددة التخصصات تتكون من المصممين والمطورين وأصحاب المنتجات ومديري المشاريع.

الهدف هو إنشاء أفكار جديدة لاستخدامها في منتج بعد النظر في المتطلبات الأساسية وأي عمل قيد الإنشاء بالفعل. على سبيل المثال ، قد يخضع فريق ما لجلسة تصور فكرة لإنشاء مجموعة من ميزات MVP لتطبيق جديد - أو ميزات الجيل التالي في تطبيق موجود.

يقوم العديد من المصممين بعمل أفكار مفاهيمية على السبورة البيضاء أو الورق. ومع ذلك ، يتم التفكير أيضًا رقميًا ، خاصة في المكاتب الموزعة. جيل المفاهيم هو رياضة جماعية ويتضمن غير المصممين مثل مالك / مديري المنتج ومطوري الواجهة الأمامية. الأدوات التي تعزز التعاون وسهلة الاستخدام هي الأفضل لهذه المهمة.

الفائز: فيجما

يقدم كل من Sketch و Axure خدمات المشاركة السحابية ، ولكن لا توجد طريقة لمشاركة الشاشات في الوقت الفعلي مع المتعاونين.

يمكن ضم الملفات المشتركة في Figma في الوقت الفعلي ، ويتم عرض المؤشر المسمى لكل مشارك. يؤدي النقر فوق الصور الرمزية التمثيلية في شريط الأدوات إلى تبديل طرق العرض إلى منظور ذلك الشخص ، مما يسهل مشاركة الفكرة بسرعة. بالإضافة إلى ذلك ، لا تتطلب Figma من غير المصممين امتلاك نسخة ؛ يفتحون رابط الملف ويبدأون العمل.

قد تكون أدوات التعاون الأخرى على السبورة البيضاء مناسبة بشكل أفضل لتصور المفاهيم من Figma ، مثل Mural و Realtimeboard ، ولكن بالنسبة لأداة التصميم ، فإن Figma أفضل من Sketch و Axure بمقدار ميل.

المهمة: إنشاء مخرجات منخفضة الدقة

عادةً ما يتم إنتاج مخرجات Lo-fidelity كإطارات سلكية أو رسومات رقمية يمكن توزيعها ومراجعتها من قبل المصممين الآخرين ومالكي المنتجات. اعتمادًا على عملية UX ، يمكن أيضًا عرضها من قبل المطورين وأصحاب المصلحة الآخرين.

تهدف Wireframes إلى إظهار البنية الأساسية للتطبيق بحيث يمكن تحديد نموذج التفاعل قبل قضاء الوقت في إنشاء نماذج بالأحجام الطبيعية عالية الدقة.

يمكن إنشاء إطارات سلكية منخفضة الدقة باستخدام أدوات مخصصة خصيصًا لهذه المهمة ، بما في ذلك نماذج Balsamiq Mockups و Moqups و FluidUI. ومع ذلك ، يمكن أن يقوم كل من Sketch و Axure و Figma بنفس المهمة ، خاصةً عندما يقوم المستخدمون بإنشاء مكتبات مكون سلكي.

نظرًا لأن الإطارات الشبكية تعمل عادةً كتخطيط أولي لواجهة المستخدم لتطبيق أو صفحة ، فهي عبارة عن قطع خشنة أحادية اللون تتغير كثيرًا. هذا يساعد على إبقاء توقعات أصحاب المصلحة تحت السيطرة.

بالنسبة للإطارات السلكية ، تعد سهولة الاستخدام وسرعة التسليم والتعديل ضرورية لأنها تتيح للمصممين إنتاج تصميمات مختلفة بكفاءة.

الفائز: المحور

يفوز Axure هنا لأنه يحتوي على مكونات معبأة مسبقًا للهياكل السلكية فور تثبيت البرنامج. يحتوي Sketch و Figma على الأدوات التي تتيح لك إنشاء إطارات سلكية ، لكنك تحتاج إما إلى رسم مكون إطار سلكي أو تنزيل ملف يحتوي عليها. في كلتا الحالتين ، يجب دمجها في مكتبة رمز (رسم) أو مكون (Figma) ليتم سحبها وإسقاطها مثل مكونات المحور.

يحتوي Axure على العديد من مكتبات الجهات الخارجية لإنشاء مخرجات منخفضة الدقة ، ويحتوي Sketch على العديد من الملفات المجانية والمدفوعة التي يمكن تنزيلها ، بينما لا تزال موارد Figma العامة وليدة.

بمجرد أن ينشئ المصمم مكتبات مكونة للإطار الشبكي ، تتم مطابقة الأدوات الثلاث بشكل متساوٍ. لاحظ أن مكونات Axure تمتلك خصائص بارامترية وقابلة للتعديل ، ولكن بالنسبة للإطارات السلكية الثابتة ، تعمل الأدوات الثلاثة بشكل جيد عندما تكون المكتبات متاحة.

المهمة: إنشاء مخرجات عالية الدقة

تنشأ المخرجات عالية الدقة من التعليقات والمعرفة التي تم جمعها من الإطارات السلكية منخفضة الدقة. إنها نماذج بالأحجام الطبيعية تعرض الألوان والتفاصيل المرئية والتصميمات النهائية المقترحة للتطبيق.

تعني الدقة العالية أيضًا نماذج بالحجم الطبيعي للشاشة جاهزة للعرض التقديمي ويتم عرضها للعملاء والمديرين التنفيذيين الداخليين وأصحاب المصلحة الآخرين من غير المصممين. تحتوي أدوات التصميم التي تتفوق في هذه المهمة على جميع الميزات اللازمة لإضافة الصقل المطلوب لإنشاء تمثيل للتسليمات النهائية التي تواجه العملاء.

يتضمن ذلك التحكم في تعبئة الكائن والحدود ، وإضافة تأثيرات مثل الظلال وتعبئات التدرج وتصدير الفن إلى تنسيق سهل الهضم (png ، pdf ، jpg).

الفائز: فيجما

يحتوي Sketch و Figma على مجموعات أدوات متطابقة تقريبًا يمكنها إنشاء نماذج بالأحجام الطبيعية عالية الدقة ، لكن نموذج تفاعل Figma أكثر دقة والأداة أسهل في الاستخدام من البداية. تتمتع كلتا الأداتين بسهولة الوصول إلى أوامر التحرير المتقدمة والأوامر المنطقية مثل Join و Intersect و Union و Subtract. بينما يسمح دعم المكون الإضافي لـ Sketch للأطراف الخارجية بإنشاء ميزات إضافية ، إلا أن هذه الأدوات لا تتوفر على الفور بعد التثبيت.

تحتوي جميع الأدوات الثلاثة على ميزات تسمح بإنشاء كائن مخصص ، لكن Axure يجعل من الصعب إلى حد ما الوصول إلى الأوامر. التعديلات المذكورة أعلاه غير متوفرة على شريط الأدوات. يتم الحصول على الوصول فقط من خلال قائمة السياق عند تحديد كائنات متعددة.

بالإضافة إلى ذلك ، تجعل شبكات المتجهات في Figma العمل مع أدوات الخط نسيمًا.

المهمة: إنشاء نماذج أولية تفاعلية

يمكن أن تكون النماذج الأولية التفاعلية بدائية مثل النموذج الأولي للورق أو مفصلة كنسخة متفرعة من تطبيق حالي تم تعديله لاستكشاف ميزات جديدة. عادةً ما تسمح النماذج الأولية التفاعلية للمستخدمين بالانتقال من شاشة إلى أخرى واستخدام وظائف مثل القوائم والقوائم.

بالنسبة للعديد من المصممين ، سيكون عرض الشرائح التفاعلي الأساسي كافياً عند تقديم عملهم. ينطبق هذا بشكل خاص على تطبيقات الأجهزة المحمولة نظرًا لأن الانتقالات البسيطة توفر تفاعلًا كافيًا مع الجهاز لشرح التصميم.

نموذج النماذج الأولية لـ Figma مدمج جيدًا وسهل الاستخدام ، ولأنه تطبيق قائم على السحابة في الوقت الفعلي ، فلا داعي لتحديث صفحات HTML عند تحديث الملف.

من حين لآخر ، يريد أصحاب المصلحة اتصالات البيانات الحية لتحميل نموذج أولي ببيانات العالم الحقيقي من أجل اختبار قابلية التوسع في التصميم ، لكن الغالبية العظمى من المصممين ليس لديهم الآن حاجة كبيرة لنماذج أولية معقدة.

الفائز: فيجما

يدعم كل من Sketch و Figma النماذج الأولية البسيطة مع ارتباط "كائن إلى لوح الرسم" ومجموعة محدودة من الانتقالات. تساعد المكونات الإضافية في تعزيز قدرات النماذج الأولية البسيطة لـ Sketch ، ولكن Axure هو الأقوى عندما يتعلق الأمر بتوفير نموذج تفاعل قوي للنماذج الأولية.

المهمة: إنشاء نظام تصميم

على الرغم من أن أنظمة التصميم جديدة نسبيًا في مجال تصميم UX ، إلا أنها كانت موجودة منذ عقود. وهي تتضمن لغة تصميم مشتركة ومكونات وموارد وإرشادات تمكن الفرق من التعاون واتخاذ قرارات أفضل. عادةً ما يتم تنفيذ مكتبة نظام التصميم كموقع ويب وتعمل كمصدر وحيد للحقيقة لمنتج عبر شركة بأكملها.

الفائز: فيجما

بينما يمكن إنشاء مكتبات المكونات في أي من البرامج ، لا يسمح أي منها للمصممين بقلب المفتاح وإنشاء مكتبة مكونات قابلة للتطبيق في البداية. يمكن لـ Axure إنشاء صفحة HTML بها مكونات مخصصة ، ولكن لا توجد طريقة للاستعلام عن المكون الفردي لمعرفة قيمة اللون والحجم والخصائص الأخرى.

لا يزال بناء نظام تصميم باستخدام أي من هذه الأدوات عملية يدوية. ومع ذلك ، هناك مكونات إضافية لـ Sketch (مثل المكون الإضافي Material Design الذي تم إصداره مؤخرًا من Google) وأداة خارجية واحدة على الأقل في أعمال Figma.

تحقق Figma الفوز لأن التعاون هو جوهر نظام التصميم الجيد. يحتاج موظفو الشركة من العديد من التخصصات (التصميم والتطوير والجودة والمحتوى) إلى الوصول إلى مكتبة نظام التصميم ، وسيضيف العديد منهم إلى ملف مكون التصميم الذي يتزامن مع المكتبة المشتركة. يمكن لأي شخص استخدام Figma ، وليس مجرد حامل ترخيص ، مما يجعل الوصول إلى ملف مشترك والإضافة إليه أمرًا غير مؤلم.

المهمة: تحقيق التنمية

عندما ينتهي مصممو واجهة المستخدم من إنشاء واجهة ، فإن مسؤوليتهم هي تسليم ملفات التصميم إلى المطورين بحيث يمكن إكمال المشروع. لكن التسليم هو أكثر من مجرد تبادل بيانات بسيط ، إنه فرصة للمصممين لتوصيل الأساس المنطقي لعملهم وبالتالي مساعدة المطورين على التزاوج بين الشكل والوظيفة.

هناك العشرات من طرق التسليم والمزيد من أدوات الجهات الخارجية لتسهيل إعادة التحديد واستعلامات معلومات الكائن من ملفات Sketch و Figma (انظر Avocode و Zeplin). ومع ذلك ، في هذه المقارنة ، فإننا ننظر إلى أداة التصميم الأصلية قبل استكمالها بمكونات إضافية أو تطبيقات أخرى.

ومن المثير للاهتمام ، أن ظهور أنظمة تصميم UX يخفف من الحاجة إلى هذا النوع من التسليم ، حيث أن مكتبات المكونات المنشورة هي المصدر الوحيد للحقيقة بالنسبة للمطور. يمكنهم استخراج معلومات التخطيط والتصميم الدقيقة للمكونات دون انتظار استشارة التسليم أو تجربة المستخدم.

أيضًا ، يمكن أن يكون الحصول على معلومات من الكائنات في ملف التصميم مفيدًا أثناء إنشاء نظام التصميم ، لذا فإن بعض طرق عرض CSS يعد أمرًا جيدًا.

يتيح لك Sketch تحديد الكائنات واستخدام قائمة سياقية لـ "Copy CSS Attributes" ولكنها ليست مثالية. تقوم Figma بعمل عادل من خلال توفير علامة تبويب "Code" في لوحة الخصائص التي تنتج قيم CSS أو iOS أو Android للكائنات المحددة (يمكن للمطورين استخدام هذه الميزة في وضع العرض فقط أو وضع النموذج الأولي).

الفائز: المحور

في هذا الوقت ، لا يمتلك سوى Axure "مولدات" قوية تنتج ملفات HTML قابلة للنشر بالكامل ، ومواصفات Word ، وحتى تقارير بتنسيق CSV للاستيراد إلى جدول بيانات. في حين أن النتائج ليست مكتبة تصميم ، فإن التطبيق يوفر مواد تسليم مفيدة للمطورين.

الفائز في أداة التصميم الشاملة: Figma

بالأرقام ، فإن Figma هو الفائز في هذه المقارنة ، ويرجع ذلك أساسًا إلى طبيعتها التعاونية وتوافرها عبر الأنظمة الأساسية. نظرًا لأن المزيد من الفرق تستخدم أنظمة التصميم التي تتطلب تكاملًا أكثر إحكامًا عبر التطوير والتصميم للواجهة الأمامية ، فإن ميزة التعاون في الوقت الفعلي وميزة التضمين المباشر في Figma تمنحها ميزة كبيرة. على الجانب السلبي ، فإن Figma هو تطبيق عبر الإنترنت قد يُحظر استخدامه في مؤسسة لأسباب أمنية.

تحتل Axure المرتبة الثانية نظرًا لقوتها خارج منطقة الجزاء مع المكونات المبنية مسبقًا وميزات النماذج الأولية التفاعلية القوية وإنشاء المستندات. في الحالات النادرة التي تحتاج فيها الشركة إلى الوصول إلى مخازن البيانات الواقعية لمعرفة كيف تتصرف ميزة معينة ، فإن Axure هو الخيار الأفضل أو الوحيد.

قد يكون Sketch أخيرًا ، ولكن بمجرد أن يستفيد المستخدمون من العديد من المكونات الإضافية والموارد المتاحة للأداة ، يكون قويًا للغاية ويمكن تخصيصه لتلبية احتياجات مجموعة التصميم. التحذير هنا هو أنه يجب تحديث المكونات الإضافية بعد كل تحديث لـ Sketch ، وكتطبيق لنظام Mac فقط ، لا يمكن للشركات التي تستخدم أجهزة الكمبيوتر التي تعمل بنظام Windows استخدامها.

جميع الأدوات الثلاثة التي تمت مراجعتها في هذه المقالة قوية في حد ذاتها. ومع ذلك ، كل منها له حدود. يعود الأمر إلى المصممين الفرديين والفرق لتحديد احتياجات سير العمل الخاصة بهم ، والموازنة بين إيجابيات وسلبيات كل برنامج ، واتخاذ القرار المناسب.

مزيد من القراءة على مدونة Toptal Design:

• تخلص من MVPs ، واعتمد الحد الأدنى من النماذج الأولية القابلة للتطبيق (MVPr)
• قوة Figma كأداة تصميم
• كيفية إنشاء دليل نمط الرسم والمكتبة ومجموعة واجهة المستخدم
• فهم أنظمة وأنماط التصميم
• الموت للهيكل السلكي. مباشرة إلى الدقة العالية!