في الدرس السابق بنيت صف عادة بوضع أيقونة واسم وstreak وزر تعليم يدويًا. الآن غيّر “Read” إلى “Read 20 pages before bed”. يصطدم الاسم بزر التعليم. أضف سطرًا ثانيًا فيتداخل الـ streak مع الصف التالي. كل تغيير في المحتوى يعني تحريك الطبقات، وفي التطبيق الحقيقي يتغيّر المحتوى كل يوم.
\nالـ Auto layout هو إجابة Figma: تخبر الـ frame كيف يرتّب أبناءه، فيضعهم في أماكنهم نيابة عنك، في كل مرة يتغيّر فيها أي شيء.
\nحدّد طبقات صف العادة واضغط Shift+A، أو انقر Add auto layout في الشريط الجانبي الأيمن. يلفّها Figma في frame بـ Auto layout ويخمّن الإعدادات مبدئيًا. ثلاثة منها تؤدّي معظم العمل.
الـ Flow هو الاتّجاه الذي يُوضع فيه الأبناء. وقت كتابة هذا الدرس، يقدّم Figma الخيارات Vertical وHorizontal وGrid. الـ Vertical يرصّ الأبناء من الأعلى إلى الأسفل، مثل قائمة العادات. والـ Horizontal يصفّهم جنبًا إلى جنب، مثل محتوى صف واحد. والـ Grid يضعهم في صفوف وأعمدة، وهذا يناسب تخطيطًا ثنائي البعد مثل منتقي الأيقونات في لوحة New habit.
\nالـ Gap هو المسافة بين الأبناء. إنه رقم واحد للـ frame كله، فيكون كل ابن على المسافة نفسها من الذي يليه. يمكنك أيضًا اختيار التوزيع التلقائي، الذي يقدّم وقت الكتابة الخيارات Between وAround وEvenly، لتوزيع المساحة المتبقية بدل تثبيتها. استخدم رقمًا ثابتًا في أغلب الحالات؛ فالتوزيع التلقائي لحالات مثل شريط التبويبات حيث تنتشر العناصر على كامل العرض.
\nالـ Padding هو المسافة بين الأبناء وحوافّ الـ frame نفسه. يمكنك ضبطه لكل الجهات دفعة واحدة، أو للأفقي والعمودي كلٌّ على حدة، أو لكل جهة منفردة.
\nهذا هو الصف كـ frames متداخلة بـ Auto layout. لكل frame وظيفة واحدة.
\nHabit row Horizontal · gap 12 · padding 12 top/bottom, 16 left/right · align center\n├─ Icon 32 × 32\n├─ Text stack Vertical · gap 4\n│ ├─ Habit name Headline 17/24\n│ └─ Streak Caption 13/16\n└─ Check button 32 × 32 circleكومة النصوص frame عمودي مستقلّ لأن الاسم والـ streak مجموعة واحدة (الدرس 1.2: فجوة صغيرة في الداخل، وأكبر في الخارج). والصف أفقي لأن الأيقونة والنص والزر تجلس جنبًا إلى جنب. الـ 4 px داخل كومة النصوص أصغر من الـ 12 px بين عناصر الصف، وهذه أصغر من المسافة بين الصفوف. صار القُرب الآن جزءًا من البنية نفسها، لا شيئًا تحافظ عليه يدويًا.
\nالآن رُصّ الصفوف. حدّد كل الصفوف واضغط Shift+A مرة أخرى: يلفّها Figma في frame عمودي، هو Habit list، بـ gap مقداره 8 px. لُفّ كتلة التقدّم والقائمة في frame عمودي بـ gap مقداره 24 px، ثم لُفّ الترويسة وذلك الـ frame في frame عمودي آخر بـ padding أفقي 20 px وgap مقداره 32 px. مستويان من الـ gap يعطيانك المسافات المتدرّجة من الدرس 1.2، وصارت شاشة Today كلها مبنية بالـ Auto layout. غيّر أي اسم، أو أضف عادة سادسة، أو احذف واحدة، وسيتحرّك كل ما تحتها ليفسح المجال.
كل frame بـ Auto layout يتحكّم أيضًا في كيفية اصطفاف أبنائه على المحور المعاكس للـ flow. في الصف الأفقي، تختار هل يجلس الأبناء في أعلى الصف أم وسطه أم أسفله؛ وفي الكومة العمودية، هل يلتصقون باليسار أم الوسط أم اليمين. صف العادة يستخدم المحاذاة في الوسط حتى تصطفّ الأيقونة وزر التعليم مع منتصف النص، سواء كان الاسم سطرًا واحدًا أم سطرين.
\nولصفوف النصوص ذات الأحجام المختلفة، تقدّم الـ frames الأفقية وقت الكتابة محاذاة على خط الأساس (baseline)، التي تصفّ أسفل الحروف بدل أسفل الصناديق. وهي مثالية لتسمية وقيمة جنبًا إلى جنب، مثل “Streak” و"12 days".
\n\n\nصار صف العادة يتراصّ بشكل صحيح. ما لا يفعله بعد هو التمدّد ليملأ عرض الشاشة، أو السماح للأسماء الطويلة بالالتفاف في المكان الصحيح. هذا هو تغيير الحجم (resizing)، موضوع الدرس التالي.
\n","toc":[{"id":"sec-1","text":"الإعدادات الثلاثة الأهم","level":2},{"id":"sec-2","text":"بناء صف العادة","level":2},{"id":"sec-3","text":"المحاذاة","level":2}],"takeaways":["الـ Auto layout يجعل الـ frame يرتّب أبناءه نيابة عنك، فلا يعني تغيير المحتوى بعد الآن تحريك الطبقات يدويًا.","الـ Flow يحدّد الاتّجاه (عمودي أو أفقي أو شبكي)، والـ gap يحدّد المسافة بين الأبناء، والـ padding يحدّد المسافة بين الأبناء وحوافّ الـ frame.","المسافات مسؤولية الـ frame الأب، لا مستطيلات فارغة تُستخدم كفواصل ولا إزاحات على الأبناء.","الـ components الحقيقية frames متداخلة بـ Auto layout، مثل صف أفقي يحتوي على كومة نصوص عمودية.","معظم أخطاء الـ Auto layout تأتي من إعدادات على المستوى الخطأ من التداخل، فافحص الأب قبل أن تلوم الابن."],"further":[{"title":"Guide to auto layout","url":"https://help.figma.com/hc/en-us/articles/360040451373-Guide-to-auto-layout"},{"title":"Use the horizontal and vertical flows in auto layout","url":"https://help.figma.com/hc/en-us/articles/31289464393751-Use-the-horizontal-and-vertical-flows-in-auto-layout"}],"quiz":[{"q":"تغيّر اسم عادة من “Run” إلى “Run 5 km before work” داخل صف عادة يستخدم Auto layout. ماذا يحدث لزر التعليم على اليمين؟
","options":[{"text":"يتداخل مع الاسم الأطول حتى تحرّكه بنفسك.","why":"هذا ما يحدث في frame بلا Auto layout. الـ Auto layout يعيد حساب المواضع كلما تغيّر المحتوى."},{"text":"يبقى في مكانه تمامًا، لأن الأزرار ثابتة.","why":"الأبناء في الـ Auto layout ليس لهم x وy ثابتان. موضعهم يأتي من الـ flow والـ gap وإخوتهم."},{"text":"يُدفع على امتداد الـ flow، أو يلتفّ الاسم إلى سطر جديد، بحسب إعدادات تغيير الحجم للصف والنص.","why":"صحيح. يعيد الصف ترتيب نفسه ويحافظ الزر على الـ gap بينه وبين النص. أما هل يلتفّ الاسم أم يكبر الصف فهو خيار من خيارات تغيير الحجم (الدرس التالي)."},{"text":"يعرض Figma تحذيرًا بأن المحتوى لم يعد يتّسع.","why":"لا يوجد تحذير كهذا في Figma. الـ Auto layout يكيّف التخطيط بدلًا من ذلك."}],"answer":2},{"q":"كومة النصوص داخل صف العادة فيها gap بمقدار 4 px، وللصف padding أيسر بمقدار 16 px. أضاف مصمّم مستطيلًا فارغًا بعرض 16 px قبل الأيقونة ليدفعها إلى اليمين. ما الخطأ؟
","options":[{"text":"لا شيء، لأن النتيجة تبدو متطابقة.","why":"تبدو متطابقة إلى أن يغيّر أحدهم الـ padding أو يستبدل الأيقونة. الفواصل المخفية تجعل فهم المسافات وتسليمها مستحيلًا."},{"text":"المسافات يجب أن تأتي من الـ padding والـ gap في الأب، لا من طبقات غير مرئية.","why":"صحيح. إذا احتاجت الأيقونة مساحة أكبر، فغيّر الـ padding في الصف. الطبقات الفاصلة تظهر كمربّعات غامضة في Dev Mode."},{"text":"لا يمكن أن تكون المستطيلات أبناءً لـ frames بـ Auto layout.","why":"يمكن ذلك. المشكلة في استخدام المستطيل كفاصل، لا في كونه مسموحًا."},{"text":"يجب أن يكون المستطيل 8 px حتى يبقى المجموع على شبكة الـ 8 نقاط.","why":"تغيير الحجم يُبقي مشكلة الفاصل المخفي. قيم المسافات مكانها الـ padding والـ gap."}],"answer":1},{"q":"أيّ بنية تصف صف العادة في Steady على أفضل وجه؟
","options":[{"text":"frame عمودي بـ Auto layout يحتوي الأيقونة والاسم والـ streak وزر التعليم.","why":"كومة عمودية واحدة ستضع زر التعليم تحت الـ streak بدل أن يكون بجانب النص."},{"text":"group يحتوي أربع طبقات موضوعة يدويًا.","why":"الـ groups لا تستخدم Auto layout، فكل تغيير في المحتوى يعني إعادة التموضع يدويًا."},{"text":"Auto layout شبكي (Grid) بعمود لكل عنصر.","why":"الـ Grid يناسب التخطيطات ثنائية البعد مثل منتقي الأيقونات، لا صفًا واحدًا فيه كومة نصوص متداخلة."},{"text":"frame أفقي بـ Auto layout يحتوي الأيقونة وكومة نصوص عمودية وزر التعليم.","why":"صحيح. الصف يمتدّ أفقيًا، والاسم والـ streak يتراصّان عموديًا داخل frame خاص بهما."}],"answer":3},{"q":"داخل صف عادة أفقي، تجلس الأيقونة في الأعلى بينما النص وزر التعليم في المنتصف. أين تصلح ذلك؟
","options":[{"text":"في frame الصف، بضبط المحاذاة بحيث يتوسّط الأبناء عموديًا.","why":"صحيح. محاذاة الأبناء خاصية من خصائص الـ frame الأب الذي يستخدم Auto layout."},{"text":"في الأيقونة، بتحريكها 6 px إلى الأسفل.","why":"لا يمكنك تحديد موضع ابن يدويًا في الـ Auto layout دون إخراجه من الـ flow. المحاذاة مكانها الأب."},{"text":"في الصفحة، بإضافة Layout guide.","why":"الـ Layout guides تساعدك على محاذاة الـ frames، لكنها لا تغيّر محاذاة الـ Auto layout."}],"answer":0}],"exercise":{"kind":"fill","language":"text","template":"Chip (auto layout)\n Flow: {{0}}\n Gap between items: {{1}}\n Padding left/right: {{2}}\n Padding top/bottom: {{3}}\n Align children: {{4}}\n\nFrequency chips (auto layout)\n Flow: {{5}}\n Gap between items: {{6}}","blanks":[{"answers":["Horizontal"]},{"answers":["4","4px","4 px"]},{"answers":["12","12px","12 px"]},{"answers":["6","6px","6 px"]},{"answers":["Center","Centre","Middle","Center vertically","Centered","Centred","Vertical center","Left center","Center left"]},{"answers":["Horizontal"]},{"answers":["8","8px","8 px"]}],"title":"اضبط شرائح التكرار","prompt":"في لوحة New habit صفّ من شرائح التكرار (chips): Daily وWeekdays وWeekends وCustom. كل شريحة أيقونة بحجم 16 × 16 تليها تسميتها. من مواصفات المطوّر (redline):
\nأكمل إعدادات الـ Auto layout لشريحة واحدة وللصف الذي يحمل الشرائح الأربع. استخدم الأسماء كما يعرضها Figma (Vertical أو Horizontal أو Grid للـ flow، وTop أو Center أو Bottom للمحاذاة) والأرقام بالـ px.
\n","hints":["هناك frame-ان: كل شريحة، والصف الذي يحتوي الشرائح. أيّهما يملك الـ 8 px؟","المسافة بين الأبناء هي الـ gap؛ والمسافة بين الأبناء وحافّة الـ frame هي الـ padding.","الشريحة: Horizontal، وgap 4، وpadding 12 و6، ومحاذاة Center. الصف: Horizontal، وgap 8."],"explanation":"كل شريحة frame بـ Auto layout من نوع Horizontal لأن الأيقونة والتسمية متجاورتان. الـ 4 px بينهما هي الـ gap في الشريحة؛ والـ 12 px والـ 6 px حولهما هي الـ padding الخاص بها (والـ 6 خارج سلّم المسافات عن قصد: مع سطر تسمية بارتفاع 20 px تعطي الشريحة ارتفاعًا مضبوطًا قدره 32 px، وهذا هو نوع السبب المكتوب الذي يطلبه الدرس 2.3)؛ والتوسيط هو محاذاة الشريحة، ويُضبط في الأب لا بتحريك الأيقونة. أما الـ 8 px بين الشرائح فتخصّ الصف الأب، وهو frame آخر من نوع Horizontal بـ gap مقداره 8 px. وضع كل قيمة على الـ frame الذي يملكها يعني أن المطوّر يستطيع قراءتها مباشرة من Dev Mode، وأن تسمية أطول مثل “Weekends” تكبّر شريحتها دون أن تكسر الصف.
\n","checkLabels":{}},"words":663,"readMinutes":4}