Figma Auto Layout مقابل CSS Flexbox وGrid: سد فجوة التصميم إلى التعليمات البرمجية
كيف يتم تعيين التخطيط التلقائي لـ Figma إلى المربع المرن والشبكة CSS (الاتجاه، والفجوة، والحشو، والضم، والتعبئة، والالتفاف) وأين تختلف، بحيث تظل التصميمات قابلة للتسليم.
الوجبات الجاهزة الأساسية
يتصرف التخطيط التلقائي لـ Figma كثيرًا مثل المربع المرن CSS: خرائط الاتجاه للاتجاه المرن، والفجوة إلى الفجوة، والحشو للحشو، و"تضمين المحتويات" للتحجيم حسب المحتوى، و"ملء الحاوية" للنمو المرن أو العرض الكامل، والالتفاف للالتفاف المرن. يتوافق تدفق شبكة التخطيط التلقائي مع شبكة CSS. تظهر الاختلافات مع الحد الأدنى والحد الأقصى للأحجام، والتفاف النص، ومحاذاة الخط الأساسي ونقاط التوقف المستجيبة، لذا تحقق من تلك الاختلافات بوضوح عند التسليم.
رسم الخرائط
يصف دليل Figma إطارات التخطيط التلقائي التي ترتب الأطفال حسب الاتجاه والتباعد والحشو والمحاذاة، مع التدفقات الأفقية والرأسية والشبكة والتفاف اختياري. لكل منها ما يعادل CSS قريب:
عناق وملء وثابت
في Figma، يتم تغيير حجم الإطار الذي تم تعيينه لاحتواء المحتويات بناءً على أطفاله، ويمتد الإطار الفرعي الذي تم تعيينه لملء الحاوية لملء المساحة المتاحة؛ تشير Figma إلى أنه إذا تم تعيين طفل لملء مكانه، فلن يتمكن الوالد من العناق في هذا الاتجاه. في CSS، تكون المعادلات هي التحجيم المستند إلى المحتوى (المحتوى التلقائي أو المحتوى المناسب) والمرن: 1 أو العرض: 100%. يشرح دليل flexbox الخاص بـ MDN كيفية توزيع المساحة على أساس النمو المرن والانكماش المرن والأساس المرن، وهو جانب CSS من نفس الفكرة.
حيث تظهر الفجوة
تأتي معظم أخطاء التسليم من مناطق قليلة:
- الحد الأدنى والحد الأقصى للأحجام: قم بتعيينهما في كلا المكانين، وإلا سيتصرف النص والحاويات بشكل مختلف في الحالات القصوى.
- النص: يختلف ارتفاع الخط والالتفاف والاقتطاع بين عرض النص Figma والمتصفح.
- محاذاة الخط الأساسي: يمكن محاذاة CSS حسب الخط الأساسي للنص؛ تحقق كيف كان المقصود من ذلك.
- الأطفال المطلقون: يقوم "تجاهل التخطيط التلقائي" في Figma (الموضع المطلق سابقًا) بتعيين الموضع: مطلق في الأصل المحدد.
- الاستجابة: إطارات التخطيط التلقائي لا تحتوي على نقاط توقف؛ تحديد كيفية تغيير التخطيطات عند كل عرض.
شبكات
استخدم تدفق شبكة التخطيط التلقائي للتخطيطات الحقيقية ثنائية الأبعاد، وقم بتعيينها على شبكة CSS، والتي يصفها MDN كنظام لتخطيط المحتوى في الصفوف والأعمدة. الصفوف المرنة الملتفة ليست مثل الشبكة: العناصر الموجودة في الصف الملتف لا تصطف في أعمدة.
الحركة هي الفجوة الأكبر
خرائط التخطيط جيدة بشكل معقول من Figma إلى CSS. الحركة لا تفعل ذلك: يجب إعادة بناء التحولات النموذجية في التعليمات البرمجية، وغالبًا ما تضيع الحالات. هذه هي أدوات الفجوة في أوقات التشغيل، مثل ExodeUI (نحن نصنعها) وRive، عنوان المكونات التفاعلية.
مفتاح Principle للتذكر
- اتجاه التخطيط التلقائي والفجوة والحشوة والتفاف الخريطة على flexbox
- عناق ≈ تحجيم المحتوى؛ املأ ≈ فليكس: عرض 1 أو 100%
- خرائط تدفق الشبكة إلى شبكة CSS
- تحقق من الحد الأدنى/الحد الأقصى للأحجام والنص وخطوط الأساس ونقاط التوقف عند التسليم
- تمثل الحركة والحالات الفجوة الأكبر بين التصميم والرمز
الأسئلة المتداولة
المصادر
- Guide to auto layout — مركز المساعدة Figma
- Basic concepts of flexbox — MDN مستندات الويب
- Basic concepts of grid layout — MDN مستندات الويب