يفتح مطوّر ملف Steady لأول مرة. دون مساعدة، يواجه ستين frame، وثلاث محاولات استكشافية لشاشة Today، وصفحة اسمها Scratch، وعليه أن يخمّن أيّ نسخة هي الحقيقية، وماذا يحدث حين يكون الاسم أطول من اللازم، وهل ذلك التركوازي token أم استثناء لمرة واحدة. كل تخمين يصبح خطأً، أو نقاشًا على Slack، أو كليهما.
التسليم (handoff) هو إزالة هذه التخمينات. معظمه أنجزته بالفعل: الطبقات المسمّاة، والـ Auto layout، والـ components بخصائصها، والـ variables. هذا الدرس يضيف الطبقة الأخيرة.
\nقبل أي شيء آخر، اجعل الملف سهل التصفّح لشخص لم يكن حاضرًا:
\nScreens. يجب ألّا يرى المطوّرون إلا ما سيُبنى.حين يستقرّ مسار ما، حدّد الـ section الخاص به وعلّمه Ready for dev. وقت كتابة هذا الدرس، يمكنك فعل ذلك على الـ sections والـ frames والـ components، وهو متاح في الخطط المدفوعة.
\nالحالات إشارة لا قفل. إذا عدّلت تصميمًا بعد تعليمه جاهزًا، يعلّمه Figma تلقائيًا بـ Changed، فيعرف المطوّرون أن عليهم النظر مجدّدًا، ويستطيعون مقارنة النسخة الحالية بالنسخة التي عُلّمت جاهزة. وحين تنتهي من تغييره، تعلّمه بأن تغييراته اكتملت ويمكنك إضافة ملاحظة قصيرة. وفي خطتي Organization وEnterprise توجد أيضًا حالة Completed للتصاميم التي بُنيت.
\nينتقل المطوّرون إلى Dev Mode بمفتاح التبديل في شريط الأدوات أو بـ Shift+D. ويحتاج خطة مدفوعة ومقعد Full أو Dev وقت كتابة هذا الدرس. تحديد طبقة يعرض لوحة inspect الخاصة بها:
color/action/primary مع قيمتها، والـ padding على أنه space/4. وإذا ضبطت صيغة الكود (code syntax) على الـ variables (الدرس 3.3)، يرى المطوّرون اسم الـ token الدقيق الذي يستخدمه كودهم.هنا يؤتي كل الانضباط السابق ثماره. الـ component ذو الطبقات المسمّاة والـ variables المرتبطة يُقرأ كمواصفات؛ أما الـ frame المفصول برموز hex خام فيُقرأ كأحجية.
\nبعض الأشياء غير مرئية في frame ثابت. الملاحظات التوضيحية تضعها مباشرة على التصميم. اضغط Shift+T (أو استخدم أداة الملاحظات)، وحدّد طبقة واكتب ملاحظة، أو ثبّت خاصية لتبقى ظاهرة. وقت كتابة هذا الدرس، للملاحظات فئات مثل Development وInteraction وAccessibility وContent، ويستطيع المطوّرون التصفية بها. والقياسات (Shift+M) تثبّت المسافات على لوحة العمل.
في Steady، دوّن:
\nلقد صمّمت Steady، وحوّلته إلى نظام، وصنعت له prototype، وفحصته، وسلّمته. الدرس الأخير عن المهارتين اللتين تحوّلان هذا العمل إلى مسيرة مهنية: إدارة جلسة نقد تصميمي، ورواية القصة في دراسة حالة.
\n","toc":[{"id":"sec-1","text":"نظّم الملف من أجل قارئه","level":2},{"id":"sec-2","text":"Ready for dev","level":2},{"id":"sec-3","text":"ما يراه المطوّرون في Dev Mode","level":2},{"id":"sec-4","text":"دوّن ما لا تستطيع البكسلات قوله","level":2}],"takeaways":["يبدأ التسليم بملف منظّم؛ الـ sections لكل مسار، والطبقات المسمّاة، والـ components المرتبطة بالـ variables تؤدّي معظم العمل.","علامة Ready for dev تخبر المطوّرين أيّ التصاميم مستقرّة، ويعلّم Figma التصميم بأنه تغيّر حين يعدّله أحدهم بعد ذلك.","يعرض Dev Mode القياسات والـ variables بأسمائها ومقتطفات الكود، فيقرأ المطوّرون الـ tokens بدل التخمين من البكسلات.","الملاحظات التوضيحية (annotations) تحمل ما لا تستطيع البكسلات حمله، مثل السلوك والحالات الحدّية والـ accessible names وترتيب التركيز.","التسليم حوار، فاشرح المسار للمطوّرين خطوة بخطوة وراجع الشاشات المبنية مقابل التصميم."],"further":[{"title":"Guide to Dev Mode","url":"https://help.figma.com/hc/en-us/articles/15023124644247-Guide-to-Dev-Mode"},{"title":"Dev Mode statuses and notifications","url":"https://help.figma.com/hc/en-us/articles/26781702258583-Dev-Mode-statuses-and-notifications"},{"title":"Add measurements and annotate designs","url":"https://help.figma.com/hc/en-us/articles/20774752502935-Add-measurements-and-annotate-designs-in-Dev-Mode"}],"quiz":[{"q":"بعد تعليم مسار تسجيل العادة بـ Ready for dev، غيّرت الـ padding في صف العادة. ماذا يرى المطوّر؟
","options":[{"text":"لا شيء، لأن Ready for dev يجمّد التصميم.","why":"Ready for dev إشارة لا قفل. يستطيع المصمّمون التعديل، ويسجّل Figma أنهم فعلوا."},{"text":"يظهر التصميم بأنه تغيّر، ويستطيع المطوّر مقارنته بالنسخة التي عُلّمت جاهزة.","why":"صحيح. حالة Changed تُطبَّق تلقائيًا، ومقارنة النسخ تُظهر بالضبط ما الذي تغيّر."},{"text":"يتراجع Figma عن التعديل تلقائيًا.","why":"لا يتراجع Figma عن تعديلاتك أبدًا. إنه يُبرزها حتى لا يُفاجأ المطوّرون."},{"text":"يجب على المطوّر إلغاء التعليم ثم إعادته ليرى التعديلات.","why":"يرى المطوّرون أحدث تصميم وحالة التغيير دون أي خطوات إضافية."}],"answer":1},{"q":"أيّ ملاحظة مكانها annotation لا التصميم البصري؟
","options":[{"text":"نصف قطر زوايا صف العادة 12.","why":"يعرض Dev Mode نصف القطر والـ variable الخاص به من التصميم مباشرة. تدوينه يضيف ضجيجًا."},{"text":"خط العنوان هو الـ style Large title.","why":"اسم الـ text style ظاهر في Dev Mode. لا حاجة إلى ملاحظة."},{"text":"خلفية الشاشة بيضاء.","why":"التعبئة والـ variable الخاص بها ظاهران في Dev Mode. الملاحظات لما لا يُرى."},{"text":"أسماء العادات تلتفّ إلى سطرين، ثم تُقصّ بعلامة حذف (…)؛ والـ accessible name لزر الإضافة هو “Add habit”.","why":"صحيح. قواعد الالتفاف والـ accessible names سلوك لا يمكنك قراءته من frame ثابت."}],"answer":3},{"q":"في Dev Mode يرى المطوّر تعبئة زر التعليم على أنها color/action/primary لا
مسار تسجيل العادة مصمّم ومختبَر. رتّب خطوات التسليم عند صوفيا، من تجهيز الملف حتى فحص ما بُني.
\n","hints":["يجب ألّا يرى المطوّرون أبدًا مسارًا معلَّمًا بأنه جاهز وما زال يحتوي محاولات استكشافية أو حالات ناقصة.","الملاحظات تصف الـ frames النهائية، فتأتي بعد وجود الحالات، وقبل إشارة الجاهزية.","نظّف، ثم جمّع، ثم أضف الحالات، ثم دوّن الملاحظات، ثم علّم بالجاهزية، ثم اشرح، ثم راجع البناء."],"explanation":"أولًا نظّف حتى لا يبقى إلا التصاميم الحقيقية، ثم جمّع الشاشات في section بترتيب المسار. أضف الحالات الناقصة (الفارغة، والخطأ، والمحتوى الطويل) لأن الملاحظات والمطوّرين كليهما يحتاجونها. دوّن السلوك وإمكانية الوصول على تلك الـ frames النهائية. عندئذٍ فقط علّم الـ section بـ Ready for dev، فتعني الإشارة «مستقرّ». اشرح المسار للمطوّرين خطوة بخطوة، وأخيرًا راجع البناء مقابل التصميم. التعليم بالجاهزية قبل ذلك سيُطلق شارات Changed مع كل تعديل لاحق ويعلّم المطوّرين تجاهلها.
\n","checkLabels":{},"itemText":{"clean":"انقل المحاولات الاستكشافية والنسخ القديمة خارج صفحة Screens.","sections":"جمّع شاشات تسجيل العادة المتبقّية في section، مرتّبة من اليسار إلى اليمين بترتيب المسار.","states":"أضف الحالات الناقصة إلى ذلك الـ section: القائمة الفارغة، واسم العادة الطويل، والخطأ، والتحميل.","annotate":"دوّن قواعد المحتوى والسلوك والـ accessible names وترتيب التركيز.","ready":"علّم الـ section بـ Ready for dev.","walkthrough":"اشرح للمطوّرين الـ prototype والملاحظات خطوة بخطوة، وأجب عن أسئلتهم.","review":"راجع أول نسخة مبنية جنبًا إلى جنب مع التصميم وسجّل الإصلاحات المطلوبة."}},"words":702,"readMinutes":4}