🌙اليوم الثاني من دروس فيجما في رمضان
🌟كيف ممكن تصمم بطاقة متجاوبة مع تغير المحتوى او حجم البطاقة باستخدام خاصية Auto Layout
@Designers_Sup
#figma
🌟كيف ممكن تصمم بطاقة متجاوبة مع تغير المحتوى او حجم البطاقة باستخدام خاصية Auto Layout
@Designers_Sup
#figma
١- بالبداية كيف نقدر نفعل خاصية Auto Layout
لازم تستخدم frame (عن طريق الضغط على زر F) او الزر الموضح في الفيديو وبعدها تضغط على auto layout او اختصارها shift + A
لازم تستخدم frame (عن طريق الضغط على زر F) او الزر الموضح في الفيديو وبعدها تضغط على auto layout او اختصارها shift + A
٢- نحتاج نفهم المتغيرات الموجودة في خاصية Auto layout باستخدام مثال ابسط مثل هذا الزر
🔹خاصية مكان الأشياء: تتحكم في مكان الأشياء في المنطقة اذا كانت بالوسط، الأسفل، الأعلى.
🔹خاصية مكان الأشياء: تتحكم في مكان الأشياء في المنطقة اذا كانت بالوسط، الأسفل، الأعلى.
🔹خاصية المساحة الأفقية (Horizontal padding): تتحكم في المساحة الداخلية من اليمين واليسار في الزر.
🔹خاصية المساحة الرأسية (Vertical padding): تتحكم في المساحة الداخلية من الأعلى و الأسفل في الزر.
🔹خاصية layout (Horizontal / Vertical): تتحكم في المحتويات إذا كان رأسية او أفقية.
🔹خاصية العرض (width): لها قيمتين
- Hug: يتجاوب العرض مع المحتوى
- Fixed: لايتجاوب العرض مع المحتوى
- Hug: يتجاوب العرض مع المحتوى
- Fixed: لايتجاوب العرض مع المحتوى
🔹خاصية الطول (height): نفس فكرة خاصية العرض لها قيمتين اما Hug وهي اللي تجعل الشكل متجاوب او Fixed وهي اللي تجعل غير متجاوب مع تغير المحتوى
في خاصية اخرى للعرض او الطول تكون للأشياء اللي داخل الشئ اللي عملناه Auto layout واسمها fill بشرحها لما نبدأ بالبطاقة
بعد ماخلصنا كل الخصائص نيجي نطبق الخصائص على البطاقة
بعد ماخلصنا كل الخصائص نيجي نطبق الخصائص على البطاقة
احنا نحتاج كل الأشياء في البطاقة تتمدد مع تغير حجم البطاقة إذن نحتاج نستخدم خاصية fill يعني مالها حجم ثابت لكنها تملأ المحتوى اللي فيه.
نبدأ بالصورة لاحظوا كيف انها تتمدد اذا كان عرضها fill لكن تكون ثابتة اذا كان عرضها fixed.
نبدأ بالصورة لاحظوا كيف انها تتمدد اذا كان عرضها fill لكن تكون ثابتة اذا كان عرضها fixed.
نأتي للخاصية اللي هي لو كان عندك شئين مثل هنا اسم المنتج وسعره انا احتاج يكونون على امتداد عرض البطاقة دائما وفي مسافة بينهم تزيد مع زيادة عرض المحتوى فهنا لازم نستخدم احد انواع الفصل اللي اسمه space between بدل من packed. لاحظوا في الفيديو الفرق بينهم.
- Space between: تتجاوب المسافة بين الأشياء مع تغير العرض
- Packed: لا تتجاوب المسافة بين الأشياء مع تغير العرض
- Packed: لا تتجاوب المسافة بين الأشياء مع تغير العرض
نيجي لاخر فقرة وصف المنتج احتاج انه يتأقلم ارتفاعه مع زيادة المحتوى لذا استخدم خاصية hug للطول و احتاج انه يملأ عرض البطاقة لذا استخدم خاصية fill للعرض.
وبس اتمنى انكم استفدتوا من هذا الدرس. الخاصية صراحة مهمة وتفيد كثير في الشغل واعتذر ان الدرس كان طويل لكن فيها خصائص كثيرة حبيت أغطيها. لنا لقاء غداً ان شاء الله مع درس جديد
جاري تحميل الاقتراحات...