الـ Auto layout: الاتجاه والـ Gap والـ Padding

في الدرس السابق بنيت صف عادة بوضع أيقونة واسم وstreak وزر تعليم يدويًا. الآن غيّر “Read” إلى “Read 20 pages before bed”. يصطدم الاسم بزر التعليم. أضف سطرًا ثانيًا فيتداخل الـ streak مع الصف التالي. كل تغيير في المحتوى يعني تحريك الطبقات، وفي التطبيق الحقيقي يتغيّر المحتوى كل يوم.

الـ Auto layout هو إجابة Figma: تخبر الـ frame كيف يرتّب أبناءه، فيضعهم في أماكنهم نيابة عنك، في كل مرة يتغيّر فيها أي شيء.

الإعدادات الثلاثة الأهم

حدّد طبقات صف العادة واضغط Shift+A، أو انقر Add auto layout في الشريط الجانبي الأيمن. يلفّها Figma في frame بـ Auto layout ويخمّن الإعدادات مبدئيًا. ثلاثة منها تؤدّي معظم العمل.

الـ Flow هو الاتّجاه الذي يُوضع فيه الأبناء. وقت كتابة هذا الدرس، يقدّم Figma الخيارات Vertical وHorizontal وGrid. الـ Vertical يرصّ الأبناء من الأعلى إلى الأسفل، مثل قائمة العادات. والـ Horizontal يصفّهم جنبًا إلى جنب، مثل محتوى صف واحد. والـ Grid يضعهم في صفوف وأعمدة، وهذا يناسب تخطيطًا ثنائي البعد مثل منتقي الأيقونات في لوحة New habit.

الـ Gap هو المسافة بين الأبناء. إنه رقم واحد للـ frame كله، فيكون كل ابن على المسافة نفسها من الذي يليه. يمكنك أيضًا اختيار التوزيع التلقائي، الذي يقدّم وقت الكتابة الخيارات Between وAround وEvenly، لتوزيع المساحة المتبقية بدل تثبيتها. استخدم رقمًا ثابتًا في أغلب الحالات؛ فالتوزيع التلقائي لحالات مثل شريط التبويبات حيث تنتشر العناصر على كامل العرض.

الـ Padding هو المسافة بين الأبناء وحوافّ الـ frame نفسه. يمكنك ضبطه لكل الجهات دفعة واحدة، أو للأفقي والعمودي كلٌّ على حدة، أو لكل جهة منفردة.

بناء صف العادة

هذا هو الصف كـ frames متداخلة بـ Auto layout. لكل frame وظيفة واحدة.

Habit row        Horizontal · gap 12 · padding 12 top/bottom, 16 left/right · align center
├─ Icon          32 × 32
├─ Text stack    Vertical · gap 4
│  ├─ Habit name   Headline 17/24
│  └─ Streak       Caption 13/16
└─ Check button  32 × 32 circle

كومة النصوص frame عمودي مستقلّ لأن الاسم والـ streak مجموعة واحدة (الدرس 1.2: فجوة صغيرة في الداخل، وأكبر في الخارج). والصف أفقي لأن الأيقونة والنص والزر تجلس جنبًا إلى جنب. الـ 4 px داخل كومة النصوص أصغر من الـ 12 px بين عناصر الصف، وهذه أصغر من المسافة بين الصفوف. صار القُرب الآن جزءًا من البنية نفسها، لا شيئًا تحافظ عليه يدويًا.

الآن رُصّ الصفوف. حدّد كل الصفوف واضغط 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. في الصف الأفقي، تختار هل يجلس الأبناء في أعلى الصف أم وسطه أم أسفله؛ وفي الكومة العمودية، هل يلتصقون باليسار أم الوسط أم اليمين. صف العادة يستخدم المحاذاة في الوسط حتى تصطفّ الأيقونة وزر التعليم مع منتصف النص، سواء كان الاسم سطرًا واحدًا أم سطرين.

ولصفوف النصوص ذات الأحجام المختلفة، تقدّم الـ frames الأفقية وقت الكتابة محاذاة على خط الأساس (baseline)، التي تصفّ أسفل الحروف بدل أسفل الصناديق. وهي مثالية لتسمية وقيمة جنبًا إلى جنب، مثل “Streak” و"12 days".

صار صف العادة يتراصّ بشكل صحيح. ما لا يفعله بعد هو التمدّد ليملأ عرض الشاشة، أو السماح للأسماء الطويلة بالالتفاف في المكان الصحيح. هذا هو تغيير الحجم (resizing)، موضوع الدرس التالي.