في شاشة Settings في Steady، تقع عناوين الأقسام مثل «Reminders» و«Appearance» على بعد 8 px تحت آخر صف في القسم السابق و8 px فوق أول صف في قسمها. يقول الناس إن الأقسام يختلط بعضها ببعض. أيّ تغيير واحد يفيد أكثر من غيره؟
","options":[{"text":"تلوين العناوين بالتركوازي لتبرز.","why":"التركوازي محجوز للإجراءات. استخدامه على العناوين يجعلها تبدو قابلة للنقر ويُضعف أثر اللون المميّز."},{"text":"إضافة خط فاصل تحت كل صف.","why":"مزيد من الخطوط يضيف ضجيجًا. المشكلة الحقيقية أن العنوان قريب من القسمين بالقدر نفسه."},{"text":"زيادة المسافة فوق كل عنوان إلى 24 أو 32 px مع إبقاء 8 px تحته.","why":"صحيح. حين تكون المسافة فوق العنوان أكبر من التي تحته، يرتبط كل عنوان بصريًا بالصفوف التي يتصدّرها."},{"text":"توسيط العناوين فوق كل قسم.","why":"التوسيط يضيف محور محاذاة ثانيًا ولا يفيد التجميع في شيء."}],"answer":2},{"q":"تعليق streak بحجم 13 px وبلون #6B7280 نجح بنسبة 4.83:1 على الأبيض. ثم وضعته على بطاقة رمادية فاتحة #F3F4F6. ماذا تفعل؟
","options":[{"text":"تعيد قياس التباين مقابل البطاقة، لأن النسبة تنخفض إلى 4.39:1، ثم تستخدم رماديًا أغمق مثل #4B5563.","why":"صحيح. التباين يعتمد على اللونين معًا. على البطاقة يفشل الزوج، و#4B5563 يعطي 6.87:1."},{"text":"لا شيء، لأنه نجح بالفعل على الأبيض.","why":"النجاح على خلفية لا يقول شيئًا عن خلفية أخرى. البطاقة أغمق، فتنخفض النسبة."},{"text":"تجعل التعليق بخط عريض، فينخفض المتطلّب إلى 3:1.","why":"الخط العريض لا يُعدّ نصًا كبيرًا إلا ابتداءً من نحو 18.66 px. عند 13 px ما زال التعليق يحتاج 4.5:1."},{"text":"تنتقل إلى #9CA3AF ليبدو التعليق أفتح وأهدأ.","why":"هذا يزيد الأمر سوءًا: #9CA3AF على البطاقة يعطي نحو 2.31:1."}],"answer":0},{"q":"تحدّد عنوان الترويسة وتاريخها، وتضغط Cmd+G، ثم تبحث عن padding وتعبئة خلفية للترويسة فلا تجدهما. لماذا؟
","options":[{"text":"لأن الـ padding لا يظهر إلا بعد إضافة layout guide.","why":"الـ Layout guides أدوات بصرية مساعدة، أما الـ padding فيخصّ الـ frames ذات الـ Auto layout."},{"text":"لأن الترويسة تحتاج constraint قبل أن يتاح الـ padding.","why":"الـ constraints تتحكّم في سلوك تغيير الحجم، لا في الـ padding أو التعبئة."},{"text":"لأن طبقات النص لا يمكن أن تكون داخل أي شيء له خلفية.","why":"النص يوضع داخل frames لها تعبئة باستمرار، وكل زر مثال على ذلك."},{"text":"لأن Cmd+G صنع group، والـ groups ليس لها تعبئة ولا padding ولا Auto layout خاص بها.","why":"صحيح. استخدم frame بدلًا منه (Cmd+Option+G يلفّ التحديد في frame)، ثم أضف Auto layout وتعبئة."}],"answer":3},{"q":"يجب أن يبقى الرسم التوضيحي لحالة «No habits yet» في منتصف الشاشة في كل أحجام الهواتف. أيّ constraints تضبط؟
","options":[{"text":"Left and right مع Top and bottom.","why":"هذا يمطّ الرسم في الاتّجاهين، فيتشوّه في أحجام الشاشات الأخرى."},{"text":"Center أفقيًا وCenter عموديًا.","why":"صحيح. Center يحافظ على إزاحة ثابتة من منتصف الـ frame على المحورين، دون تغيير حجم الرسم."},{"text":"Scale على المحورين.","why":"Scale يحافظ على الموضع النسبي لكنه يغيّر حجم الرسم أيضًا مع الـ frame."},{"text":"Left وTop.","why":"هذان يثبّتانه في الزاوية العلوية اليسرى، فينحرف عن المنتصف في الشاشات الأكبر."}],"answer":1},{"q":"يسأل مطوّر لماذا يأتي كلٌّ من الـ text styles Headline وBody في Steady بحجم 17 px. ما أفضل إجابة؟
","options":[{"text":"كان ذلك خطأ؛ يجب أن يكون أحدهما 16 px.","why":"الأمر مقصود. إضافة حجم للتفريق بينهما ستضخّم السلّم."},{"text":"لأن Figma يشترط أن تتشارك الـ text styles الأحجام.","why":"لا توجد قاعدة كهذه في Figma. الاختيار قرار تصميمي."},{"text":"لأن Headline يتقدّم على Body بالوزن وحده، فيحصل السلّم على رتبة جديدة دون حجم جديد.","why":"صحيح. Semibold مقابل Regular بالحجم نفسه خطوة واضحة ومقروءة في التسلسل البصري."},{"text":"لأن قواعد المنصّة تمنع أكثر من حجم واحد بين 15 و20 px.","why":"لا توجد قاعدة منصّة تقول ذلك. السبب هو الاتّساق وقِصر السلّم."}],"answer":2}],"s-fig-2":[{"q":"قائمة العادات frame عمودي بـ Auto layout وgap مقداره 8 px. تحذف الصف الثالث من خمسة صفوف. ماذا يحدث؟
","options":[{"text":"تبقى فجوة بارتفاع 72 px مكان الصف حتى تحرّك الصفوف الأخرى.","why":"هذا يحدث في الـ frames التي لا تستخدم Auto layout. الـ Auto layout يعيد الترتيب فورًا."},{"text":"تصعد الصفوف التي تحته ويبقى الـ gap بمقدار 8 px بين كل صفّين.","why":"صحيح. الموضع يأتي من الـ flow، فإزالة ابن تُغلق مساحته."},{"text":"تتمدّد الصفوف الباقية لتملأ الارتفاع القديم.","why":"الصفوف التي تحتضن محتواها تحافظ على ارتفاعها. وحده ارتفاع القائمة يتغيّر، إن كانت تحتضن محتواها."},{"text":"يعيد Figma القائمة إلى frame عادي.","why":"حذف ابن لا يزيل الـ Auto layout من أبيه أبدًا."}],"answer":1},{"q":"أيّ إعداد للعرض يتيح لشريحة التكرار أن تكبر حين تتغيّر تسميتها من «Daily» إلى «Every other day»؟
","options":[{"text":"عرض Fixed بمقدار 80 px.","why":"Fixed لا يتغيّر أبدًا، فتفيض التسمية الأطول أو تُقصّ."},{"text":"Fill container.","why":"Fill يأخذ مساحة الأب، فتتقاسم الشرائح الصف بدل أن تتّسع لتسمياتها."},{"text":"الـ constraint Scale.","why":"الـ constraints لا تنطبق على أبناء الـ Auto layout، وScale يتجاهل المحتوى."},{"text":"Hug contents، ويمكن إضافة min width.","why":"صحيح. Hug يجعل حجم الشريحة بحجم تسميتها مع الـ padding، والـ min width يُبقي التسميات القصيرة قابلة للنقر."}],"answer":3},{"q":"بطاقة فيها padding بمقدار 16 px وgap بمقدار 8 px بين أبنائها. يريد المصمّم مساحة تنفّس أكبر قليلًا داخل البطاقة. ما القيمة التالية على سلّم المسافات في Steady؟
","options":[{"text":"20 px، أي نصف الخطوة، أو 24 px لتغيير أكبر.","why":"صحيح. كلتا القيمتين على سلّم الـ 8 نقاط ونصف خطوته البالغة 4 نقاط، فيبقى التغيير منهجيًا."},{"text":"17 px، أصغر زيادة ممكنة.","why":"القيم الخارجة عن السلّم مثل 17 هي بالضبط الانجراف الذي يمنعه النظام."},{"text":"18 px، في منتصف المسافة بين 16 و20.","why":"18 ليست من مضاعفات 4. اختر خطوة على السلّم بدلًا منها."},{"text":"إبقاء 16 px وتكبير النص بدلًا من ذلك.","why":"النص الأكبر يغيّر التسلسل البصري لا مساحة التنفّس، ويجعل البطاقة تبدو أضيق."}],"answer":0},{"q":"لماذا يستخدم Steady النوع Stretch للـ layout guide ذي الأعمدة الأربعة في الهواتف؟
","options":[{"text":"لأن أعمدة Stretch تلتقط الطبقات وتضعها في أماكنها تلقائيًا.","why":"الـ Layout guides لا تحرّك الطبقات أبدًا. الالتقاط أداة مساعدة في لوحة العمل، وليس ما يفعله Stretch."},{"text":"لأن Stretch هو النوع الوحيد الذي يدعم الـ gutters.","why":"أنواع الأعمدة Left وCenter وRight لها gutters أيضًا."},{"text":"لأن أعمدة Stretch تكبر وتصغر مع الـ frame، فيناسب الـ guide كل عروض الهواتف.","why":"صحيح. الأعمدة الثابتة العرض ستترك مساحات غير متساوية في الهواتف الأعرض أو الأضيق."},{"text":"لأن Stretch يخفي الـ guide في الـ prototypes.","why":"الـ guides لا تظهر أبدًا في الـ prototypes ولا في الملفات المُصدَّرة، أيًّا كان نوعها."}],"answer":2},{"q":"منتقي الأيقونات في لوحة New habit يعرض 24 أيقونة في أعمدة متساوية، ستًّا في كل صف على الهواتف. أيّ إعداد يناسب أكثر؟
","options":[{"text":"Auto layout أفقي مع Wrap وأيقونات على Hug contents.","why":"الـ Wrap يعمل، لكن المساحة المتبقية تصنع صفوفًا غير منتظمة. أما الأعمدة المتساوية فهي ما يصنعه الـ Grid."},{"text":"Auto layout من نوع Grid بستة أعمدة وgaps متساوية.","why":"صحيح. الـ Grid يضع الأبناء في صفوف وأعمدة منتظمة، ويمكنك تغيير عدد الأعمدة لكل breakpoint."},{"text":"24 أيقونة موضوعة يدويًا بالـ constraints.","why":"التموضع اليدوي يجب أن يُعاد مع كل تغيير، والـ constraints لا تصنع أعمدة."},{"text":"Auto layout عمودي مع gap سالب.","why":"الـ gap السالب يجعل العناصر تتداخل؛ ولا يشكّل شبكة."}],"answer":1}],"s-fig-3":[{"q":"طبّق مصمّم override على لون نص الـ streak في 12 instance من صف العادة لأن رمادي الـ main component يبدو فاتحًا أكثر من اللازم. ماذا يجب أن يفعل بدلًا من ذلك؟
","options":[{"text":"يستمرّ في الـ overrides؛ فهي لا تكلّف شيئًا.","why":"كل override يوقف تلك الخاصية عن اتّباع الـ main component، فتفوت الإصلاحاتُ المستقبلية تلك الصفوف الاثني عشر."},{"text":"يفصل الصفوف الاثني عشر كلها ليثبت اللون.","why":"الصفوف المفصولة تخسر كل تحديث مستقبلي، لا اللون فقط."},{"text":"ينشئ component ثانيًا لصف العادة بالرمادي الأغمق.","why":"وجود component-ين شبه متطابقين يعني أن كل إصلاح مستقبلي يجب أن يُجرى مرّتين."},{"text":"يصلح اللون مرة واحدة في ربط الـ variable داخل الـ main component، ثم يعيد ضبط الـ overrides الاثني عشر.","why":"صحيح. تغيير واحد في المصدر يصل إلى كل instance، وإعادة ضبط الـ overrides تعيد الصفوف الاثني عشر إلى الاتّساق."}],"answer":3},{"q":"لحقل النص في Steady أربعة أشكال (Default وFocused وError وDisabled) ونص مساعد اختياري تحته. كيف تبنيه؟
","options":[{"text":"ثمانية variants: كل حالة مع النص المساعد ودونه.","why":"هذا يضاعف حجم المجموعة من أجل مجرّد إظهار عنصر أو إخفائه. الـ boolean يتولّى ذلك دون variants جديدة."},{"text":"boolean لكل حالة وvariant للنص المساعد.","why":"الحالات تعيد تنسيق عدّة طبقات معًا، وهذه مهمّة الـ variant لا الـ boolean."},{"text":"variant property باسم State، وboolean لإظهار النص المساعد، وخاصية text لمحتواه.","why":"صحيح. الـ variants لتغيير مظهر عدّة طبقات معًا، وخاصيتا boolean وtext للنص المساعد الاختياري."},{"text":"أربعة components منفصلة دون variants.","why":"الـ components المنفصلة تُجبر الناس على البحث عنها في الـ assets وتكسر البنية المشتركة."}],"answer":2},{"q":"الصفحة مضبوطة على Dark. وframe شاشة Today على Auto. وبطاقة ترويجية داخله مضبوطة على Light. أيّ mode يستخدم زر داخل البطاقة الترويجية؟
","options":[{"text":"Light، لأنه يرث من أقرب أب ضُبط له mode، وهو البطاقة الترويجية.","why":"صحيح. يصعد Figma في الشجرة ويتوقّف عند أول mode صريح."},{"text":"Dark، لأن الأولوية دائمًا لـ mode الصفحة.","why":"الـ mode الصريح الأقرب هو الذي يُطبَّق، لا الأبعد."},{"text":"Auto، فيستخدم الـ mode الافتراضي للـ collection بغضّ النظر عن الآباء.","why":"Auto يعني الوراثة. ولا يعود إلى الافتراضي إلا إذا لم يكن لأي أب mode."},{"text":"لا هذا ولا ذاك؛ يُبلغ Figma عن تعارض.","why":"خلط الـ modes مسموح ويُحلّ بطريقة متوقّعة."}],"answer":0},{"q":"تحتاج اللوحة السفلية المرتفعة في Steady ظلًّا ناعمًا من طبقتين يُستخدم في عدّة أماكن. أين يجب أن تحفظه؟
","options":[{"text":"في color variable.","why":"الـ color variable يحمل لونًا واحدًا، لا كومة من طبقات الظل بإزاحاتها وتمويهها."},{"text":"في effect style.","why":"صحيح. الظلال مركّبات من عدّة قيم، وهذا ما وُجدت الـ styles من أجله."},{"text":"في number variable لنصف قطر التمويه فقط.","why":"رقم التمويه وحده لا يستطيع وصف الظل الكامل ذي الطبقتين."},{"text":"في boolean variable يُظهر مستطيل ظل أو يخفيه.","why":"تزييف الظلال بالمستطيلات هشّ ويصعب على المطوّرين قراءته."}],"answer":1},{"q":"تنشر تحديثًا للمجموعة يغيّر الـ padding في صف العادة من 12/16 إلى 16/16. ماذا يجب أن يقول وصف النشر؟
","options":[{"text":"لا شيء؛ يستطيع المشتركون مقارنة الملفات بأنفسهم.","why":"التحديثات الصامتة تجعل الناس يخشون قبولها. الوصف هو ما يقرّر المشتركون على أساسه."},{"text":"«Updates».","why":"أبهم من أن يساعد أحدًا على الحكم إن كان التحديث يمسّ عمله."},{"text":"قائمة بكل طبقة في المجموعة.","why":"سرد كل شيء يخفي التغيير الوحيد المهم."},{"text":"ما الذي تغيّر، ولماذا، وهل يحتاج أحد إلى فعل شيء، مثل «rows are now 16/16; check tight layouts».","why":"صحيح. الملاحظات الواضحة تتيح للمشتركين قبول التحديثات بثقة ومعرفة أين ينظرون."}],"answer":3}],"s-fig-4":[{"q":"يمكن الوصول إلى Habit detail من Today ومن Stats. ويجب أن يعيد سهم الرجوع فيها الناس إلى حيث أتوا. أيّ action يناسب؟
","options":[{"text":"Navigate to إلى Today.","why":"هذا يرسل من أتوا من Stats إلى الشاشة الخطأ."},{"text":"Close overlay.","why":"Habit detail شاشة كاملة لا overlay، فلا يوجد ما يُغلق."},{"text":"Back.","why":"صحيح. Back يعيد إلى الشاشة السابقة في سجلّ الـ prototype، أيًّا كانت."},{"text":"Swap overlay.","why":"Swap overlay يستبدل overlay بآخر ولا ينطبق على الشاشات الكاملة."}],"answer":2},{"q":"يعرض رسم Stats البياني في Steady الأيام المكتملة بالتركوازي والأيام المكتملة جزئيًا بتركوازي فاتح، دون أي شيء آخر يميّز بينها. ما أفضل إصلاح؟
","options":[{"text":"إضافة إشارة ثانية، مثل نقش أو شكل نصف معبّأ للأيام الجزئية، مع مفتاح للرسم (legend).","why":"صحيح. معيار Use of Color يتطلّب إشارة لا تعتمد على اللون، والمفتاح يجعل المعنى صريحًا."},{"text":"جعل التركوازي الفاتح أفتح لزيادة الفرق.","why":"ما زال الاعتماد على اللون وحده. ومن لديهم قصور في رؤية الألوان قد لا يرون الفرق إطلاقًا."},{"text":"إضافة تلميح عند تمرير المؤشّر يعرض القيمة الدقيقة.","why":"الهواتف لا تعرف تمرير المؤشّر، ويجب أن تكون المعلومة ظاهرة دون خطوات إضافية."},{"text":"تحويل الأيام الجزئية إلى الأحمر.","why":"الأحمر والتركوازي قد يختلطان أيضًا، والأحمر يوحي بالفشل، والأيام الجزئية ليست فشلًا."}],"answer":0},{"q":"في Dev Mode يرى مطوّر أن الـ padding في إحدى البطاقات قيمة خام هي 15، غير مرتبطة بأي variable. ماذا يخبرك ذلك؟
","options":[{"text":"أن Dev Mode يخفي الـ variables الخاصة بالـ padding.","why":"يعرض Dev Mode الـ variables المرتبطة بالـ padding والـ gaps حين يوجد هذا الربط."},{"text":"أن القيمة كُتبت يدويًا وهي خارج سلّم المسافات، فأصلحها في التصميم قبل التسليم.","why":"صحيح. اربط الـ padding بـ variable مسافات مثل space/4 ليتشارك الكود والتصميم الـ token نفسه."},{"text":"أن المطوّر يحتاج مقعد Full ليرى الـ variable.","why":"الـ variables تظهر لكل من يستطيع استخدام Dev Mode. الربط ببساطة غير موجود."},{"text":"أن 15 مقبولة، لأن Dev Mode يقرّب القيم من أجل الكود.","why":"يعرض Dev Mode القيم الدقيقة. و15 خارج سلّم الـ 8 نقاط في Steady."}],"answer":1},{"q":"يقول المقدِّم: «التنقّل نهائي؛ أريد ملاحظات على ألوان شاشة Stats فقط.» يبدأ زميل بنقد شريط التبويبات. ماذا يجب أن يفعل الميسّر؟
","options":[{"text":"يترك النقاش يستمرّ، لأن كل الملاحظات مفيدة.","why":"الملاحظات الخارجة عن الموضوع تستهلك الوقت الذي طلبه المقدِّم وقد تعيد فتح قرارات محسومة."},{"text":"يطلب من الزميل مغادرة الجلسة.","why":"هذا قاسٍ جدًا. قد تكون ملاحظته في محلّها، لكن مكانها ليس هذه الجلسة."},{"text":"ينهي جلسة النقد مبكرًا.","why":"يمكن للجلسة أن تستمرّ في تركيزها المعلن."},{"text":"يدوّن ملاحظة شريط التبويبات لحوار لاحق ويعيد النقاش إلى الألوان.","why":"صحيح. تُحفظ الملاحظة، وتبقى الجلسة على الملاحظات التي طلبها المقدِّم."}],"answer":3},{"q":"في الـ prototype، لوحة New habit هي overlay. حين ينقر أحدهم Save habit، يجب أن تختفي اللوحة وتظهر Today تحتها. أيّ action تستخدم على Save؟
","options":[{"text":"Close overlay.","why":"صحيح. يغلق اللوحة ويترك الشاشة التي تحتها كما كانت."},{"text":"Navigate to إلى Today.","why":"الانتقال سيضيف Today أخرى إلى السجلّ وقد يربك منطق الـ overlay."},{"text":"Open overlay مع Today.","why":"Today شاشة كاملة لا overlay. سيكدّسها هذا فوق اللوحة."},{"text":"Scroll to إلى أعلى اللوحة.","why":"التمرير يحرّك المحتوى داخل اللوحة؛ ولا يغلقها."}],"answer":0}]},"final":[{"q":"يطلب فريق التسويق شريطًا بعنوان «Streak at risk!» في أعلى Today، باللون التركوازي المميّز مع زر تركوازي. ما الخطر التصميمي الأساسي؟
","options":[{"text":"الأشرطة لا يمكن بناؤها بالـ Auto layout.","why":"الأشرطة frames عادية بـ Auto layout. الخطر يتعلّق بالتسلسل البصري لا بالأداة."},{"text":"الشريط ينافس أزرار التعليم على اللون المميّز، فقد لا يعرف الناس بعد ذلك أين ينقرون أولًا.","why":"صحيح. حين يظهر اللون المميّز على عناصر جديدة، يتوقّف عن الإشارة إلى الإجراء الأساسي وحده."},{"text":"التركوازي يفشل في التباين على الأبيض بكل أحجام النص.","why":"teal/700 في Steady يعطي 5.47:1 مع الأبيض، أي أنه ينجح. المشكلة في التنافس لا في سهولة القراءة."},{"text":"الأشرطة غير مسموحة فوق القوائم.","why":"لا توجد قاعدة كهذه. ومدى ملاءمته للشاشة يعتمد على وظيفتها."}],"answer":1},{"q":"أيّ هذه الأزواج ينجح وفق المستوى AA في WCAG لتسمية بحجم 15 px؟
","options":[{"text":"#9CA3AF على الأبيض، 2.54:1.","why":"أقل بكثير من 4.5:1، وسيفشل حتى في عتبة النص الكبير 3:1."},{"text":"teal/700 على gray/950، 3.24:1.","why":"3.24:1 لا تنجح إلا للنص الكبير. والتسمية بحجم 15 px نص عادي."},{"text":"الأبيض على teal/400، 1.86:1.","why":"هذا يفشل في كل العتبات، ولهذا ينقلب on-action إلى الداكن في الوضع الداكن."},{"text":"#6B7280 على الأبيض، 4.83:1.","why":"صحيح. النص العادي يحتاج 4.5:1، و4.83:1 تتجاوزها."}],"answer":3},{"q":"المسافة بين الأيقونة والتسمية داخل زر Steady تبدو واسعة أكثر من اللازم. أين تغيّرها؟
","options":[{"text":"في إعداد الـ gap في frame الزر ذي الـ Auto layout.","why":"صحيح. المسافة بين الإخوة هي الـ gap في الأب، قيمة واحدة على frame الزر."},{"text":"بتحريك التسمية 4 px إلى اليسار يدويًا.","why":"الأبناء في الـ Auto layout يُموضَعون بالـ flow؛ والتحريك اليدوي إمّا يُلغى أو يخرج الطبقة من الـ flow."},{"text":"بإضافة padding سالب إلى التسمية.","why":"الـ padding لا يمكن أن يكون سالبًا، والمسافة تخصّ الـ gap على أي حال."},{"text":"بتصغير frame الأيقونة.","why":"هذا يغيّر حجم الأيقونة لا المسافة، ويخالف معيار الأيقونات بحجم 16 px."}],"answer":0},{"q":"في لوحة New habit زرّا Cancel وSave متجاوران، ويجب أن يتقاسما عرض اللوحة بالتساوي في كل هاتف. كيف تضبطهما؟
","options":[{"text":"كلاهما Hug contents.","why":"الاحتضان يجعل كل زر بعرض تسميته، فلن يتقاسما العرض بالتساوي."},{"text":"كلاهما Fixed بعرض 170 px.","why":"العروض الثابتة لا تناسب بالضبط إلا عرض شاشة واحدًا."},{"text":"كلاهما Fill container داخل صف أفقي بـ Auto layout.","why":"صحيح. الإخوة الذين يملؤون يتقاسمون المساحة المتاحة بالتساوي، في أي عرض."},{"text":"Cancel على Fill container، وSave على Hug contents.","why":"سيأخذ Cancel معظم الصف وسيتقلّص الإجراء الأساسي."}],"answer":2},{"q":"شاشة Habit detail في Steady frame عمودي واحد بـ Auto layout يضمّ زر Edit عائمًا. في هاتف طويل يظهر الزر مباشرة بعد آخر بطاقة إحصاءات، لا قرب الأسفل. ما الإصلاح؟
","options":[{"text":"إضافة مستطيل فاصل فوق الزر.","why":"الفاصل لا يعمل إلا لارتفاع شاشة واحد ويُخفي الغرض منه."},{"text":"ضبط ارتفاع الزر على Fill container.","why":"سيتمدّد الزر إلى لوح طويل بدل أن ينتقل إلى الأسفل."},{"text":"نقل الزر خارج محتوى الـ Auto layout وتثبيته بـ constraints Bottom في frame الشاشة.","why":"صحيح. العناصر المثبّتة على حوافّ الشاشة مكانها خارج الـ flow، تتحكّم فيها الـ constraints."},{"text":"تفعيل Wrap في frame المحتوى.","why":"الـ Wrap ينقل العناصر إلى أسطر جديدة؛ ولا يثبّت شيئًا في الحافّة السفلية."}],"answer":2},{"q":"يضيف Steady شكل «Paused» لصفوف العادات: أيقونة رمادية، واسم رمادي، ورمز إيقاف مؤقت بدل زر التعليم. الصف مستخدم في 40 مكانًا. ماذا تفعل؟
","options":[{"text":"تضيف Paused قيمةً جديدة في الـ variant property State لصف العادة.","why":"صحيح. عدّة طبقات تتغيّر معًا، فهذا variant، ويمكن للـ instances الأربعين كلها أن تنتقل إليه."},{"text":"تطبّق override يدويًا على الـ instances الأربعين التي تحتاجه.","why":"الـ overrides المتكرّرة تنحرف وتتوقّف عن تلقّي التحديثات في كل خاصية لمستها."},{"text":"تنشئ component منفصلًا لصف العادة الموقوف.","why":"الـ component المنفصل يكرّر بنية الصف، فيجب إجراء الإصلاحات مرّتين."},{"text":"تضيف boolean باسم Paused يخفي زر التعليم.","why":"الـ boolean يبدّل طبقة واحدة فقط؛ ولا يستطيع إعادة تنسيق الأيقونة والاسم في الوقت نفسه."}],"answer":0},{"q":"يستمرّ المصمّمون في استبدال أيقونة زر Save بأيقونات لا علاقة لها به مثل Trash وShare. كيف توجّههم دون إلغاء المرونة؟
","options":[{"text":"تقفل طبقة الأيقونة فلا يمكن تغييرها.","why":"هذا يلغي المرونة التي يحتاجها الزر فعلًا."},{"text":"تفصل الأيقونة عن الـ component.","why":"الفصل يقطع الارتباط بالـ component ويزيد الأمر سوءًا بدل أن يوجّه أحدًا."},{"text":"تكتب ملاحظة في صفحة Cover.","why":"الملاحظات البعيدة عن الـ component يسهل تفويتها لحظة الاختيار."},{"text":"تضبط preferred values على خاصية الـ instance swap Icon، مثل Plus وCheck وBell.","why":"صحيح. الـ preferred values تنتقي خيارات المنتقي فتصبح الأيقونات الصحيحة هي الخيار الأسهل."}],"answer":3},{"q":"يغيّر فريق العلامة التجارية تركوازي Steady إلى درجة أميل إلى الأزرق قليلًا. مع إعداد الـ variables ذي المستويين، ماذا تعدّل؟
","options":[{"text":"تعبئة كل component.","why":"الـ components ترتبط بالـ variables الدلالية، فلا تحتاج تعديلًا أبدًا لتغيير في لوحة الألوان."},{"text":"قيم التركوازي في الـ primitives؛ والـ variables الدلالية التي هي aliases لها تتحدّث في كل مكان.","why":"صحيح. الـ primitives تحمل لوحة الألوان الخام، فيتدفّق تعديل واحد عبر كل معنى يشير إليها."},{"text":"القيمة الخام في كل variable دلالي.","why":"الـ variables الدلالية aliases لـ primitives بدل أن تحمل قيمًا خامًا، فلا تحتاج تعديلًا."},{"text":"الـ text styles.","why":"الـ text styles تحمل إعدادات الخط، لا لون العلامة التجارية للإجراءات."}],"answer":1},{"q":"في الوضع الداكن، يفشل الحدّ الخارجي (outline) لدائرة التعليم غير المعلَّمة في تحقيق 3:1 مقابل سطح الصف. أين تصلح ذلك؟
","options":[{"text":"بتطبيق override على لون الحدّ الخارجي في كل instance من زر التعليم.","why":"الـ overrides تبعثر الإصلاح وتوقف تلك الـ instances عن اتّباع التحديثات المستقبلية."},{"text":"بإضافة mode باسم Dark إلى الـ collection المسمّاة Primitives.","why":"الـ primitives تبقى حقائق بـ mode واحد. الـ modes مكانها الطبقة الدلالية."},{"text":"بجعل الحدّ الخارجي أسمك مع إبقاء اللون.","why":"السماكة تحسّن الظهور، لكن زوج الألوان ما زال يفشل في متطلّب 3:1."},{"text":"بتوجيه الـ variable الدلالي الخاص بالحدّ الخارجي إلى primitive أفتح في قيمته الخاصة بـ Dark.","why":"صحيح. تغيير واحد في عمود Dark يصلح كل زر تعليم في الوضع الداكن."}],"answer":3},{"q":"يجب أن تكبر حلقة التقدّم في Habit detail من 60% إلى 80% حين تُعلَّم العادة، لكنها تقفز بدلًا من ذلك. الـ frame-ان يستخدمان Smart animate. ما الذي تفحصه أولًا؟
","options":[{"text":"هل المدّة أطول من ثانية واحدة.","why":"المدّة لا تؤثّر إلا في سرعة حركة لديها طبقات متطابقة أصلًا."},{"text":"هل لطبقة الحلقة الاسم نفسه والأب نفسه في الـ frame-ين.","why":"صحيح. Smart animate لا يحرّك إلا الطبقات التي يستطيع مطابقتها بالاسم والتسلسل الهرمي."},{"text":"هل الـ trigger هو On click لا On tap.","why":"هما الـ trigger نفسه، بتسميتين لسطح المكتب والجوّال."},{"text":"هل تستخدم الحلقة color style.","why":"الـ styles لا تؤثّر في المطابقة. الأسماء والتسلسل الهرمي هي التي تؤثّر."}],"answer":1},{"q":"في ترويسة Habit detail أيقونة Edit بحجم 20 px وأيقونة Share بحجم 20 px بينهما 4 px. ما أفضل تغيير؟
","options":[{"text":"لفّ كل أيقونة في frame بحجم 44 × 44 لتكون مساحات النقر مريحة وغير متداخلة.","why":"صحيح. تبدو الأيقونات كما هي، لكن صار لكلٍّ منها مساحة نقر تحقّق توصية Apple."},{"text":"تكبير الأيقونتين إلى 44 px.","why":"هذا يحقّق الحجم لكنه يثقل الترويسة. الـ frame الأكبر غير المرئي يؤدّي المهمّة."},{"text":"تركهما، لأن 20 px قريبة من 24 px.","why":"حتى لو سمح استثناء التباعد في WCAG بتمريرهما بالكاد، فهما أصغر بكثير من توصية المنصّة البالغة 44 pt، ومسافة 4 px تجعل النقرات الخاطئة مرجّحة."},{"text":"حذف أيقونة Share.","why":"قد يكون ذلك قرارًا يخصّ المنتج، لكنه لا يحلّ مشكلة حجم الهدف كمبدأ تصميمي."}],"answer":0},{"q":"أيّ بند يستحقّ التدوين في ملاحظة على شاشة Today قبل التسليم أكثر من غيره؟
","options":[{"text":"نصف قطر زوايا صف العادة.","why":"يعرض Dev Mode نصف القطر والـ variable الخاص به بالفعل."},{"text":"عائلة خط العنوان.","why":"الـ text style والخط ظاهران في Dev Mode."},{"text":"أن أسماء العادات تلتفّ إلى سطرين ثم تُقصّ، وأن الـ accessible name (الاسم الذي تنطقه قارئات الشاشة) لزر الإضافة هو «Add habit».","why":"صحيح. السلوك والـ accessible names لا يمكن قراءتها من frame ثابت، فتحتاج ملاحظات."},{"text":"لون خلفية الشاشة.","why":"التعبئة والـ variable الخاص بها ظاهران للمطوّرين دون ملاحظة."}],"answer":2}],"glossary":[{"id":"visual-hierarchy","term":"التسلسل البصري (Visual hierarchy)","definition":"الترتيب الذي يلاحظ به الناس عناصر الشاشة، ويُصنع عن قصد بالحجم والوزن واللون والموضع والمساحة حتى يُرى المحتوى الأهم أولًا.","lesson":"l-fig-1-2"},{"id":"proximity","term":"القُرب (Proximity)","definition":"مبدأ من مبادئ الجشطالت يقول إن العناصر المتقاربة تُرى مترابطة. وفي تصميم الواجهات يعني أن المسافة داخل المجموعة يجب أن تكون أصغر من المسافة بين المجموعات.","lesson":"l-fig-1-2"},{"id":"type-scale","term":"سلّم أحجام الخط (Type scale)","definition":"قائمة قصيرة وثابتة من أحجام النص، كل حجم مقترن بارتفاع سطر ووزن وله وظيفة مسمّاة مثل Title أو Body أو Caption، وتُستخدم باتّساق في كل الشاشات.","lesson":"l-fig-1-3"},{"id":"contrast-ratio","term":"نسبة التباين (Contrast ratio)","definition":"مقياس للفرق في السطوع بين لونين، من 1:1 إلى 21:1. يتطلّب المستوى AA في WCAG نسبة 4.5:1 للنص العادي و3:1 للنص الكبير والعناصر غير النصية الأساسية.","lesson":"l-fig-1-3"},{"id":"frame","term":"Frame","definition":"حاوية في Figma لها حجمها وتعبئتها وقصّها والـ constraints الخاصة بها، ويمكن أن تحمل Auto layout أو Layout guides. الشاشات والصفوف والأزرار والبطاقات كلها تُبنى من frames.","lesson":"l-fig-1-4"},{"id":"group","term":"Group","definition":"حزمة من الطبقات يُشتقّ حجمها من أبنائها. ليس لها تعبئة ولا padding ولا Auto layout خاص بها، لذا تناسب التجمّعات البصرية الحرّة لا أجزاء الواجهة.","lesson":"l-fig-1-4"},{"id":"constraints","term":"Constraints","definition":"قواعد على ابن داخل frame عادي تحدّد كيف يتحرّك أو يتمدّد حين يتغيّر حجم الـ frame، مثل Left and right أو Bottom أو Center أو Scale.","lesson":"l-fig-1-4"},{"id":"auto-layout","term":"Auto layout","definition":"إعداد في الـ frame يرتّب أبناءه تلقائيًا في flow عمودي أو أفقي أو شبكي، مع gap محدّد بينها وpadding حولها، ويعيد الترتيب كلما تغيّر المحتوى.","lesson":"l-fig-2-1"},{"id":"gap-padding","term":"Gap وPadding","definition":"في الـ Auto layout، الـ gap هو المسافة بين الأبناء الإخوة، والـ padding هو المسافة بين الأبناء وحوافّ الـ frame الأب. وكلاهما يخصّ الأب.","lesson":"l-fig-2-1"},{"id":"hug-fill-fixed","term":"Hug وFill وFixed","definition":"خيارات تحديد الحجم في الـ Auto layout. Hug contents يجعل الـ frame بحجم أبنائه، وFill container يأخذ المساحة المتاحة في الأب، وFixed يحافظ على حجم دقيق مهما كان المحتوى.","lesson":"l-fig-2-2"},{"id":"wrap","term":"Wrap","definition":"خيار في الـ Auto layout للـ flow الأفقي والعمودي ينقل الأبناء إلى سطر جديد حين لا يعود السطر الحالي يتّسع لها، وهو مفيد للشرائح والوسوم في الشاشات الضيّقة.","lesson":"l-fig-2-2"},{"id":"ignore-auto-layout","term":"Ignore auto layout","definition":"إعداد كان اسمه absolute position، يخرج ابنًا واحدًا من الـ flow الخاص بالـ Auto layout فيُحدَّد موضعه بالـ constraints، مثل شارة على زاوية أيقونة.","lesson":"l-fig-2-2"},{"id":"layout-guide","term":"Layout guide","definition":"أداة بصرية مساعدة مرتبطة بالـ frame، كانت تُسمّى layout grid، على شكل أعمدة أو صفوف أو شبكة منتظمة، وتُعرَّف بالعدد والهامش والـ gutter. لا تحرّك الطبقات من تلقاء نفسها أبدًا.","lesson":"l-fig-2-3"},{"id":"eight-point-system","term":"نظام الـ 8 نقاط (8-point system)","definition":"اصطلاح للمسافات تكون فيه الأحجام والمسافات من مضاعفات 8، مع 4 كنصف خطوة، فتتدرّج القيم بسلاسة عبر كثافات الشاشات وتختار الفرق من قائمة قصيرة.","lesson":"l-fig-2-3"},{"id":"breakpoint","term":"Breakpoint","definition":"عرض يغيّر عنده التخطيط بنيته، مثل شبكة إحصاءات تنتقل من عمودين إلى أربعة. الـ breakpoints الجيدة تأتي من النقطة التي يتوقّف فيها المحتوى عن العمل، لا من قوائم الأجهزة.","lesson":"l-fig-2-4"},{"id":"main-component","term":"Main component","definition":"التعريف المصدر لعنصر قابل لإعادة الاستخدام في Figma. تتدفّق تغييراته إلى كل instance مرتبطة به، باستثناء الخصائص التي طبّقت عليها الـ instance override.","lesson":"l-fig-3-1"},{"id":"instance","term":"Instance","definition":"نسخة مرتبطة من main component. يمكنها تطبيق overrides على المحتوى والمظهر مثل النص والتعبئة والظهور والـ instances المتداخلة، لكنها لا تستطيع تغيير بنية طبقاتها.","lesson":"l-fig-3-1"},{"id":"variant","term":"Variant","definition":"نسخة واحدة من component داخل component set، تصفها variant properties مثل State=Done، وتُستخدم للاختلافات التي تعيد تنسيق عدّة طبقات معًا.","lesson":"l-fig-3-2"},{"id":"component-property","term":"Component property","definition":"مفتاح في الـ component تستطيع الـ instances تغييره دون variants جديدة: boolean للظهور، وtext للنصوص القابلة للتعديل، وinstance swap للـ components المتداخلة، وslots لمناطق المحتوى المرنة.","lesson":"l-fig-3-2"},{"id":"variable","term":"Variable","definition":"قيمة مفردة مسمّاة في Figma، مثل لون أو رقم أو نص أو boolean، يمكن ربطها بخصائص الطبقات، وأن تكون alias لـ variable آخر، وأن تحمل قيمًا مختلفة لكل mode.","lesson":"l-fig-3-3"},{"id":"semantic-token","term":"الـ token الدلالي (Semantic token)","definition":"variable يُسمّى بحسب دوره، مثل color/action/primary، وهو alias لقيمة خام من لوحة الألوان. ترتبط الـ components بالـ tokens الدلالية، فيبقى تغيير الثيم أو لوحة الألوان تعديلًا واحدًا.","lesson":"l-fig-3-3"},{"id":"style","term":"Style","definition":"مركّب مسمّى وقابل لإعادة الاستخدام من الخصائص البصرية في Figma، مثل text style يضمّ نوع الخط وحجمه ووزنه وارتفاع السطر، أو effect style يحمل ظلالًا متراكبة.","lesson":"l-fig-3-3"},{"id":"variable-mode","term":"Variable mode","definition":"عمود واحد من القيم في collection من الـ variables، مثل Light أو Dark. ضبط mode على frame أو صفحة يستبدل كل قيمة مرتبطة دفعة واحدة، ويرثه الأبناء.","lesson":"l-fig-3-4"},{"id":"library","term":"المكتبة (Library)","definition":"ملف Figma منشور تستطيع الملفات الأخرى استخدام الـ components والـ styles والـ variables فيه. وتُبلَّغ الملفات التي تستخدمه بالتحديثات، فتختار متى تقبلها.","lesson":"l-fig-3-5"},{"id":"interactive-component","term":"Interactive component","definition":"component set فيه تفاعلات prototype بين الـ variants الخاصة به، مثل On tap مع Change to Done، فتستجيب كل instance في الـ prototypes دون شاشات إضافية.","lesson":"l-fig-4-1"},{"id":"smart-animate","term":"Smart animate","definition":"حركة في الـ prototype تطابق الطبقات ذات الاسم والتسلسل الهرمي نفسيهما في frame-ين، وتحرّك الاختلافات في الموضع والحجم والدوران والشفافية والتعبئة.","lesson":"l-fig-4-1"},{"id":"target-size","term":"حجم الهدف (Target size)","definition":"مساحة النقر في العنصر التفاعلي. يتطلّب المستوى AA في WCAG 2.2 ما لا يقلّ عن 24 × 24 CSS pixels؛ وتوصي Apple بـ 44 نقطة، ويوصي Material بـ 48 dp.","lesson":"l-fig-4-2"},{"id":"ready-for-dev","term":"Ready for dev","definition":"حالة في Dev Mode توضع على الـ sections أو الـ frames أو الـ components لتشير إلى أن التصميم مستقرّ بما يكفي لبنائه. وأي تعديل لاحق يغيّر الحالة تلقائيًا إلى Changed.","lesson":"l-fig-4-3"},{"id":"design-critique","term":"النقد التصميمي (Design critique)","definition":"جلسة منظّمة يقيّم فيها الناس تصميمًا مقابل أهدافه المعلنة، فيقدّمون ملاحظات، وما يترتّب عليها، وأسئلة بدل التفضيلات الشخصية أو الموافقة.","lesson":"l-fig-4-4"}]}