() translation by (you can also view the original English article)
التعاون بين المصممين والمطورين أساسي لنجاح أي مشروع ويب، ومعيار لنجاح الفريق. في حين أن مشاركة نفس حيز العمل لا يقدر بثمن، فإن امتلاك مصدر متصل بالإنترنت للبيانات التي تساعد في هذا التعاون شيء مفيد بشكل لا يصدق. في هذا المقال، سنلقي نظرة على Zeplin وكيف يعمل بالاشتراك مع Sketch للجمع بين أفراد الفرق جنبًا إلى جنب.
كلمة سريعة عن Sketch
منذ حوالي ستة أشهر، حينما غيرت عملي، شجعوني على تجربة Sketch. الشيء الرائع في هذا البرنامج أنه يركز بشكل خاص على تصميم الواجهة والأيقونات؛ من ألواح الرسم - Artboards ذات الأحجام المخصصة للويب والجوال والأيقونات إلى الميزات التي تساعد على تحسين عملية التصميم؛ Sketch لا غنى عنه بالنسبة للمصممين.
بالإضافة إلى ذلك، فإن منحنى التعلم إن كنت مستخدمًا متوسط المستوى لفوتوشوب أو إليستريتور يكاد يكون معدومًا.
إليك بعض الأمثلة التي تمنحك نظرة عامة حول ما تستطيع فعله باستخدام Sketch:
.png)
.png)
.png)
- أنشئ صفحات لتنظيم المحتوى الخاص بك (على سبيل المثال: تصميمات الجوال، تصميمات سطح المكتب) وألواح رسم داخل هذه الصفحات لإنشاء نموذج للتعريف بمنتجك (على سبيل المثال: أنشئ جولة إرشادية للعميل خطوة بخطوة).
- استخدم الـ Inspector لإيجاد كافة التفاصيل المتعلقة بعنصرمحدد (الحجم والموضع والألوان وأنماط الخطوط والتعتيم وأكثر من ذلك بكثير).
- استخدم ميزة الـ Export لتصدير ألواح الرسم أو العناصر الفردية إلى صيغ محددة للملفات (PNG وJPG وPDF وهكذا).
"أنا مطور، لم أستخدم Sketch أبدًا!"
في السنوات الأخيرة، تعلم المصممون التعاون فيما بينهم باستخدام أدوات مثل InVision، لكن هذه المنصة مازالت تفتقر إلى ميزات تسمح بتسليم التصميم بسرعة إلى فريق التطوير.
لا ينبغي أن نطلب من المطورين أن يتقنوا استخدام نفس الأدوات التي يستخدمها المصممون في تصميم المنتجات. ومع ذلك، ينبغي ألا نطلب من المصممين الابتعاد عما يبرعون فيه: التصميم! إنشاء "وثيقة مواصفات" في كل مرة يُسلم فيها تصميم بعيد كل البعد عن "الرشاقة"، وقد يعني إهدار الكثير من الوقت بين تسليم التصاميم والاضطرار إلى تكرار ذلك إذا لزم الأمر.
Zeplin
هنا يبدأ الكلام عن Zeplin.
Zeplin هو أداة تعاون لمصممي واجهة المستخدم ومطوري الواجهة الأمامية، لا تقتصر على تسيير عمل التصاميم بل وتساعد الفرق في تسليمها.
ويسمح للمصممين برفع الأطر - Wireframes والتصاميم المرئية مباشرة من Sketch وإضافتها إلى مجلدات المشروع في Zeplin. أفضل شيء، صحيح؟ ستتم إضافة التعليقات التوضيحية تلقائيًا إلى التصاميم (الأحجام والألوان والهوامش وحتى اقتراحات CSS لعناصر معينة) والتي ستتركك مع مستودع عبر الإنترنت يمكن للفريق بأكمله المساهمة فيه.
"يعمل Zeplin بشكل ممتاز كمصدر وحيد للبيانات، حين يُستخدم على هذا الأساس.أيضًا، نظرًا لأنه متوفر كتطبيق مستقل بالإضافة إلى تطبيق ويب، يمكنك الوصول إليه في أي مكان تقريبًا، مما يجعل من السهل تفقد التصاميم وأشياء كالمسافات والأحجام والألوان وما إلى ذلك." - دانيال سيتاس بونتيس، مطور جافاسكريبت @NOW TV, SKY
تصدير التصاميم من Sketch إلى Zeplin
يعمل Zeplin كمكون إضافي بداخل Sketch، لذا فإن رفع التصاميم يتم بنقرة واحدة.
إليك كيفية بدء مشروع:
.png)
.png)
.png)
- حمّل تطبيق Zeplin (متاح لنظام الماك فقط) وثبته. لن يحتاج المطورون إلى العمل على نظام التشغيل OS X لأنهم يحتاجون فقط إلى الوصول إلى إداة الويب ليصلوا إلى المحتوى.
- أنشئ مشاريع.
- اختر النظام الأساسي الذي قمت بالتصميم له.
- قم بتسمية المشروع (تأكد من اختيار اسم مألوف للفريق بأكمله).
.png)
.png)
.png)
داخل Sketch، حدد عناصر فردية واجعلها قابلة للتصدير، سيسمح هذا لفريق التطوير بتصدير كل عنصر فيما بعد من داخل Zeplin. إليك كيفية عمل هذا:
.png)
.png)
.png)
- بعد ذلك، حدد ألواح الرسم التي تريد رفعها إلى Zeplin.
- انتقل إلى المكونات الإضافية > Zeplin > تصدير ألواح الرسم المحددة.
- حدد المشروع الذي تريد رفع تصاميمك إليه، ثم اضغط استيراد.
العمل داخل Zeplin
بمجرد دخولك إلى Zeplin، يمكنك التنقل بين المشاريع واستكشاف كافة مكوناتها بسهولة. استخلاص مواصفات عناصر معينة شيء بديهي أيضًا؛ حدد العنصر الذي تريده، ثم ستظهر كافة المعلومات ذات الصلة في العمود على الجانب الأيمن.
.png)
.png)
.png)
المطورون: إليك كيفية عمل ذلك، بمجرد فتح أداة الويب وتسجيل الدخول:
- حدد العنصر الذي تريد فحصه.
- انظر إلى العمود الموجود على الجانب الأيمن للحصول على معلومات تفصيلية مثل أنماط الخط واللون وما إلى ذلك (سيتم عرض المعلومات وفقًا للعنصر الذي تحدده).
- انسخ كود CSS المقترح.
.png)
.png)
.png)
إذا سمح فريق التصميم بالعناصر القابلة للتصدير عند استيراد التصاميم إلى Zeplin، ينبغي أن يكون فريق التطوير قادرًا على تصدير الأصول الفردية، ستكون الأصول متاحة للتنزيل بصيغة SVG وثلاثة أحجام PNG مختلفة.
.png)
.png)
.png)
- هنا يمكنك إضافة ملاحظات وتعليقات إلى التصاميم.
- هنا يمكنك نسخ رابط المشروع ومشاركته، وربما حتى دمجه مع قناة سلاك - Slack التابعة للفريق للحصول على الإشعارات أو دعوة أعضاء الفريق للتعاون!
لماذا ينبغي على فريقك التحرك
العمل بواسطة Zeplin له العديد من المزايا، إليك بعض الأمثلة:
- سوف تتجنب إنشاء وثيقة موصفات؛ وهو أمر ليس رشيقًا ولا سهل التحديث.
- إنشاء تصاميم فورية مذيلة بالتعليقات التوضيحية تحتوي على جميع المعلومات ذات الصلة للمطورين والمصممين الآخرين.
- يمكنك إنشاء تصاميم قابلة للتصدير ليتسنى للمطورين الوصول السريع إلى الأصول الفردية.
- أنشئ العدد الذي تريد من المشاريع، ثم ارفعها وحدثها ببضعة نقرات فقط.
- أنشئ دليلًا إرشاديًا للنسق يساعد الفريق على الحفاظ على تناسق التصميم.
- الاستفادة من دمج سلاك، وإبلاغ فريقك على الفور بكل تحديث.
جرّب!
العمل بواسطة Sketch وZeplin طريقة رائعة لتعاون المصممين بسلاسة مع المطورين. يحب فريقي العمل بهذه الطريقة - وأحب أن أسمع أفكاركم وخبراتكم في العمل باستخدام هذه الأدوات!
روابط مفيدة
- مكونات Sketch الإضافية
- دورات تعليم Sketch على إنفاتو توتس بلس
- قوالب موقع مصممة باستخدام Sketch على سوق إنفاتو
-
zeplin_io@ على تويتر
-
zeplin.io
