قد يبدو إتقان المكونات الديناميكية التي تتمدد تلقائيًا في Figma أمرًا شاقًا، خاصة داخل إطار Auto Layout. فطريقة عملها مختلفة بعض الشيء، وقد تمنعكم من أن تصبحوا خبراء التصميم المتجاوب الذين طالما حلمتم أن تكونوا. لكنني لن أتناول الأساسيات هنا. تنبع أكثر المشكلات شيوعًا عادةً من سوء فهم طريقة عمل Auto Layout والـ Constraints في Figma. لن أتعمق كثيرًا في الموضوع، فهناك دروس فيديو كثيرة (حتى من Figma نفسها) تشرحه أفضل مما أستطيع. معرفة الفرق بينهما أمر حاسم لكل من يقضي يومه بين المكونات (components). إليكم مقاطع فيديو مفيدة ستساعدكم على الإلمام بالموضوع بسرعة.

Constraints

Auto Layout

بعد أن تنتهوا منها، إليكم بعض النصائح البسيطة التي قد تساعدكم على النجاة في عالم التصميم المتجاوب وفوضاه:

1. Frame أم لا Frame

كثيرًا ما سُئلت عن طريقة عمل الـ frames والـ groups في Figma. ويمكنني أن أقدم لكم شرحًا في غاية البساطة كهذا:

بالنسبة إلى عملية التصميم لدينا، فإن الـ frame:

• هو حاوية تضعون العناصر داخلها
• له لون تعبئة وحدود خاصة به (لذا يُفضّل ألا تضعوا خلفه مستطيلًا ملوّنًا إضافيًا كخلفية)
• له حدوده الخاصة، ويُقص المحتوى إذا تجاوزها (مثل كائن الـ mask)

أما الـ group، فهو:

• لتجميع (بالطبع) عدة كائنات لتحريكها وتغيير حجمها معًا
• وهذا كل شيء… فعلًا.

قد يبدو التعريف غامضًا، فدعوني أوضحه أكثر.

2. الـ Constraints والتصميم المتجاوب

في التصميم المتجاوب، يجب أن ترتبط عناصر الواجهة بالعنصر الأب الذي يحتويها، أي أن عليكم إخبار المكوّن بأن يلتصق بشيء ما عند تغيّر حجم الشاشة. يمكن التعامل مع ذلك بتطبيق الـ constraints داخل frame (إن كنتم قادمين من Sketch أو Illustrator، فنعم، ما كنتم تسمونه artboard هو أيضًا frame هنا). هذا السلوك مستوحى من الحاوية الفعلية التي يستخدمها المطور في كود الواجهة الأمامية.

في Figma، الـ group: - ليست له constraints خاصة به، ويلتصق بالـ frame الأب الذي يوجد فيه أيًّا كان.

- يحتاج إلى طبقة mask إضافية لإخفاء ما يتجاوز حدوده، على عكس الـ frame الذي يقص المحتوى بنقرة واحدة، مما ينتج ترتيب طبقات نظيفًا: ليس من غير المألوف أن يحتوي الـ viewport على frames متداخلة بعضها داخل بعض. فكروا فيها كميزة القص القديمة في Photoshop، حيث يكون لمحتواكم حدود ثابتة يُعرض داخلها.

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

3. جنون Auto Layout

إلى جانب المرونة الجيدة بين أحجام الشاشات المختلفة، فإن وجود Auto Layout يرتّب نفسه ضمن padding محدد يعني وقتًا أقل في إعادة ترتيب البطاقات واحدة تلو الأخرى عند كل تعديل.

المشكلة أنه في بعض الحالات لا يعمل جيدًا مع مكوّن تصميم متجاوب. لماذا؟ تخيلوا مكوّن زر واحدًا يتمدد وفق padding بمقدار 16px، ويتمدد أيضًا ليملأ الشاشة كاملة على الجوال. وجود قاعدة غير واضحة لعنصر ما كابوس إداري لأي فريق Design Ops.

لحل ذلك، قررنا الجمع بين كثير من "كائنات Auto Layout" و"الكائنات المتجاوبة"، فحصلنا على نموذج قالب لواجهات الجوال والواجهات الأمامية المتجاوبة معًا.

4. خيار Auto Layout الجديد غريب نوعًا ما…

كُتبت هذه المقالة قبل (لكنها نُشرت بعد) إصدار تحديث Auto Layout الجديد في Figma. اقرأوا المزيد عنه هنا

آه، ذلك الزر الصغير الذي يشبه المفك الغريب في صندوق أدواتكم. لا مكان له في أي درج، لكنكم تشعرون بأن شيئًا ينقصكم حين لا يكون موجودًا.

يظهر هذا الخيار في الشريط الجانبي الأيمن بمجرد إعداد Auto Layout داخل أي frame أو group. يمدّ هذا الخيار الصغير الـ group أو الـ frame ليلائم عرض كائن Auto Layout، فيتمدد كل ما بداخله مع الحدود الجديدة (إن كان فيه شيء يتقلص أو يتمدد). وهنا يأتي دور الـ constraints: كلما أحسنتم إعدادها، تصرفت المكونات ذات الأحجام الديناميكية بشكل أنسب.

من دون خيار التمدد هذا، قد تنهار فائدة الميزة بأكملها. ومع ذلك يبدو الزر نفسه في غير مكانه إلى حد يُذهلكم، فقد كان مخبأً أمام أعينكم طوال هذا الوقت. مثل ذلك الفرد الغريب والمحبوب في العائلة، أليس كذلك؟\

5. إن لم تستطيعوا إنجازه، فككوه ثم أعيدوا بناءه.

قد يبدو هذا كأنني أعلمكم إصلاح غسالة. صدقوني، هكذا تعمل هاتان الميزتان بالضبط.

معظم إحباطاتي (وإحباطات زملائي) تنبع عادةً من سوء فهم طريقة عمل الكائن داخل الـ frame، أو من الحيرة بين إعداد الـ constraints ومكونات Auto Layout بالطريقة نفسها.

إن اصطدمتم بعقبة تقنية، فمن الأفضل تفكيك كل شيء والبدء من كل عنصر على حدة، مثل حقل الإدخال، والعنوان (Label)، ونص الخطأ، والزر، والأيقونة، ثم إعادة البناء تدريجيًا حتى تصلوا إلى المكوّن الكامل. أنشئوا main component تجريبيًا لتحديد الـ constraints والسلوك، ثم اختبروا هذه الإعدادات باستخدام instance.

ففي النهاية، لم يكن الأمر سوى مجموعة من الطبقات المترابطة. تذكروا ألا تختبروا أبدًا، وأعني أبدًا، إعدادات Auto Layout مباشرة على الـ main component. فبعض الوظائف تتصرف بشكل مختلف على الـ instance.

تذكروا أن الممارسة تصنع الإتقان. بعد فترة، ستتمكنون من فهم سلوك المكونات المعقدة وكيفية تعديل الـ instances الخاصة بها.

6. الخلاصة

إتقان Auto Layout في Figma يشبه امتلاك قوة خارقة للمصممين الذين يريدون إنشاء تصاميم متجاوبة وقابلة للتكيّف. بفهم أساسيات Auto Layout وتعلّم استخدامه بفعالية، يمكنكم توفير قدر كبير من الوقت وتبسيط سير عملكم. وسواء كنتم تصممون أزرارًا بسيطة أو بطاقات معقدة، فإن Auto Layout يفتح أمامكم كنزًا من الإمكانيات لاستكشافها.

باتباع النصائح والأمثلة الواردة في هذا الدليل، يمكنكم الارتقاء بمهاراتكم وإنشاء تصاميم تبدو رائعة على أي حجم شاشة أو جهاز. سواء كنتم في بداية الطريق أو محترفين متمرسين، فإن Auto Layout أداة قوية تساعدكم على تحقيق أهدافكم في التصميم. لذا انطلقوا وابدأوا التجربة مع Auto Layout اليوم، واكتشفوا إمكانياته التي لا حدود لها. تصميمًا موفقًا!