الـ Frames والـ Groups والطبقات والـ Constraints

أول مراجعة تجريها صوفيا لملف أي مصمّم جديد تبدأ في لوحة الطبقات، لا على لوحة العمل. تفتح الشجرة وتقرأ الأسماء. إذا رأت Group 7 وRectangle 12 وFrame 48، تعرف أن الشاشة ستنهار في اللحظة التي يغيّر فيها أحدهم حجمها، أو يصنع منها prototype، أو يسلّمها لمطوّر. قد تبدو لوحة العمل مثالية بينما البنية تحتها كومة فوضوية.

هذا الدرس عن تلك البنية: الحاويات التي تضع فيها العناصر، والأسماء التي تعطيها لها، والقواعد التي تُبقيها في مكانها.

الـ Frames والـ Groups والـ Sections

في Figma ثلاث طرق لتجميع الطبقات، وهي ليست قابلة للتبادل.

الـ 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 ليست جزءًا من الواجهة نفسها.

بناء هيكل شاشة Today

ارسم 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” فلا.

ثم تأتي الأشكال. مستطيل (R) بنصف قطر زوايا 12 px يصبح خلفية صف؛ وشكل بيضاوي (O) يصبح دائرة التعليم. أعطِ كل واحد منها اسمًا بالنقر المزدوج عليه في لوحة الطبقات (أو Cmd+R / Ctrl+R مع تحديد الطبقة).

الطبقات: الترتيب والأسماء

لوحة الطبقات شجرة. الأبناء يظهرون بإزاحة إلى الداخل تحت آبائهم، والترتيب هو ترتيب التراكب: ما يقع أعلى في القائمة يُرسم فوق غيره. إذا اختفت دائرة التعليم، فالسبب غالبًا أنها تحت خلفية الصف في القائمة.

سمِّ الطبقات حسب الدور، لا حسب المظهر: Check button لا Teal circle؛ وStreak لا Text 3. الأسباب عملية. المطوّرون يقرؤون هذه الأسماء في Dev Mode. وSmart animate يطابق الطبقات بين الشاشات بالاسم (الدرس 4.1). والـ Component properties والتعديلات (overrides) أسهل في الإدارة حين تكون الطبقات التي تمسّها مسمّاة. وزميلك الذي يفتح ملفك في الحادية عشرة ليلًا قبل الإطلاق يستطيع أن يجد ما يبحث عنه.

الـ Constraints: ماذا يحدث حين يتغيّر حجم الـ frame

يستخدم الناس Steady على هاتف بعرض 375 وعلى آخر بعرض 430. الـ constraints تخبر كل ابن في الـ frame كيف يتصرّف حين يتغيّر حجم ذلك الـ frame. تضبطها من أدوات ضبط Constraints في الشريط الجانبي الأيمن (في قسم Position وقت كتابة هذا الدرس).

الخيارات الأفقية هي Left وRight وLeft and right وCenter وScale؛ والعمودية تقابلها: Top وBottom وTop and bottom وCenter وScale. في Steady:

• Header: ‏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.

اختبر قبل أن تنتقل. حدّد Today واسحب حافّته لتجعله أضيق وأطول. إذا طفا شيء في المنتصف، أو تداخل، أو قُصّ، فالـ constraints الخاصة به خاطئة. أعِد الـ frame إلى 393 × 852 حين ترضى عن النتيجة.

في الدرس التالي تستبدل معظم هذا التموضع اليدوي بالـ Auto layout، الذي يتولّى المسافات والتراصّ نيابة عنك.