قبل ما تبدأ في تصميم واجهات، في شئ لازم ترتبه عشان ترتب شغلك وأي تعديل في المستقبل يكون سهل تطبيقه
ثريد 🧵
ثريد 🧵
لو في شئ تمنيت اني تعلمته في البداية هو اني افكر في الواجهة كمكونات بدل من اني أتحمس واصمم على طول. مثلا لو كان عندي مشروع تصميم صفحات موقع فهنا لازم افكر اولا بالمكونات اللي احتاجها في التصميم مثل الأزرار، المدخلات، الإشعارات،. وحالاتهم المختلفة مثل الزر لما يؤشر عليه، لما ينضغط
لما تفكر بهذه الطريقة بتتكون عندك مكتبة من هذه المكونات وبيصير التصميم أسهل بحيث يكون كأنك تركب puzzle 🧩ويكون تركيزك على جهة الإبداع في التصميم بدلاً من ان يكون تصميم مكونات لانهائية او نسخ المكونات من واجهات جاهزة.
طيب ليه فكرة النسخ بيعيقك في العمل خاصة إذا صار في تعديل في المستقبل. لانه اذا احتجت انك تعدل مثلا شكل الزر او حجم الخط لازم تطبق تعديلك على كل واحد من الأزرار وهذا بيأخذ وقت خاصة لو كان المشروع كبير وممكن تنسى انك تعدل كم زر في الطريق.
طيب ايش الحل، الحل يإنا تستخدم نظام تصميم معين Design System بحيث في مكون رئيسي واحد إذا عدلته بتتعدل الأشياء التابعة له تلقائياً. مثلا لو عدلت حجم الزر الرئيسي بتتعدل كل الأزرار الفرعية من هذا الزر. أو الحل الثاني انك تعمل المكون (component) من نفسك.
كيفية عمل مكون (component) في Figma:
فرضاً احتاج حالات مختلفة من الأزرار (افتراضي، المؤشر عليه، تم نقره) هنا ممكن نستخدم خاصية variant اللي هدفها تكوين حالات مختلفة لنكون معين مثل ماهو موضح في الفيديو.
فرضاً احتاج حالات مختلفة من الأزرار (افتراضي، المؤشر عليه، تم نقره) هنا ممكن نستخدم خاصية variant اللي هدفها تكوين حالات مختلفة لنكون معين مثل ماهو موضح في الفيديو.
لما أحتاج استخدم اي واحد من حالات الأزرار المختلفة بلاقيهم موجودة في خانة Assets ومحفوظ كزر واحد رئيسي وتقدر تغيير حالات الزر من خانة variants زي ماهو موضح في الفيديو. اللحين فرضاً احتجت اغير حواف الزر هنا بس احتاج اغير في الأزرار الرئيسية والتعديل بيتطبق في كل مكان الزر مستخدم
إذا تبغوا تعرفوا أكثر عن خاصية Varinets. هذا الملف مغطيها بطريقة حلوة وكأنها لعبة.
figma.com
figma.com
في الفيديو استخدمت خاصية في Figma اسمها Auto Layout وهي من الخصائص المهم تعلمها لانها ايضاً توفر وقت وتوحد أشكال المكونات. تكلمت عن هذه الخاصية في هذا الثريد.
في نهاية الثريد، لاتنسون المشاركة لإفادة الغير وشكراً💜
جاري تحميل الاقتراحات...