🌙اليوم الخامس من دروس فيجما في رمضان
🌟كيف نحول هذا التصميم لجهاز الكمبيوتر من تصميم غير متجاوب (Not Responsive) إلى تصميم متجاوب (Responsive)
@Designers_Sup
#figma
🌟كيف نحول هذا التصميم لجهاز الكمبيوتر من تصميم غير متجاوب (Not Responsive) إلى تصميم متجاوب (Responsive)
@Designers_Sup
#figma
عشان نحول هذا التصميم إلى تصميم متجاوب نحتاج نستخدم خاصية Auto Layout. كتبت ثريد بالتفصيل عنها في اليوم الثاني من دروس فيجما فدرسنا اليوم بيكون تطبيق عملي على الخاصية.
هذا الثريد:
هذا الثريد:
بالبداية نحتاج نفهم الأشياء اللي نحتاج نعلمها عشان يكون التصميم متجاوب.
١- نحتاج يكون كل اجزاء الواجهة تستخدم خاصية Auto Layout مثل شريط التنقل وتكون المسافة بين الشعار و الروابط space between عشان المسافة بينهم ماتكون ثابتة بقيمة معينة ولكن تتجاوب مع تغيير عرض الواجهة
١- نحتاج يكون كل اجزاء الواجهة تستخدم خاصية Auto Layout مثل شريط التنقل وتكون المسافة بين الشعار و الروابط space between عشان المسافة بينهم ماتكون ثابتة بقيمة معينة ولكن تتجاوب مع تغيير عرض الواجهة
٢- ايضاً جزئية Hero section نحتاج تستخدم خاصية Auto Layout. عكس شريط التنقل، انا احتاج المسافة بين الصورة والمحتوى على اليسار يكون ثابت وما يتغير مع تغير عرض الواجهة لذل بتكون المسافة بينهم packed وليس space between مثل الموضح في الفيديو.
يتبع 👇
يتبع 👇
بالنسبة للصورة لان حجمها بيكون ثابت وما احتاجها تتغير فبتكون قيمتها fixed لكن المحتوى احتاجه يتأقلم مع تغيير عرض الواجهة فبتكون قيمتها fill container (يمتد على المساحة المتوفرة)
حجم ثابت -> fixed
حجم غير ثابت -> fill container
حجم ثابت -> fixed
حجم غير ثابت -> fill container
٣- اخر شئ نحتاج حجم الواجهة يكون غير ثابت لان نحتاج التصميم يكون متجاوب وحجمه غير ثابت
فنحتاج نستخدم Auto Layout على الواجهة كاملة.
فنحتاج نستخدم Auto Layout على الواجهة كاملة.
نشوف نتيجة الخطوات السابقة لاحظوا انا الواجهة ما تتأقلم مع تغيير العرض لان لما استخدمنا خاصية Auto Layout في الخطوة الأخيرة على الواجهة كاملة فيجما حول حجم كل شئ داخل الواجهة إلى fixed (القيمة الإفتراضية) واحنا نحتاج تكون fill container عشان تمتد على المساحة المتوفرة.
رابط ملف فيجما للواجهتين (المتجاوبة وغير المتجاوبة) للي حاب يطلع على التصميم
figma.com
figma.com
وبس اتمنى انكم استفدتوا من هذا الدرس ولنا لقاء غداً ان شاء الله مع درس جديد 💙
جاري تحميل الاقتراحات...