🌙اليوم التاسع من دروس فيجما في رمضان
🌟أهم خصائص برنامج فيجما العناصر (components). مافائدتها وكيف نطبقها في فيجما.
🌟أهم خصائص برنامج فيجما العناصر (components). مافائدتها وكيف نطبقها في فيجما.
بالبداية كيف تفيدنا components في التصميم. تخيل عندك زر في كل الواجهات واحتجت تغير لونه. في هذه الحالة لو ما استخدمت الزر كعنصر (components)رح تحتاج تغيره بنفسك في كل مكان استخدمته لكن لو استخدمته كعنصر تحتاج تغيره في مكان واحد وكل الأماكن الاخرى اللي استخدمته فيه بيتغير تلقائياً
💡فائدته باختصار:
- يسهل عملية تغيير الأشياء
- يسهل على المطورين معرفة عناصر الواجهة الرئيسية للبرمجة
- يساعد على ترتيب الملف بشكل عام
- يسهل عملية تغيير الأشياء
- يسهل على المطورين معرفة عناصر الواجهة الرئيسية للبرمجة
- يساعد على ترتيب الملف بشكل عام
كيف نعمل components:
مثلاً احتاج اعمل حالتين للزر :
- رئيسي (primary)
- فرعي (secondary)
استخدمت خاصية Auto Layout في إنشاء الزر عشان يكون متجاوب مع تغيير المحتوى.
تكلمت عن Auto Layout في هذا الدرس:
مثلاً احتاج اعمل حالتين للزر :
- رئيسي (primary)
- فرعي (secondary)
استخدمت خاصية Auto Layout في إنشاء الزر عشان يكون متجاوب مع تغيير المحتوى.
تكلمت عن Auto Layout في هذا الدرس:
بعدها استخدمت زر component عشان اعمل component من الزر . وضغطت على علامة + عشان اعمل الحالة الثانية (variant) للزر مثل موضح في الفيديو.
فرضاً احتجت اني أضيف أيقونة للزر. احتاج أضيفها في component (المكان الرئيسي) وبتظهر في كل مكان استخدم فيه الزر تلقائياً (الأماكن الفرعية).
كيف استخدم component في فيجما:
من خلال خانة assets بعدها ابحث عن اسم component مثل الموضح في الفيديو. لاحظوا لما غيرت لون الزر في المكان الرئيسي انعكس تلقائيًا في النسخة اللي استخدمتها.
من خلال خانة assets بعدها ابحث عن اسم component مثل الموضح في الفيديو. لاحظوا لما غيرت لون الزر في المكان الرئيسي انعكس تلقائيًا في النسخة اللي استخدمتها.
الان نيجي لخصائص component اللي تمكنا من التحكم في شكل component من مكان واحد.
🔹text: يمكننا من تغيير نص component. مثلا هنا تغيير اسم الزر مثل الموضح في الفيديو.
🔹text: يمكننا من تغيير نص component. مثلا هنا تغيير اسم الزر مثل الموضح في الفيديو.
🔹layer: يمكننا من إخفاء او إظهار جزء من component. مثلاً هنا اخفاء او إظهار النص او الأيقونة مثل الموضح في الفيديو.
🔹instance: يمكننا من تبديل احدى مكونات component مثلاً هنا تغيير شكل الأيقونة.
📍ملاحظة عشان تشتغل الخاصية لازم تكون الأيقونة component ايضاً مثل الموضح في الفيديو.
📍ملاحظة عشان تشتغل الخاصية لازم تكون الأيقونة component ايضاً مثل الموضح في الفيديو.
النتيجة ان اقدر من مكان واحد من الإعدادات اتحكم في نص component، اظهر او اخفي اجزاء منه، اتحكم في component الداخلية مثلاً هنا شكل الأيقونة مثل الموضح في الفيديو.
وبس اتمنى انكم استفدتوا من هذا الدرس.
تطبيق عملي في تصميم باستخدام هذا component بيكون في درس بكرة بإذن الله💜.
تطبيق عملي في تصميم باستخدام هذا component بيكون في درس بكرة بإذن الله💜.
جاري تحميل الاقتراحات...