صار صف العادة يرصّ نفسه، لكن اختبره بطريقة صوفيا: اسحب frame شاشة Today ليصبح أعرض. تبقى الصفوف على عرضها القديم، تاركة شريطًا فارغًا من الشاشة على اليمين. اسحبه ليصبح أضيق فتسقط أزرار التعليم خارج الحافّة. حُلّت مشكلة التراصّ؛ أما الأحجام فلا.
\nفي الـ Auto layout لكل طبقة سلوكان للحجم، واحد للعرض وواحد للارتفاع. اضبطهما بشكل صحيح وسيعمل الصف نفسه على أي هاتف، وبأي لغة، ومع أي اسم عادة.
\nتضبط الحجم من عناصر التحكم في العرض والارتفاع في الشريط الجانبي الأيمن. هناك ثلاثة خيارات.
\nHug contents يجعل الـ frame بحجم أبنائه مع الـ padding بالضبط. الشريحة التي تحتضن محتواها تكبر حين تتغيّر تسميتها من “Daily” إلى “Weekends”. الـ frames والنصوص وحدها يمكنها الاحتضان، لأنها وحدها لها محتوى.
\nFill container يجعل الابن يأخذ كل المساحة المتاحة في أبيه ذي الـ Auto layout على ذلك المحور. وإذا كان أخوان كلاهما على Fill، يتقاسمان المساحة بالتساوي.
\nFixed يضبط حجمًا دقيقًا لا يتغيّر أبدًا. الأيقونات وزر التعليم ثابتة على 32 × 32 لأن هدف النقر في زر التعليم يجب ألّا يكبر أو يصغر مع النص المجاور له.
\nإعدادات صف العادة في Steady هي:
\n| الطبقة | \nالعرض | \nالارتفاع | \n
|---|---|---|
| Habit row | \nFill container | \nHug contents | \n
| Icon وCheck button | \nFixed 32 | \nFixed 32 | \n
| Text stack | \nFill container | \nHug contents | \n
| Habit name وStreak | \nFill container | \nHug contents | \n
اقرأه من الخارج إلى الداخل. الصف يملأ عرض القائمة. وداخله، تملأ كومة النصوص كل ما تتركه الأيقونة والزر، فيندفع الزر إلى الحافّة اليمنى. واسم العادة يملأ عرض الكومة ويحتضن ارتفاعها، فيلتفّ الاسم الطويل إلى سطر ثانٍ ويزداد ارتفاع الصف ليتّسع له. هذا بالضبط السلوك الذي تريده على هاتف بعرض 375 px.
\nيفرض Figma قاعدة واحدة نيابة عنك: لا يمكن للأب أن يحتضن ابنًا يملؤه على المحور نفسه، لأن كلًّا منهما سينتظر قياس الآخر. إذا ضبطت ابنًا على Fill container، يحوّل Figma الأب من Hug إلى Fixed على ذلك المحور.
\n\nقد ينتج Fill وHug أحجامًا سخيفة في الحالات القصوى. الزر بعرض كامل يبدو جيدًا على الهاتف ومضحكًا بعرض 1,000 px على جهاز لوحي. والشريحة التي تحتضن تسمية من حرف واحد قد تصبح أضيق من رأس الإصبع.
\nتضع خيارات الحدّ الأدنى والأقصى للعرض والارتفاع (تجدها في القوائم المنسدلة للعرض والارتفاع) هذه الحدود. يستخدم Steady:
\nشرائح التكرار في لوحة New habit مصفوفة أفقيًا. “Daily, Weekdays, Weekends, Custom” تتّسع عند 393 px لكن ليس عند 320 px أو بالألمانية. فعّل Wrap للصف، فتنتقل الشرائح التي لا تتّسع إلى سطر جديد بدل أن تفيض. وقت كتابة هذا الدرس، يتيح لك الـ frame الملتفّ ضبط المسافة بين الأسطر بشكل منفصل عن الـ gap بين العناصر؛ استخدم الـ 8 px نفسها لتشكّل الشرائح شبكة منتظمة.
\nالـ Wrap لمجموعات العناصر المتشابهة مثل الشرائح أو الوسوم أو الصور الشخصية. لا تجعل صف العادة يلتفّ: ففي شاشة ضيّقة سينزل زر التعليم إلى سطر خاص به.
\nأحيانًا يجب ألّا يشارك ابن واحد في الـ flow أصلًا: شارة لهب صغيرة على زاوية أيقونة العادة، أو نقطة تشير إلى تذكير غير مقروء. حدّده وفعّل Ignore auto layout (كان اسمه absolute position حتى وقت قريب، لذا تستخدم الشروحات القديمة ذلك الاسم). تبقى الطبقة داخل الـ frame لكنها تتوقّف عن التأثير في إخوتها، وتضعها بالـ constraints، هنا Right وTop، فتلتصق بالزاوية حين يتغيّر حجم الأيقونة.
\n\nصارت صفوفك تتكيّف مع العرض والمحتوى. في الدرس التالي تمنح كل تلك الفجوات والـ paddings نظامًا، فتصبح 12 و16 و24 قرارات بدل أن تكون تخمينات.
\n","toc":[{"id":"sec-1","text":"Hug وFill وFixed","level":2},{"id":"sec-2","text":"الحدّ الأدنى والأقصى","level":2},{"id":"sec-3","text":"الـ Wrap","level":2},{"id":"sec-4","text":"إخراج طبقة من الـ flow","level":2}],"takeaways":["لكل طبقة في الـ Auto layout سلوك للعرض وآخر للارتفاع؛ Hug contents يتبع الأبناء، وFill container يأخذ المساحة المتاحة في الأب، وFixed لا يتغيّر أبدًا.","لا يمكن للأب أن يحتضن (Hug) ابنًا يملؤه (Fill) على المحور نفسه، لذلك يحوّل Figma ذلك الأب إلى Fixed.","الحدّ الأدنى والأقصى للعرض يمنعان الـ components من أن تصبح ضيّقة أو عريضة بشكل سخيف في الشاشات غير المعتادة.","خيار Wrap يتيح للمحتوى الأفقي مثل الشرائح أن ينتقل إلى سطر جديد بدل أن يفيض.","خيار Ignore auto layout يخرج ابنًا واحدًا من الـ flow لتحدّد موضعه بالـ constraints، وهذا يناسب الشارات والنقاط العائمة."],"further":[{"title":"Guide to auto layout (resizing, wrap, min and max)","url":"https://help.figma.com/hc/en-us/articles/360040451373-Guide-to-auto-layout"},{"title":"Create a responsive card with auto layout and constraints","url":"https://help.figma.com/hc/en-us/articles/18894664907287-Create-a-responsive-card-with-auto-layout-and-constraints"}],"quiz":[{"q":"يجب أن يمتدّ الزر الأساسي “Save habit” على عرض اللوحة في أي هاتف، مع بقاء ارتفاعه الطبيعي. أيّ الإعدادات تناسب؟
","options":[{"text":"العرض Hug contents، والارتفاع Fill container.","why":"العرض Hug يجعل الزر بعرض تسميته فقط، والارتفاع Fill سيمدّه إلى أسفل اللوحة."},{"text":"العرض Fixed بقيمة 353، والارتفاع Fixed بقيمة 48.","why":"العرض الثابت ينكسر في أي هاتف لا يطابق بالضبط العرض الذي صمّمت عليه."},{"text":"العرض Fill container، والارتفاع Hug contents.","why":"صحيح. Fill يأخذ عرض اللوحة؛ وHug يُبقي الارتفاع مساويًا للتسمية مع الـ padding."},{"text":"العرض Fill container، والارتفاع Fill container.","why":"الارتفاع Fill في لوحة عمودية سيجعل الزر يكبر ليملأ كل المساحة العمودية المتبقية."}],"answer":2},{"q":"داخل صف العادة، كومة النصوص مضبوطة على Hug contents. في هاتف عريض يجلس زر التعليم ملاصقًا لاسم قصير بدل أن يكون على الحافّة اليمنى. ما الإصلاح؟
","options":[{"text":"اضبط عرض كومة النصوص على Fill container لتأخذ المساحة المتبقية وتدفع الزر إلى الحافّة.","why":"صحيح. Fill container يجعل الكومة تمتصّ العرض المتبقي، فيستقرّ الزر عند الـ padding الأيمن."},{"text":"اضبط عرض زر التعليم على Fill container.","why":"سيتمدّد الزر إلى شكل كبسولة عريضة بدل أن يبقى دائرة بقطر 32 px."},{"text":"أضف مستطيلًا مرنًا كفاصل بين النص والزر.","why":"الفواصل تخفي النيّة. الكومة نفسها هي التي يجب أن تأخذ المساحة."},{"text":"اضبط الـ gap في الصف على التوزيع التلقائي.","why":"التوزيع التلقائي قد يدفع الزر إلى اليمين، لكن النص لن يلتفّ عندها عند عرض متوقّع. Fill على الكومة أوضح."}],"answer":0},{"q":"ضبطت عرض بطاقة على Hug contents، ثم ضبطت ابنًا داخلها على Fill container على المحور نفسه. ماذا يفعل Figma؟
","options":[{"text":"يُبقي الإعدادين فتكبر البطاقة إلى ما لا نهاية.","why":"يمنع Figma هذه الحلقة. الأب لا يستطيع قياس أبنائه بينما يقيس أحد الأبناء الأب."},{"text":"يحوّل عرض البطاقة إلى Fixed.","why":"صحيح. الابن الذي يملأ أباه يحتاج أبًا بحجم محدّد، لذا يغيّر Figma الـ Hug إلى Fixed على ذلك المحور."},{"text":"يتجاهل إعداد Fill في الابن.","why":"يحلّ Figma التعارض من جهة الأب، لا الابن."},{"text":"يفعّل Wrap في البطاقة.","why":"الـ Wrap لا علاقة له بذلك. إنه يغيّر فقط طريقة انتقال الأبناء إلى أسطر جديدة."}],"answer":1},{"q":"يعرض Steady شارة لهب صغيرة تتداخل مع الزاوية العلوية اليمنى لأيقونة العادة. كيف تبنيها داخل frame الأيقونة الذي يستخدم Auto layout؟
","options":[{"text":"تضيف الشارة كابن عادي وتضبط gap سالبًا.","why":"الـ gap السالب يجعل كل الإخوة في الـ flow يتداخلون، لا شارة واحدة في زاوية واحدة."},{"text":"تضع الشارة في frame منفصل فوق الصف كله.","why":"لن تتحرّك مع الأيقونة حين يُعاد ترتيب الصف، فستنحرف في الشاشات الأخرى."},{"text":"ترسمها في الأعلى باستخدام group وتحرّكها إلى مكانها.","why":"الـ groups داخل الـ Auto layout تنضمّ إلى الـ flow أيضًا؛ والتحريك اليدوي يضيع مع إعادة الترتيب التالية."},{"text":"تضيف الشارة كابن، وتفعّل Ignore auto layout، وتثبّتها بالـ constraints Right وTop.","why":"صحيح. Ignore auto layout يخرجها من الـ flow، والـ constraints تُبقيها في الزاوية حين يتغيّر حجم الأيقونة."}],"answer":3}],"exercise":{"kind":"choice","multiple":true,"options":["wrap-chips","max-button","fill-label","hug-sheet","fill-chips","ignore-toggle"],"correct":["wrap-chips","max-button","fill-label"],"title":"اجعل لوحة New habit تصمد في أي شاشة","prompt":"سجّل فريق ضمان الجودة (QA) ثلاثة أخطاء على لوحة New habit: على هاتف بعرض 320 px تخرج الشرائح عن الحافّة (انظر الرسم)، ومفتاح Reminder يلتصق بتسميته بدل أن يجلس عند الحافّة اليمنى، وعلى iPad يتمدّد زر Save habit حتى عرض 900 px.
\n:::figure لوحة New habit على هاتف بعرض 320 px\n
\nاللوحة frame عمودي بـ Auto layout وعرضه مضبوط على Fill container. اختر كل تغيير يصلح أحد هذه الأخطاء إصلاحًا سليمًا.
\n","hints":["طابق كل خطأ مع أداة حجم واحدة: Wrap، أو الحدّ الأدنى/الأقصى، أو Fill container.","في حالة مفتاح التبديل، يجب أن تذهب المساحة المتبقية إلى مكان ما. أيّ ابن يجب أن يمتصّها؟","فعّل Wrap لصف الشرائح، وضع حدًّا أقصى لعرض الزر، واجعل التسمية على Fill."],"explanation":"تفعيل Wrap لصف الشرائح يتيح لـ “Custom” الانتقال إلى سطر ثانٍ بدل أن يفيض. والحدّ الأقصى للعرض على زر Save habit (يستخدم Steady القيمة 480) يمنع Fill container من إنتاج شريط بعرض 900 px على الأجهزة اللوحية. وضبط تسمية Reminder على Fill container يجعلها تمتصّ العرض المتبقي، فيندفع مفتاح التبديل إلى الـ padding الأيمن للصف في كل شاشة. أما جعل اللوحة تحتضن محتواها فسيقلّصها إلى عرض أعرض أبنائها بدل أن تملأ الشاشة؛ وجعل كل الشرائح على Fill يمطّها إلى كبسولات غير متساوية؛ وإخراج المفتاح من الـ flow بـ Ignore auto layout يصلح عرضًا واحدًا ويكسر البقية.
\n","checkLabels":{},"optionText":{"wrap-chips":{"text":"فعّل Wrap لصف شرائح التكرار.","why":"صحيح. الشرائح التي لا تتّسع تنتقل إلى سطر جديد، وهذا بالضبط ما وُجد الـ Wrap من أجله."},"max-button":{"text":"امنح زر Save habit حدًّا أقصى للعرض، مثل 480.","why":"صحيح. يحافظ الزر على Fill container في الهواتف لكنه يتوقّف عن النمو في الشاشات الكبيرة."},"fill-label":{"text":"اضبط عرض تسمية Reminder على Fill container.","why":"صحيح. تأخذ التسمية العرض الفائض، فيستقرّ مفتاح التبديل عند الحافّة اليمنى في كل الأحجام."},"hug-sheet":{"text":"اضبط عرض اللوحة على Hug contents.","why":"اللوحة المحتضنة لمحتواها تأخذ عرض أعرض أبنائها، فلن تمتدّ على الشاشة بعد ذلك، وستنتقل الأخطاء إلى مكان آخر بدل أن تختفي."},"fill-chips":{"text":"اضبط كل شريحة على Fill container.","why":"ستتمدّد الشرائح لتتقاسم عرض الصف بالتساوي، ولن تتّسع مع ذلك في شاشة بعرض 320 px. الشرائح يجب أن تحتضن تسمياتها."},"ignore-toggle":{"text":"فعّل Ignore auto layout لمفتاح التبديل واسحبه إلى الحافّة اليمنى.","why":"يمكنك تثبيته بالـ constraints، لكن إخراجه من الـ flow يعني أن التسمية قد تمتدّ الآن تحته. Fill على التسمية أبسط وأمتن."}}},"words":695,"readMinutes":4}