Adobe XD vs Sketch - Showdown 2020

يواصل متنافسان من الوزن الثقيل معركتهما للاستيلاء على المركز الأول لأداة التصميم الأكثر تفضيلًا: Adobe XD vs Sketch. ما الأداة التي ستحكمهم جميعًا؟ الجواب ليس بسيطا. نظرًا لأن كلاهما قد أحرز تقدمًا غير عادي في السنوات الأخيرة ، فقد حان الوقت لإجراء مقارنة شاملة لأدوات التصميم بشأن الميزات والأداء وسهولة الاستخدام.

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

في عام 2016 ، رفعت Adobe من حدة المنافسة وانطلقت في المعركة. لم يكتفوا بمطابقة Sketch مع ميزات مماثلة في XD ، بل جعلوه متاحًا على Windows. نظرًا لأن ما يقرب من 78٪ من أجهزة كمبيوتر سطح المكتب في العالم تعمل بنظام Windows ، فقد كانت هذه خطوة تنافسية جريئة.

كما ملأ Adobe XD فجوة كبيرة في تشكيلة Creative Suite. تم منح Fireworks المصافحة الذهبية ، ولم تكن الميزات التي يوفرها XD متاحة في تطبيقات أخرى مثل Illustrator أو Photoshop. XD ليس فقط هو نفس أداة التصميم خفيفة الوزن والقائمة على المتجهات مثل Sketch ، بل إنه يتكامل أيضًا بشكل أفضل مع بقية نظام Adobe Creative Suite البيئي.

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

دعنا نتعمق ونقارن الميزات التالية في Adobe XD مقابل Sketch:

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

واجهة المستخدم

على الرغم من أن Sketch و Adobe XD يشتركان في واجهة مماثلة ، إلا أن واجهة مستخدم Sketch تتميز بميزة تفوق XD . يبدو الأمر أشبه بأداة تصميم احترافية وقوية ، في حين أن XD تبدو وكأنها مزيج بسيط من Illustrator و Photoshop.

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

➠ +1 to Sketch لواجهته البديهية.

العمل مع الرموز / المكونات الرئيسية

تتوفر "رموز" مكتبة التصميم القابلة لإعادة الاستخدام في كل من Sketch و Adobe XD (يطلق عليها اسم "المكونات الرئيسية" في XD). عند تحديث رمز أو مكون رئيسي ، تعكس جميع المثيلات الأخرى لهذا المكون في المشروع التحديث.

على عكس Adobe XD ، فإن ميزة Smart Layout في Sketch تكون أكثر قوة عند العمل مع هذه المكونات الرئيسية. يسمح بمزيد من المرونة وسير العمل بشكل أسرع.

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

➠ +1 للرسم لأنه يقوم بعمل الرموز بشكل أفضل.

لوحات الأصول والمكونات

يشترك Sketch و Adobe XD في لوحات الأصول / المكونات المتشابهة مع بعض الاختلافات.

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

الرسم أقل مرونة. يعرض أصول المشروع ضمن عنصر تحكم مجزأ من ثلاثة أزرار (للرموز وأنماط النص وأنماط الألوان). باستخدام Sketch ، يمكن البحث عن المكونات ولكن ليس عبر الفئات. يقوم XD بالبحث بشكل أفضل من خلال البحث في جميع المكونات عبر جميع الأصول.

➠ +1 إلى Adobe XD لأنه يدير الأصول بشكل أفضل.

استخدام مكونات رئيسية من مكتبات أخرى

باستخدام Sketch ، يمكن للمصممين إضافة رموز رئيسية إلى اللوحات الفنية من العديد من المكتبات المرتبطة - المحلية أو المشتركة عبر الإنترنت - بسرعة وسهولة. في Adobe XD ، يمكن وضع "الأصول المرتبطة" في تصميمات من "XD cloud" - مكونات وألوان وأنماط شخصية - ولكن بسبب سير العمل المحرج هذا ، فإن Adobe XD أقل مرونة بكثير.

➠ +1 إلى Sketch لتحسين تجربة المستخدم عند العمل مع المكونات الرئيسية.

تحرير أنماط الألوان

بمجرد إضافته إلى مكتبة الأصول ، يتيح Adobe XD للمصممين تحرير أنماط الألوان ومشاهدة تغير اللون في الوقت الفعلي عبر اللوحات الفنية. في Sketch ، هناك حل بديل لتحرير الألوان بشكل عام ، لكنه ليس بديهيًا مثل Adobe XD.

➠ +1 إلى Adobe XD لتحرير أنماط الألوان بشكل أفضل.

إنشاء نظام تصميم

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

لا يوفر Adobe XD هذه المرونة.

➠ +1 إلى Sketch لإدارة أصول التصميم بسهولة.

طبقات ومكونات التحجيم

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

بالإضافة إلى ذلك ، يحتوي Sketch على ميزة Scale Layers مفيدة ( Command + K ) حيث يمكن تحجيم مجموعة من العناصر باستخدام النسب المئوية أو الأرقام مع تحديد الأصل الذي سيتم القياس منه. يقوم Sketch بتغيير حجم الطبقات المحددة ، بينما سيتم قياس سمات النمط مثل سمك الحدود وحجم الظل ونصف القطر بشكل مناسب.

ميزة أخرى مفيدة في Sketch هي القدرة على تغيير حجم العناصر في المفتش بالأرقام أو النسب المئوية. هذا يختلف قليلاً عن أمر Scale Layers أعلاه. بإلحاق الأحرف التالية بالنسب المئوية أو الأرقام - c / m، t، b، r - سيقيس Sketch العنصر المحدد من هذا الأصل. على سبيل المثال ، " 50٪ c " سيقيس العنصر المحدد بنسبة 50٪ من المركز.

• ج / م: مقياس من المركز
• t: مقياس من الأعلى
• ب: مقياس من الأسفل
• r: مقياس من اليمين

ملاحظة : لا يظهر خيار "مقياس من اليسار" لأنه السلوك الافتراضي في Sketch.

تعرف على كيفية عمل مقياس الطبقة في Sketch →

➠ +1 إلى Sketch لمزيد من التنوع والدقة عند قياس العناصر.

تكرار وتوزيع العناصر

تعد شبكة التكرار في Adobe XD ميزة سهلة الاستخدام تحول مجموعة من العناصر إلى شبكة تكرر تلك الكائنات. ربما جربها معظم المصممين عدة مرات عند استكشاف XD ، ولكن كم مرة سيستخدمها المصممون؟ ولسوء الحظ ، فإن Repeat Grid لا ينجذب إلى الطبقات ، وهو عيب كبير.

باستخدام Sketch ، من ناحية أخرى ، يمكننا الضغط باستمرار على مفتاح Option وسحب طبقة لتكرارها (اضغط مع الاستمرار على مفتاح Shift لتقييده). بعد ذلك ، يكرر Command + D العنصر عدة مرات حسب الرغبة بنفس التباعد الدقيق بين التكرارات.

علاوة على ذلك ، يعمل Sketch على تسريع سير عمل التصميم باستخدام التوزيع الذكي . يمنح المصممين مزيدًا من التحكم في إنشاء الشبكات وضبط التباعد وإعادة ترتيب الطبقات. بصرف النظر عن الأشياء الصغيرة المفيدة العديدة التي يقوم بها Smart Distribute ، فإنه يحتوي على زر "Tidy" سحري في المفتش.

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

تم إنشاء العديد من مكونات Sketch الإضافية لمساعدة المصممين في استخدام الشبكات والأدلة والتوزيع بالإضافة إلى التوزيع الذكي . هنا ثلاثة:

توزيع الطبقات • SketchDistributor • توزيع الأدلة بالتساوي

➠ +1 إلى Sketch لتكرار العناصر وتوزيعها بشكل أفضل.

أدوات التصميم سريعة الاستجابة

يحتوي كل من Adobe XD و Sketch على ميزات استجابة تلقائية مماثلة. كلاهما يسمح بالتحكم اليدوي في العرض والارتفاع الثابت لعنصر ما أثناء تثبيت العنصر بأصل معين للصندوق المحيط. يحتوي Adobe XD أيضًا على أداة ذكية "لتغيير الحجم سريع الاستجابة" تحدد تلقائيًا تغيير حجم العناصر والمجموعات - ولكنها ليست مثالية.

يحتوي Sketch على أداة ذكية سريعة الاستجابة تسمى Smart Layout . يمكن للمصممين بناء مكونات سريعة الاستجابة ، وكلما تم تعديل محتواها ، تستوعب المكونات التغيير ، مما يتيح المزيد من المرونة وسير العمل بشكل أسرع.

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

قام Adobe XD مؤخرًا بتطبيق ميزة "تغيير الحجم سريع الاستجابة" ، لكنه لا يزال متخلفًا عن Sketch.

➠ +1 إلى Sketch للحصول على ميزات تصميم سريعة الاستجابة وسهلة.

الإضافات

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

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

➠ +1 إلى Sketch للنظام البيئي الشامل للمكونات الإضافية.

النماذج

باستخدام Auto-animate ، رفع Adobe XD الحد الأقصى للنماذج الأولية. باستخدام ميزة الحركة التلقائية "الذكية" ، يمكن للمصممين إنشاء انتقالات رائعة المظهر في النماذج الأولية لتصور حركة المحتوى عبر الشاشات. يمكن لـ XD أيضًا إضافة أصوات إلى النماذج الأولية باستخدام "إجراء" جديد يقوم بتشغيل المؤثرات الصوتية وملفات الصوت الأخرى استجابةً للمحفزات.

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

من المرجح أن يشعر صانعو Sketch أن هناك العديد من الأدوات الأخرى لإنشاء نماذج أولية ذات تفاعلات دقيقة مفصلة للغاية ، مثل ProtoPie. إنه قوي ويمكنه بسهولة استيراد التصميمات من Sketch و Figma و Adobe XD.

يتسم كل من Sketch و Adobe XD بالرقبة والرقبة عندما يتعلق الأمر بتوفير تطبيقات لمعاينة النماذج الأولية على الهاتف المحمول: Sketch Mirror و Adobe XD . تقوم التطبيقات بسحب النموذج الأولي المصمم على سطح المكتب إلى شاشة الهاتف المحمول عبر كابل USB أو شبكة wifi.

➠ +1 إلى Adobe XD للانتقالات المتحركة تلقائيًا لتصور النماذج الأولية.

فريق التعاون

توفر كلتا الأداتين تعاونًا جماعيًا. يحتوي Sketch على Sketch for Teams حيث يمكن للمصممين الذين يستخدمون مساحة عمل سحابية مشتركة مشاركة الأفكار والبقاء متزامنين مع مكتبات السحابة المشتركة والتحقق من تقدم مشروعات الفريق الأخرى وترك تعليقات على التصميمات - كل ذلك في مكان واحد.

بالإضافة إلى ذلك ، يمكن لأصحاب المصلحة والمتعاونين المدعوين الذين ليس لديهم وصول إلى تطبيق Sketch عرض التصاميم وفحصها والتعليق عليها في المتصفح. تم دمج تسليم المطور أيضًا في Sketch باستخدام Sketch for Teams .

حتى كتابة هذه السطور ، يسمح الإصدار المتميز من Adobe XD للفرق بتحرير ملفات XD مع مصممين آخرين (عبر الإنترنت وغير متصل) عبر Creative Cloud ، ومشاركة الملفات للمراجعة ، وتسليم المواصفات للمطورين بسهولة. كل هذه الميزات في مرحلة تجريبية حاليًا.

➠ +1 إلى Sketch لتعاون مباشر مع الفريق.

مطور Handoff

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

➠ +1 إلى Adobe XD و +1 إلى Sketch لتسليم المطور.

التحكم في الإصدار والمكتبات المشتركة

يعد التحكم في إصدارات ملفات التصميم أمرًا ضروريًا عند العمل مع مصممين آخرين في نفس المشروع. كما أنه يسهل تعاون الفريق وتصميم التعليقات بشكل أكثر كفاءة. قام Sketch مؤخرًا بدمج هذه الميزات في Sketch for Teams . باستخدام Sketch Cloud ، يمكن للمصممين مشاركة ملفات التصميم والمكتبات التي تسهل العمل مع أنظمة التصميم في الفرق الموزعة.

يحتوي Adobe XD أيضًا على نظام إصدار ملفات سحابي مع Adobe Creative Cloud. بينما يحتفظ موقع Creative Cloud بإصدارات من ملفات XD ، فإن الرجوع إلى الإصدارات السابقة غير ممكن. للرجوع إلى إصدار سابق ، يحتاج المصممون إلى فتح الملف في Adobe XD من خلال موقع ويب Creative Cloud ثم نسخ المحتوى ولصقه في المستند الحالي. يتم أيضًا حذف إصدارات الملفات تلقائيًا بعد 30 يومًا ما لم يتم تسميتها أو وضع إشارة مرجعية عليها. بمعنى آخر ، إنها ليست عملية سلسة.

مثل Sketch ، يسهل XD أيضًا على الفرق استخدام الأصول المشتركة باستخدام Creative Cloud Libraries. يمكن للمصممين إحضار الألوان وأنماط الشخصيات والرسومات إلى XD من هذه المكتبات.

➠ +1 إلى Sketch لإصدار سهل للملفات والمكتبات المشتركة في السحابة.

الوضع الداكن

تبدو رائعة وتصاميم مميزة

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

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

تمييز وإبراز الألوان

يدعم Sketch الوضع المظلم منذ Sketch 52 (أكتوبر 2018). كما أنه يدعم تفضيلات ألوان Accent و Highlight العالمية الخاصة بـ macOS Mojave. ستتطابق الخيارات المحددة التي تم تمييزها في لوحة Layers و Inspector وفي أي مكان آخر في التطبيق مع تفضيلات النظام.

الوضع الداكن غير متوفر في Adobe XD ، ولا حتى على macOS.

➠ +1 لرسم الوضع المظلم.

الفائز في Adobe XD vs Sketch Showdown هو… Sketch

يفوز Sketch بمعركة تفوق أدوات التصميم مع تقدم كبير على Adobe XD.

في بعض السيناريوهات ، يكون الخيار واضحًا: Sketch غير متاح لنظام Windows. ميزة ملحوظة لمشتركي Adobe Creative Cloud هي أن "خطة البداية" XD تأتي مجانًا - على الرغم من أنها تأتي مع قيود كبيرة.

يجب أن يجبر تعدد استخدامات Sketch المصممين على macOS على اختيار Sketch بدلاً من XD. تتفوق الواجهة والمكونات الإضافية وميزات التعاون وأدوات التصميم سريعة الاستجابة والرموز القابلة لإعادة الاستخدام والمكتبات المشتركة والميزات المفيدة الأخرى على ميزات Adobe XD.

تجدر الإشارة إلى أن نقل ملفات التصميم من XD إلى Sketch غير ممكن . يعد الانتقال من Sketch (و Photoshop أو Illustrator) إلى XD أسهل لأن XD يمكنه فتح ملفات Sketch. قد تظهر بعض المشكلات عند استخدام المكونات الإضافية Sketch-only مثل Abstract أو InVision Craft ، ولكن يمكن تجنب ذلك بقليل من التنظيف.

يحب بعض المصممين Adobe XD لميزة الحركة التلقائية الخاصة به. إنها ميزة جذابة تجعل النماذج الأولية تبدو رائعة. ومع ذلك ، يجب على المصممين أن يضعوا في اعتبارهم أنها سمة واحدة رائعة فقط. بالنظر إلى مزايا Sketch vs XD ، فإن المقايضات لا تستحق العناء. تتوفر العديد من أدوات النماذج الأولية المتطورة التي تعمل بسلاسة مع Sketch.

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

اسمحوا لنا أن نعرف ما هو رأيك! يرجى ترك أفكارك وتعليقاتك وملاحظاتك أدناه.

• • •

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

• التصميم بدقة - مراجعة Adobe XD
• استكشاف التصميم متعدد الوسائط - برنامج تعليمي لـ Adobe XD
• الشكل والوظيفة - دليل لأفضل أدوات الهيكل الشبكي
• أتقن حرفتك باستخدام أفضل أدوات تجربة المستخدم هذه
• أفضل مجموعات مصممي UX - أمثلة ودراسات حالة ملهمة