اطلب من ثلاثة مصمّمين ضبط المسافات في بطاقة العادة نفسها، وستحصل على padding بمقدار 14 و15 و16 px. لا أحد منهم مخطئ بمفرده. لكن معًا، عبر أربعين شاشة، يصنعون تطبيقًا يبدو غير ثابت قليلًا، المقابل البصري لطاولة إحدى أرجلها أقصر.
\nأداتان تمنعان ذلك. الـ Layout guides تعطي كل شاشة الهيكل نفسه لتحاذي عليه، ونظام المسافات يحصر الأرقام المسموح لك باستخدامها.
\nوقت كتابة هذا الدرس، يسمّيها Figma layout guides؛ والشروحات القديمة تسمّيها layout grids. إنها أدوات بصرية مساعدة مرتبطة بالـ frame: تراها أثناء التصميم، ولا تظهر أبدًا في الملفات المُصدَّرة، ولا تحرّك شيئًا من تلقاء نفسها. حدّد frame وأضف واحدًا من قسم الـ Layout guide في الشريط الجانبي الأيمن.
\nهناك ثلاثة أنواع:
\nللأعمدة والصفوف أربع خصائص. Count هو العدد. وType يحدّد طريقة توزّعها: Stretch يجعلها تكبر مع الـ frame، بينما Left وCenter وRight تُبقي الأعمدة بعرض ثابت ومثبّتة في تلك الجهة. وMargin هو المسافة بين الأعمدة الخارجية وحوافّ الـ frame. وGutter هو المسافة بين الأعمدة.
\nلشاشات الهاتف في Steady، استخدم guide من 4 أعمدة من نوع Stretch بهامش 20 px وgutter بمقدار 16 px.
\nمعظم محتوى الهاتف يمتدّ على الأعمدة الأربعة؛ ويثبت الـ guide قيمته حين تقسم العرض، مثل بطاقتي إحصاءات متجاورتين في شاشة Habit detail، تمتدّ كلٌّ منهما على عمودين. وعلى الجهاز اللوحي ستنتقل إلى 8 أو 12 عمودًا بهوامش أعرض. ويمكنك حفظ الـ guide كـ style لتستخدم كل الشاشات الـ guide نفسه.
\nنظام الـ 8 نقاط (8-point system) يقول: المسافات وأحجام الـ components مضاعفات للرقم 8، مع السماح بـ 4 كنصف خطوة للتفاصيل الصغيرة. الأسباب عملية، لا غامضة:
\nسلّم المسافات في Steady قصير ومسمّى:
\nspace-1 4 icon-to-label, name-to-streak\nspace-2 8 between habit rows, between chips\nspace-3 12 inside rows, gap between row elements\nspace-4 16 card padding, gutter\nspace-5 20 screen side margin\nspace-6 24 between blocks on a screen\nspace-8 32 between the header and the content\nspace-12 48 tap height of the Save habit buttonربما لاحظت أن 12 و20 ليستا من مضاعفات 8. هذه قاعدة نصف الخطوة: الزيادات بمقدار 4 نقاط مسموحة حيث تكون خطوة 8 كبيرة أكثر من اللازم، وتعمل فرق كثيرة بهذه الطريقة، منها الفريق الذي يقف وراء Material Design. ما يهمّ أن تكون القائمة قصيرة وأن يستخدمها الجميع. والأسماء (space-4 تعني 16) ستصبح variables في القسم 3، فيعيش السلّم في الملف لا في ذاكرة أحدهم.
والنص يُعامَل بالطريقة نفسها: ارتفاعات الأسطر في سلّم أحجام الخط الخاص بـ Steady (24 و20 و16) مضاعفات للرقم 4، فيقع ارتفاع أي كتلة نص دائمًا على الشبكة ويتناغم مع الـ padding المحيط بها.
\n\n\nالشبكة في خدمتك، لا العكس. أيقونة التشغيل داخل دائرة تبدو منحرفة عن المركز حين تكون متوسّطة رياضيًا، لأن ثقلها البصري يميل إلى اليسار؛ فيحرّكها المصمّمون 1 أو 2 px إلى اليمين عن قصد. هذا تصحيح بصري له سبب، وهو بالضبط ما يسمح به النظام.
\nفي الدرس التالي تجمع الـ Layout guides والـ Auto layout والـ constraints معًا، وتجعل شاشة واحدة تعمل على الهواتف من الصغيرة إلى الكبيرة.
\n","toc":[{"id":"sec-1","text":"الـ Layout guides","level":2},{"id":"sec-2","text":"نظام الـ 8 نقاط","level":2}],"takeaways":["الـ Layout guides (التي كانت تُسمّى layout grids) أدوات بصرية مساعدة على الـ frame؛ الأعمدة والصفوف والشبكة المنتظمة تساعدك على المحاذاة، لكنها لا تحرّك شيئًا نيابة عنك.","تخطيط الهاتف يحتاج عادةً guide من 4 أعمدة بهوامش جانبية وفواصل (gutters) ثابتة؛ والأجهزة اللوحية وسطح المكتب تستخدم أعمدة أكثر.","نظام الـ 8 نقاط يحصر المسافات والأحجام في مضاعفات 8، مع 4 كنصف خطوة، فتتدرّج القيم بشكل نظيف وتبقى متّسقة.","سلّم مسافات قصير ومسمّى يحوّل الجدال حول 14 أو 15 بكسل إلى اختيار الخطوة الصحيحة.","ارتفاعات الأسطر على مضاعفات 4 تُبقي كتل النص على إيقاع واحد مع بقية التخطيط."],"further":[{"title":"Create layout guides","url":"https://help.figma.com/hc/en-us/articles/360040450513-Create-layout-guides"},{"title":"Combine layout guides and constraints","url":"https://help.figma.com/hc/en-us/articles/360039957934-Combine-layout-guides-and-constraints"},{"title":"Grids and spacing (Material Design 3)","url":"https://m3.material.io/foundations/layout/understanding-layout/spacing"}],"quiz":[{"q":"بطاقة العادة عند زميلك تستخدم padding بمقدار 14 px وgap بمقدار 10 px و22 px بين البطاقات. تنتقل إلى سلّم الـ 8 نقاط في Steady. ما أفضل تحويل؟
","options":[{"text":"تبقى 14 و10 و22، لأن السلّم يطبَّق على العمل الجديد فقط.","why":"الأنظمة المختلطة هي بداية الانجراف. انقل القيم القديمة إلى السلّم كلما لمستها."},{"text":"تقريب كل شيء إلى 16، فتتطابق الفجوات الثلاث.","why":"المسافات المتساوية تمحو التجميع. الفجوات الداخلية والخارجية تحتاج خطوات مختلفة."},{"text":"padding بمقدار 16، وgap بمقدار 8، و24 بين البطاقات.","why":"صحيح. تنتقل كل قيمة إلى خطوة مجاورة على السلّم، وتحافظ النتيجة على قاعدة أن المسافة في الداخل أصغر منها في الخارج (8، ثم 16، ثم 24)."},{"text":"padding بمقدار 12، وgap بمقدار 12، و12 بين البطاقات.","why":"كل الفجوات متساوية من جديد، فتختلط البطاقات بمحتوياتها."}],"answer":2},{"q":"ماذا تفعل الـ Layout guides في Figma حين تغيّر حجم الـ frame؟
","options":[{"text":"تنقل كل ابن إلى أقرب عمود تلقائيًا.","why":"الـ guides لا تحرّك الطبقات من تلقاء نفسها أبدًا. الـ constraints والـ Auto layout هي التي تحرّك."},{"text":"تعيد حساب الأعمدة (في حالة Stretch)، ويتبعها الأبناء المقيّدون بالأعمدة إذا ضبطت الـ constraints الخاصة بهم على ذلك.","why":"صحيح. أعمدة Stretch يتغيّر عرضها مع الـ frame، والـ constraints المرتبطة بالأعمدة تجعل الأبناء يتبعونها."},{"text":"لا شيء، لأن الـ Layout guides صورة ثابتة.","why":"أعمدة Stretch يتغيّر حجمها فعلًا مع الـ frame، وهذا ما يجعلها مفيدة في العمل المتجاوب."},{"text":"تحذف نفسها إذا أصبح الـ frame ضيّقًا جدًا.","why":"الـ guides لا تُحذف عند تغيير الحجم؛ إنها تصبح أضيق فقط."}],"answer":1},{"q":"لماذا تختار فرق كثيرة الرقم 8 وحدةً أساسية بدل 5 أو 10؟
","options":[{"text":"مضاعفات 8 تنقسم بلا كسور على كثافات العرض الشائعة 1.5× و2× و3×، وتطابق أبعاد أجهزة كثيرة.","why":"صحيح. 8 × 1.5 = 12 بكسلًا كاملًا، بينما 5 × 1.5 = 7.5 تترك أنصاف بكسلات تطمس الحوافّ."},{"text":"لأن مقدار التحريك (nudge) في Figma ثابت على 8 px ولا يمكن تغييره.","why":"التحريك الكبير في Figma افتراضيًا 10 px ويمكن تغييره من التفضيلات. الأداة ليست السبب."},{"text":"لأن WCAG تشترط مسافات من مضاعفات 8.","why":"لدى WCAG قواعد للمسافات تخصّ تعديلات النص، لا وحدة أساسية للتخطيط."},{"text":"لأن الشاشات ترسم أسرع حين تقبل الأحجام القسمة على 8.","why":"لا توجد فائدة في سرعة الرسم. الفائدة هي التدرّج النظيف وقرارات أقل."}],"answer":0}],"exercise":{"kind":"spot-bug","language":"json","code":"{\n \"screen\": { \"paddingX\": 20, \"paddingTop\": 32, \"gap\": 24 },\n \"title\": { \"style\": \"Title\", \"lineHeight\": 36 },\n \"statsRow\": { \"flow\": \"horizontal\", \"gap\": 16 },\n \"statCard\": { \"padding\": 14, \"gap\": 4 },\n \"calendar\": { \"flow\": \"grid\", \"gap\": 8, \"cellSize\": 40 },\n \"streakBanner\": { \"padding\": 16, \"gap\": 12, \"radius\": 12 },\n \"editButton\": { \"height\": 48, \"paddingX\": 18, \"radius\": 12 },\n \"caption\": { \"style\": \"Caption\", \"lineHeight\": 16 }\n}","bugLines":[5,8],"title":"دقّق المسافات في شاشة Habit detail","prompt":"أرسل متعاقد مواصفات المسافات لشاشة Habit detail في Steady بصيغة JSON. يستخدم Steady سلّمًا من مضاعفات 8 مع نصف خطوة بمقدار 4: 4, 8, 12, 16, 20, 24, 32, 48، وارتفاعات أسطر على مضاعفات 4. حدّد كل سطر فيه قيمة خارج النظام.
\n","hints":["افحص كل رقم مقابل السلّم، بما في ذلك الـ padding داخل الـ components الصغيرة.","نصف قطر الزوايا وأحجام الخلايا تُحسب أيضًا، لكنها كلها سليمة هنا. ركّز على قيم الـ padding.","في سطرين قيمة padding ليست من مضاعفات 4."],"explanation":"السطر 5: الـ padding في statCard بقيمة 14 خارج السلّم. استخدم 16، وهو الـ padding نفسه في البطاقات الأخرى، فتصطفّ بطاقات الإحصاءات مع شريط الـ streak. السطر 8: الـ padding الأفقي في editButton بقيمة 18 خارج السلّم. استخدم 16 (أو 20 إن احتاجت التسمية مساحة أكبر)؛ فمع ارتفاع 48 px ونصف قطر زوايا 12 px، تتّسق 16 مع بقية المجموعة. كل ما عدا ذلك على النظام: 20 و24 و32 للشاشة، و16 و8 للفجوات، وخلية تقويم بحجم 40 px، وارتفاعا سطر 36 و16.