Dev Mode والتسليم للمطوّرين

يفتح مطوّر ملف Steady لأول مرة. دون مساعدة، يواجه ستين frame، وثلاث محاولات استكشافية لشاشة Today، وصفحة اسمها Scratch، وعليه أن يخمّن أيّ نسخة هي الحقيقية، وماذا يحدث حين يكون الاسم أطول من اللازم، وهل ذلك التركوازي token أم استثناء لمرة واحدة. كل تخمين يصبح خطأً، أو نقاشًا على Slack، أو كليهما.

التسليم (handoff) هو إزالة هذه التخمينات. معظمه أنجزته بالفعل: الطبقات المسمّاة، والـ Auto layout، والـ components بخصائصها، والـ variables. هذا الدرس يضيف الطبقة الأخيرة.

نظّم الملف من أجل قارئه

قبل أي شيء آخر، اجعل الملف سهل التصفّح لشخص لم يكن حاضرًا:

• انقل المحاولات الاستكشافية خارج صفحة Screens. يجب ألّا يرى المطوّرون إلا ما سيُبنى.
• جمّع الشاشات في sections حسب المسار: “Check-in” و"Add habit" و"Habit detail". ورتّب كل مسار من اليسار إلى اليمين بالترتيب الذي يتنقّل به الناس.
• أضف الحالات، لا المسار المثالي فقط: شاشة Today الفارغة (“No habits yet”)، وعادة بـ streak من 1,000 يوم، وحالة الخطأ في حقل النص، وحالة التحميل في Habit detail.
• امنح كل section وصفًا من سطر واحد في أعلاه: ما الغرض من المسار، وأيّ أسئلة مفتوحة.

Ready for dev

حين يستقرّ مسار ما، حدّد الـ section الخاص به وعلّمه Ready for dev. وقت كتابة هذا الدرس، يمكنك فعل ذلك على الـ sections والـ frames والـ components، وهو متاح في الخطط المدفوعة.

الحالات إشارة لا قفل. إذا عدّلت تصميمًا بعد تعليمه جاهزًا، يعلّمه Figma تلقائيًا بـ Changed، فيعرف المطوّرون أن عليهم النظر مجدّدًا، ويستطيعون مقارنة النسخة الحالية بالنسخة التي عُلّمت جاهزة. وحين تنتهي من تغييره، تعلّمه بأن تغييراته اكتملت ويمكنك إضافة ملاحظة قصيرة. وفي خطتي Organization وEnterprise توجد أيضًا حالة Completed للتصاميم التي بُنيت.

ما يراه المطوّرون في Dev Mode

ينتقل المطوّرون إلى Dev Mode بمفتاح التبديل في شريط الأدوات أو بـ Shift+D. ويحتاج خطة مدفوعة ومقعد Full أو Dev وقت كتابة هذا الدرس. تحديد طبقة يعرض لوحة inspect الخاصة بها:

• القياسات والتخطيط: الأحجام والـ padding وقيم الـ gap، مع وصف الـ Auto layout بمصطلحات قريبة من CSS flexbox.
• الـ Variables بأسمائها: تظهر تعبئة زر التعليم على أنها color/action/primary مع قيمتها، والـ padding على أنه space/4. وإذا ضبطت صيغة الكود (code syntax) على الـ variables (الدرس 3.3)، يرى المطوّرون اسم الـ token الدقيق الذي يستخدمه كودهم.
• الـ Components وخصائصها: الـ component الخاص بالـ instance، وقيم الـ variant والخصائص، ووصف الـ component الذي كتبته في الدرس 3.5.
• مقتطفات الكود: كود CSS وiOS وAndroid مولَّد، نقطة بداية لا كود إنتاج. وفي خطتي Organization وEnterprise، تستطيع الفرق ربط كود الـ components الحقيقي عبر Code Connect فيعرض المقتطف الـ component الخاص بها بدلًا من ذلك.
• الأصول (Assets): الأيقونات والصور المعلَّمة للتصدير، قابلة للتنزيل بالصيغة المناسبة.

هنا يؤتي كل الانضباط السابق ثماره. الـ component ذو الطبقات المسمّاة والـ variables المرتبطة يُقرأ كمواصفات؛ أما الـ frame المفصول برموز hex خام فيُقرأ كأحجية.

دوّن ما لا تستطيع البكسلات قوله

بعض الأشياء غير مرئية في frame ثابت. الملاحظات التوضيحية تضعها مباشرة على التصميم. اضغط Shift+T (أو استخدم أداة الملاحظات)، وحدّد طبقة واكتب ملاحظة، أو ثبّت خاصية لتبقى ظاهرة. وقت كتابة هذا الدرس، للملاحظات فئات مثل Development وInteraction وAccessibility وContent، ويستطيع المطوّرون التصفية بها. والقياسات (Shift+M) تثبّت المسافات على لوحة العمل.

في Steady، دوّن:

• قواعد المحتوى: أسماء العادات تلتفّ إلى سطرين، ثم تُقصّ بعلامة حذف؛ والـ streaks فوق 999 تُعرض “999+”.
• السلوك: النقر على زر التعليم يعلّم العادة منجزة لليوم؛ ويمكن التراجع عن ذلك حتى منتصف الليل.
• إمكانية الوصول: الـ accessible names لأزرار الأيقونات، وترتيب التركيز في لوحة New habit، ومساحة النقر 44 × 44، والبديل عند تقليل الحركة.
• الحالات الحدّية للبيانات: كيف تبدو القائمة الفارغة والتحميل الفاشل، مع الإشارة إلى الـ frames التي تعرضها.

لقد صمّمت Steady، وحوّلته إلى نظام، وصنعت له prototype، وفحصته، وسلّمته. الدرس الأخير عن المهارتين اللتين تحوّلان هذا العمل إلى مسيرة مهنية: إدارة جلسة نقد تصميمي، ورواية القصة في دراسة حالة.