أول مراجعة تجريها صوفيا لملف أي مصمّم جديد تبدأ في لوحة الطبقات، لا على لوحة العمل. تفتح الشجرة وتقرأ الأسماء. إذا رأت Group 7 وRectangle 12 وFrame 48، تعرف أن الشاشة ستنهار في اللحظة التي يغيّر فيها أحدهم حجمها، أو يصنع منها prototype، أو يسلّمها لمطوّر. قد تبدو لوحة العمل مثالية بينما البنية تحتها كومة فوضوية.
هذا الدرس عن تلك البنية: الحاويات التي تضع فيها العناصر، والأسماء التي تعطيها لها، والقواعد التي تُبقيها في مكانها.
\nفي Figma ثلاث طرق لتجميع الطبقات، وهي ليست قابلة للتبادل.
\nالـ frame حاوية لها حياتها الخاصة. لها عرض وارتفاع تضبطهما أنت، وتعبئة وحدود ونصف قطر زوايا خاصة بها، وخيار Clip content حتى لا يفيض أبناؤها خارجها. الـ frames وحدها يمكن أن تحمل Auto layout وLayout guides وأبناء لهم constraints، والـ prototypes تنتقل بين الـ frames. اضغط F (أو A) واسحب لترسم واحدًا، أو اختر حجم هاتف من القوالب الجاهزة في الشريط الجانبي الأيمن، أو حدّد طبقات موجودة واضغط Cmd+Option+G (Ctrl+Alt+G) لتلفّها في frame.
الـ group (Cmd+G / Ctrl+G) مجرّد حزمة. ليست له تعبئة خاصة، وحجمه هو مجموع أبنائه. حرّك أحد الأبناء فتتغيّر حدود الـ group. وهذا يجعل الـ groups جيدة لشيء واحد: إبقاء مجموعة أشكال معًا، مثل الرسم الصغير لكأس الجائزة في شاشة الـ streak في Steady.
الـ section أداة لتنظيم لوحة العمل. تستخدم الـ sections لجمع الشاشات المترابطة، مثل “Check-in flow”، ولاحقًا لتعليم مسار كامل بأنه جاهز للتطوير (الدرس 4.3). الـ sections ليست جزءًا من الواجهة نفسها.
\n\nارسم frame بحجم 393 × 852، وهو حجم شائع لهواتف iPhone المتوسطة الحالية، وسمّه Today. بداخله ابنِ ثلاثة frames من الأعلى إلى الأسفل: Header وHabit list وTab bar. وداخل Header أضف طبقتي نص بأداة النص (T): “Today” بنمط Large title، والتاريخ بنمط Subhead.
لطبقات النص وضع لتغيير الحجم أهمّ مما يبدو. Auto width يتمدّد أفقيًا كلما كتبت ويناسب التسميات القصيرة. Auto height يُبقي العرض ثابتًا ويتمدّد إلى الأسفل، وهو الصحيح لكل ما قد يلتفّ إلى سطر جديد، مثل أسماء العادات. Fixed size لا يتغيّر أبدًا، وهكذا يُقصّ النص في اللغات الأخرى. اختر Auto height لأسماء العادات: “Meditate” يتّسع في سطر واحد، أما “Practise Spanish vocabulary for 15 minutes” فلا.
\nثم تأتي الأشكال. مستطيل (R) بنصف قطر زوايا 12 px يصبح خلفية صف؛ وشكل بيضاوي (O) يصبح دائرة التعليم. أعطِ كل واحد منها اسمًا بالنقر المزدوج عليه في لوحة الطبقات (أو Cmd+R / Ctrl+R مع تحديد الطبقة).
لوحة الطبقات شجرة. الأبناء يظهرون بإزاحة إلى الداخل تحت آبائهم، والترتيب هو ترتيب التراكب: ما يقع أعلى في القائمة يُرسم فوق غيره. إذا اختفت دائرة التعليم، فالسبب غالبًا أنها تحت خلفية الصف في القائمة.
\nسمِّ الطبقات حسب الدور، لا حسب المظهر: Check button لا Teal circle؛ وStreak لا Text 3. الأسباب عملية. المطوّرون يقرؤون هذه الأسماء في Dev Mode. وSmart animate يطابق الطبقات بين الشاشات بالاسم (الدرس 4.1). والـ Component properties والتعديلات (overrides) أسهل في الإدارة حين تكون الطبقات التي تمسّها مسمّاة. وزميلك الذي يفتح ملفك في الحادية عشرة ليلًا قبل الإطلاق يستطيع أن يجد ما يبحث عنه.
يستخدم الناس Steady على هاتف بعرض 375 وعلى آخر بعرض 430. الـ constraints تخبر كل ابن في الـ frame كيف يتصرّف حين يتغيّر حجم ذلك الـ frame. تضبطها من أدوات ضبط Constraints في الشريط الجانبي الأيمن (في قسم Position وقت كتابة هذا الدرس).
\nالخيارات الأفقية هي Left وRight وLeft and right وCenter وScale؛ والعمودية تقابلها: Top وBottom وTop and bottom وCenter وScale. في Steady:
\nHeader: Left and right مع Top. يتمدّد عرضيًا ويبقى في الأعلى.Habit list: Left and right مع Top and bottom. يملأ المساحة بين الترويسة وشريط التبويبات.Tab bar: Left and right مع Bottom. يلتصق دائمًا بالحافّة السفلية.Add button: Right مع Bottom. يحافظ على إزاحة 20 px عن تلك الزاوية.الـ constraints تنطبق على أبناء الـ frames العادية. حين يستخدم الـ frame الـ Auto layout (الدرس التالي)، يتبع أبناؤه قواعد تغيير الحجم الخاصة بالـ Auto layout بدلًا منها، وتحلّ تلك الإعدادات محلّ أدوات ضبط Constraints.
\nاختبر قبل أن تنتقل. حدّد Today واسحب حافّته لتجعله أضيق وأطول. إذا طفا شيء في المنتصف، أو تداخل، أو قُصّ، فالـ constraints الخاصة به خاطئة. أعِد الـ frame إلى 393 × 852 حين ترضى عن النتيجة.
في الدرس التالي تستبدل معظم هذا التموضع اليدوي بالـ Auto layout، الذي يتولّى المسافات والتراصّ نيابة عنك.
\n","toc":[{"id":"sec-1","text":"الـ Frames والـ Groups والـ Sections","level":2},{"id":"sec-2","text":"بناء هيكل شاشة Today","level":2},{"id":"sec-3","text":"الطبقات: الترتيب والأسماء","level":2},{"id":"sec-4","text":"الـ Constraints: ماذا يحدث حين يتغيّر حجم الـ frame","level":2}],"takeaways":["الـ frame حاوية لها حجمها وتعبئتها وقصّها وتخطيطها وconstraints خاصة بها؛ أما الـ group فمجرّد حزمة يتبع حجمها أبناءها.","استخدم الـ frames افتراضيًا لكل ما هو جزء من الواجهة، واحتفظ بالـ groups للتجمّعات البصرية الحرّة مثل الرسم التوضيحي.","ترتيب لوحة الطبقات هو ترتيب التراكب، ويجب أن تصف أسماء الطبقات أدوارها، لأن التسليم والـ prototype والـ components كلها تقرأ هذه الأسماء.","الـ constraints تخبر العنصر الابن كيف يتحرّك أو يتمدّد حين يتغيّر حجم الـ frame الأب، مثل شريط تبويبات مثبّت يسارًا ويمينًا وفي الأسفل.","اختبر الـ constraints بتغيير حجم الـ frame إلى هاتف أصغر وآخر أكبر قبل أن تعتبر الشاشة منتهية."],"further":[{"title":"Frames in Figma Design","url":"https://help.figma.com/hc/en-us/articles/360041539473-Frames-in-Figma-Design"},{"title":"Apply constraints to define how layers resize","url":"https://help.figma.com/hc/en-us/articles/360039957734-Apply-constraints-to-define-how-layers-resize"},{"title":"Explore the navigation bar and left sidebar","url":"https://help.figma.com/hc/en-us/articles/360039831974-View-layers-and-pages-in-the-left-sidebar"}],"quiz":[{"q":"ترسم شاشة هاتف بحجم 393 × 852، وتضع شريط تبويبات في الأسفل، وتضبط constraints الشريط على Left and right مع Top. ماذا يحدث حين تغيّر حجم الشاشة إلى 430 × 932؟
","options":[{"text":"يبقى الشريط على مسافته القديمة من الأعلى، فيطفو فوق الحافّة السفلية الجديدة.","why":"صحيح. Top يثبّت المسافة من الحافّة العلوية. الشريط السفلي يحتاج الـ constraint Bottom."},{"text":"ينتقل الشريط إلى الحافّة السفلية الجديدة لأن Figma يتعرّف على الأشرطة السفلية.","why":"لا يخمّن Figma نيّتك. إنه يطبّق الـ constraints التي ضبطتها بالضبط."},{"text":"يكبر الشريط بشكل متناسب في الارتفاع والعرض.","why":"هذا ما يفعله الـ constraint Scale. أما Left and right فيمدّ العرض فقط، وTop يثبّت الموضع العمودي."},{"text":"لا يتغيّر شيء، لأن الـ constraints لا تعمل إلا في الـ prototypes.","why":"الـ constraints تعمل على لوحة العمل كلما تغيّر حجم الـ frame الأب، لا في الـ prototypes فقط."}],"answer":0},{"q":"متى يكون الـ group خيارًا أفضل من الـ frame؟
","options":[{"text":"لصف العادة، حتى تتمدّد خلفيته مع الشاشة.","why":"الـ groups لا تحمل تعبئة خاصة بها ولا تطبّق constraints على أبنائها كما يفعل الـ frame. الصف يحتاج frame."},{"text":"للشاشة كلها، لأن الـ groups تُصدَّر أسرع.","why":"سرعة التصدير ليست هي الفرق. الشاشات تحتاج frames من أجل الحجم والقصّ والـ prototype والتخطيط."},{"text":"لرسم توضيحي زخرفي مكوّن من عدّة أشكال يجب أن تتحرّك معًا.","why":"صحيح. التجمّع البصري الحرّ الذي ليس له سلوك تخطيط خاص به هو ما وُجدت الـ groups من أجله."},{"text":"كلما أردت إضافة Auto layout لاحقًا.","why":"الـ Auto layout يعيش على الـ frames. إضافته إلى محتويات group تلفّها في frame جديد على أي حال."}],"answer":2},{"q":"لماذا ترفض صوفيا ملفًا طبقاته مسمّاة “Rectangle 12” و"Frame 48"؟
","options":[{"text":"لأن Figma يبطؤ حين لا تكون أسماء الطبقات فريدة.","why":"الأسماء المكرّرة أو الافتراضية لا تؤثّر في الأداء. الكلفة بشرية ووظيفية، لا تقنية."},{"text":"لأن الأسماء الافتراضية تخفي دور كل طبقة، وميزات مثل Smart animate وDev Mode تعتمد على أسماء ذات معنى.","why":"صحيح. Smart animate يطابق الطبقات بالاسم، والمطوّرون يقرؤون الأسماء في Dev Mode، والزملاء يتنقّلون بها."},{"text":"لأن المطوّرين لا يستطيعون تصدير الطبقات ذات الأسماء الافتراضية.","why":"التصدير يعمل أيًّا كان الاسم. المشكلة أن لا أحد يعرف ما وظيفة “Rectangle 12”."}],"answer":1},{"q":"يجب أن يبقى زر إضافة العادة العائم على بعد 20 px من الزاوية السفلية اليمنى في كل أحجام الهواتف. أيّ constraints تضبط؟
","options":[{"text":"Left وTop.","why":"هذان يثبّتانه في الزاوية العلوية اليسرى. في شاشة أكبر سيبتعد عن الزاوية السفلية اليمنى."},{"text":"Scale وScale.","why":"Scale يحافظ على الموضع والحجم بشكل نسبي، فيكبر الزر ويتحرّك في الشاشات الأكبر."},{"text":"Center وCenter.","why":"Center يُبقيه على إزاحة ثابتة من المنتصف، وهذا ليس الزاوية في حجم شاشة مختلف."},{"text":"Right وBottom.","why":"صحيح. Right وBottom يثبّتان إزاحة 20 px عن هاتين الحافّتين بينما يتغيّر حجم الـ frame."}],"answer":3}],"exercise":{"kind":"spot-bug","language":"text","code":"Today Frame 393×852\n Header Frame constraints: Left and right, Top\n Title \"Today\" Text resizing: Auto width\n Date Text resizing: Auto width\n Habit list Frame constraints: Left and right, Top and bottom\n Habit row Frame constraints: Left and right, Top\n Icon Frame constraints: Left, Center\n Habit name Text resizing: Fixed size\n Streak Text resizing: Auto width\n Check button Ellipse constraints: Right, Center\n Add button Frame constraints: Left, Top\n Tab bar Frame constraints: Left and right, Bottom","bugLines":[8,11],"title":"اعثر على الطبقات التي تنكسر في الهواتف الأخرى","prompt":"هذه شجرة طبقات شاشة Today في Steady، مكتوبة كنص مع نوع كل طبقة والـ constraints الخاصة بها ووضع تغيير حجم النص. تبدو الشاشة صحيحة عند 393 × 852، لكنها تنكسر على هاتف بحجم 430 × 932 ومع أسماء العادات الطويلة. حدّد السطر أو الأسطر التي تسبّب هذه المشكلات.
\n","hints":["فكّر فيما يتغيّر في هاتف أكبر: العرض، أم الارتفاع، أم كلاهما. أيّ الطبقات يجب أن تتبع الحافّة السفلية أو اليمنى؟","أسماء العادات تختلف في طولها. أيّ وضع لتغيير حجم النص يقصّ الاسم الطويل بدل أن يتيح له الالتفاف إلى سطر جديد؟","هناك سطران خاطئان: constraint واحد ووضع واحد لتغيير حجم النص."],"explanation":"السطر 11: زر الإضافة العائم Add button مثبّت على Left, Top، فيبقى في مكانه القديم على الهاتف الأكبر بدل أن يتبع الزاوية السفلية اليمنى. اضبطه على Right, Bottom. السطر 8: Habit name يستخدم Fixed size، فيُقصّ الاسم “Practise Spanish vocabulary for 15 minutes” أو يفيض. استخدم Auto height، الذي يحافظ على العرض ويتيح للاسم الالتفاف. باقي الأسطر سليمة: التسميات القصيرة مثل العنوان والـ streak يناسبها Auto width، والترويسة والقائمة وشريط التبويبات لها الـ constraints المذكورة في الدرس، والصف يتمدّد مع القائمة بينما يبقى زر التعليم مثبّتًا على اليمين.