Zeplin Sketch Plugin - جسر سير العمل بين التصميم والهندسة

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

لماذا زيبلين؟

جزء أساسي من أي لغز تطوير منتج هو المكان الذي يلتقي فيه التصميم مع التطوير. عندما يكون التصميم جاهزًا للانتقال إلى مرحلة التطوير ("التسليم") ، يحتاج المهندسون إلى طريقة لفهمه وترجمته إلى رمز.

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

قل وداعا لأيام "redlining". يركز Zeplin بشكل بحت على تحسين التعاون بين مصممي المنتجات وفرق التطوير ويتم استخدامه من قبل فرق المنتجات الرائدة في Airbnb و Dropbox و Pinterest و Microsoft والعديد من الآخرين.

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

في إحدى مقالاتنا السابقة ، تحدث Toptal Designer Micah Bowers عن أهمية وجود نظام لغة تصميم موحد من أجل التواصل بكفاءة عبر الوظائف المختلفة لفرق المنتجات التي تعمل على المنتجات الرقمية.

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

نحن نعتبر Zeplin أساسًا مصدر الحقيقة لدينا للتعاون مع الهندسة. إذا لم يكن في Zeplin ، فهو ليس رسميًا. - جيسون ستوف ، مصمم أول ، Digital ProductsStarbucks

قيود Zeplin

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

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

العمل مع Sketch و Zeplin: خطوات ونصائح

1. ابدأ مع Zeplin.

• قم بإنشاء حساب Zeplin إذا لم يكن لديك حساب بالفعل. يمكنك التسجيل مجانًا: https://app.zeplin.io/register
• قم بتنزيل تطبيق Zeplin لسطح المكتب لنظام التشغيل Mac أو Windows.
• قم بتنزيل ملحق Zeplin لـ Sketch.

2. قم بإعداد ملف Sketch الخاص بك.

• الآن بعد أن أصبح لدينا Sketch و Zeplin جاهزين للعمل ، سنقوم بإعداد ملف Sketch لتصدير سلس إلى Zeplin.
• في Sketch ، قم بتنظيم أصولك وطبقاتك باستخدام اصطلاحات تسمية متسقة. إذا كنت تتعاون مع مصممين آخرين ، فحدد الاصطلاحات التي تناسب كل فرد في فريقك. اعتمادًا على نوع المشروع (على سبيل المثال ، iOS أو Android أو الويب) ، ستقوم Zeplin تلقائيًا بضبط اصطلاح تسمية الأصول ، مما يجعل تصديرها عملية من خطوة واحدة.
• قم بإنشاء رموز للعناصر والأصول المشتركة داخل Sketch. سيسمح لك ذلك بإعداد المكونات في Zeplin.
• احفظ الألوان في لوحة "ألوان المستند" والخطوط باسم "أنماط النص" في ملف الرسم. ستظهر هذه في دليل الأسلوب الذي تم إنشاؤه بواسطة Zeplin.

3. جعل الأصول قابلة للتصدير في سكتش.

• هذه خطوة غي غاية الأهمية. بمجرد تجميع الأصول الخاصة بك في رموز ، افتح صفحة الرموز في ملف Sketch الخاص بك.
• انقر فوق مجموعة داخل رمز ، مثل "قائمة ic" (رمز المجلد)
• مع تمييز المجموعة ، حدد موقع الإجراء "Make Exportable" في الجانب الأيمن السفلي من "المفتش" في Sketch وانقر فوق هذا الخيار. يجب أن يظهر رمز الشريحة الآن بجوار اسم مجموعتك.
• ستسمح هذه الخطوة للمهندسين بتصدير الأصول مباشرة من Zeplin.

4. إنشاء مشروع جديد في Zeplin.

• حدد نوع المشروع الذي تقوم ببنائه. لاحظ أنه يجب أن يكون لديك مشاريع منفصلة لنظامي التشغيل iOS و Android ، حتى لو كانت التصميمات متطابقة. هذا لأن Zeplin ستنشئ كودًا مختلفًا بناءً على نوع المشروع.
• حدد دقة المشروع التي تتوافق مع لوحات الرسم التخطيطية (على سبيل المثال ، 1x ، 320 بكسل).

5. تصدير لوحات الرسم التخطيطي إلى Zeplin.

• من Sketch ، قم بتمييز جميع اللوحات الفنية التي ترغب في تصديرها إلى Zeplin.
• انتقل إلى الإضافات> Zeplin> تصدير المحدد ... أو اضغط على ⌃⌘E على لوحة المفاتيح.
• بعد ذلك ، سنقوم بتصدير الرموز من Sketch. افتح صفحة الرموز في Sketch وقم بتمييز كل ألواح الرسم. تصدير إلى Zeplin.

6. تنظيم المشروع في Zeplin.

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

7. استخدام المكونات في Zeplin.

ربما تكون إحدى ميزات Zeplin المفيدة هي القدرة على تنظيم الأصول في مكتبات مكونة. هذا مهم عندما يتم تطوير تصميمات المشروع لمنصات متعددة بواسطة أعضاء فريق مختلفين. يعد توحيد التصميم أمرًا ضروريًا ، كما أوضح مصمم Airbnb Karri Saarinen في بناء لغة مرئية:

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

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

8. أدلة أسلوب التصدير من Zeplin.

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

9. علق تصميماتك في Zeplin.

• تعد إضافة الملاحظات إلى التصميمات أمرًا سهلاً مع Zeplin. من العرض التفصيلي للشاشة ، حدد رمز إضافة ملاحظة وقم بتثبيت ملاحظتك في أحد المكونات.
• يمكنك إضافة ملاحظة عن طريق الضغط باستمرار على Cmd ( Ctrl لمستخدمي Windows و Linux) والنقر في أي مكان على الشاشة.
• يمكنك أيضًا ذكر زملائك في الفريق باستخدام "@" وسيتلقون إشعارًا بذلك.

10. التعاون والمشاركة واستخدام التحكم في الإصدار.

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

خاتمة

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

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

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

يجب على المصممين الراغبين في أن يكونوا فعالين ويعتمدون على "مصدر حقيقة" واحد أن يأخذوا في الاعتبار مخطط سير العمل من Sketch to Zeplin الموضح أعلاه. ستساعد القوة الكامنة وراء علاقة البرنامج القوية بين أداتي التصميم هاتين المصممين وفرق التطوير على الوصول إلى خط النهاية بسهولة ورضا أكبر.

• • •

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

• Adobe XD مقابل Sketch - ما أداة UX المناسبة لك؟
• كيفية بناء إطار تصميم فعال (بما في ذلك إطار عمل مجاني لواجهة مستخدم Sketch)
• أشياء قد لا تعرفها عن الطباعة في Sketch
• التعرف على تطوير البرنامج المساعد Sketch
• إنشاء رسوم توضيحية محيرة للعقل باستخدام Sketch و Looper في لمح البصر