تصميم الواجهات باستخدام Figma
صمّم تطبيق جوال حقيقيًا في Figma، من أول frame حتى تسليمه للمطوّرين، واعرف لماذا وُضع كل بكسل في مكانه.
- 4.8 (1,368 تقييمًا)
- 11,700 متعلّم
- مبتدئ
- 4 س 55 د إجمالًا
- حُدّثت في مايو 2026
ما ستتعلّمه
- طبّق التسلسل البصري والمحاذاة والمسافات والتباين عن قصد
- ابنِ الشاشات بالـ frames والـ constraints والـ Auto layout
- استخدم نظام مسافات من مضاعفات 8 مع الـ Layout guides
- أنشئ components بـ variants وComponent properties
- أضف ثيمات لمجموعتك بالـ Variables وبـ mode فاتح وآخر داكن
- اصنع prototype وافحص إمكانية الوصول وسلّم التصميم عبر Dev Mode
لمن هذه الدورة
ستصمّم Steady، تطبيقًا لتتبّع العادات، من لوحة عمل فارغة حتى مجموعة شاشات جاهزة للتسليم. وفي الطريق تتعلّم المبادئ التي تجعل الواجهة سهلة القراءة (التسلسل البصري والمحاذاة والمسافات والخط والألوان بتباين حقيقي)، وميزات Figma التي يستخدمها المحترفون كل يوم: الـ frames والـ Auto layout والـ Layout guides والـ components والـ variants والـ Variables والـ Modes.
تقدّم الدروس كلها صوفيا رييس، وهي مصمّمة منتجات رئيسية (principal product designer) تسأل دائمًا عن السبب وراء كل قرار. ستنتقد تخطيطات، وتبني مجموعة components صغيرة بثيمين فاتح وداكن، وتصنع prototype لمسار تسجيل العادة، وتفحصه من ناحية إمكانية الوصول، وتضع عليه علامة الجاهزية في Dev Mode، ثم تختم بدراسة حالة لملف أعمالك تعرضها على أصحاب العمل.
- لمن هذه الدورة
- لمن يغيّرون مسارهم المهني وللمطوّرين الذين يريدون تصميم شاشات تطبيقات نظيفة ومتّسقة في Figma والحديث عنها بثقة.
- قبل أن تبدأ
- لا شيء. يكفيك حساب Figma مجاني وحاسوب محمول أو مكتبي.
تدريب عملي
- تمارين موجَّهة: اكتشف الخطأ، وأكمل الأمر، ورتّب الخطوات.
محتوى الدورة
4 وحدات · 17 درسًا · 4 س 55 د إجمالًا
- كيف تُتّخذ قرارات تصميم الواجهات14 دقيقة
- التسلسل البصري والمحاذاة والمسافات18 دقيقة
- سلّم أحجام الخط والألوان بتباين كافٍ18 دقيقة
- الـ Frames والـ Groups والطبقات والـ Constraints20 دقيقة
- اختبار الوحدة5 أسئلة
- الـ Auto layout: الاتجاه والـ Gap والـ Padding18 دقيقة
- تغيير الحجم: Hug وFill وFixed وWrap20 دقيقة
- الـ Layout guides ونظام الـ 8 نقاط16 دقيقة
- التكيّف مع أحجام الشاشات المختلفة18 دقيقة
- اختبار الوحدة5 أسئلة
- الـ Components والـ Instances16 دقيقة
- الـ Variants والـ Component properties20 دقيقة
- الـ Styles مقابل الـ Variables18 دقيقة
- Modes الـ Variables: الفاتح والداكن18 دقيقة
- بناء مجموعة Steady المصغّرة20 دقيقة
- اختبار الوحدة5 أسئلة
- الـ Prototype: التفاعلات وSmart animate والـ Overlays18 دقيقة
- التصميم مع مراعاة إمكانية الوصول17 دقيقة
- Dev Mode والتسليم للمطوّرين14 دقيقة
- النقد التصميمي ودراسة الحالة الخاصة بك12 دقيقة
- اختبار الوحدة5 أسئلة
مدرّبك
صوفيا رييس
مصمّمة منتجات رئيسية · Northwind
- تقييم المدرّب 4.8
- 25,900 متعلّم
- 3 دورات
درست صوفيا التصميم الجرافيكي، ثم علّمت نفسها CSS لتتوقف عن الجدال مع المهندسين حول البكسلات، ومنذ ذلك الحين تعمل على طرفَي التسليم معًا. في Northwind تقود نظام التصميم الذي تقوم عليه 11 منتجًا، من مكتبة Figma حتى الـ tokens التي تصل إلى الكود في CSS.
ماذا يقول المتعلّمون
4.8
1,368 تقييم
Layla Saad
قبل 8 أشهر
فهمت الـ auto layout حين أعدت بناء صف العادة ثلاث مرات بخيارات hug وfill وfixed. لم تعد تصاميمي تنكسر كلما غيّرت نصًّا.
Mateo Fernández
قبل 3 أشهر
أنا مطوّر، وهذه أول مرة أفهم لماذا يهتم المصممون بالـ variables والـ modes. إعداد الوضعين الفاتح والداكن لمجموعة مكوّنات Steady كان أفضل جزء بالنسبة لي.
Zeynep Yılmaz
قبل 5 أسابيع
بنية ممتازة من أول frame حتى التسليم في Dev Mode. درس النماذج التفاعلية (prototyping) يحتاج مثالًا أعقد من مسار تسجيل العادة.