الدرس الحادي عشر: Design System المتقدم (احتراف Components + Variants + Auto Layout)
اليوم ندخل مرحلة “شغل الشركات فعليًا”.
لن نرسم عناصر فقط… بل سنبني مكتبة تصميم كاملة تُستخدم في كل المشروع.
ما الهدف من هذا الدرس؟
أن تتعلم كيف تبني نظام يسمح لك:
- تصميم عشرات الشاشات بسرعة
- تعديل التصميم كاملًا من مكان واحد
- الحفاظ على تناسق المشروع بدون أخطاء
أولًا: إعادة تعريف Design System
هو مجموعة مكونات جاهزة تشمل:
- Buttons
- Inputs
- Cards
- Colors
- Typography
- Icons
لكن اليوم سنبنيها بشكل احترافي باستخدام:
Components + Variants + Auto Layout
1. Components (المكوّنات)
ما هو Component؟
هو عنصر تصممه مرة واحدة وتعيد استخدامه في كل المشروع.
مثال:
- زر
- بطاقة منتج
- حقل إدخال
لماذا هو مهم؟
لأنه إذا عدّلت:
- لون الزر أو حجمه أو الخط
يتغير في كل مكان تلقائيًا.
مثال عملي
بدل:
- تصميم 20 زر مختلف
تقوم بـ:
- تصميم زر واحد فقط
- استخدامه 20 مرة
2. Variants (النسخ المختلفة)
ما هي Variants؟
هي أشكال مختلفة لنفس العنصر.
مثال: زر واحد لكن له حالات
- Default (عادي)
- Hover (عند المرور)
- Pressed (عند الضغط)
- Disabled (غير فعال)
مثال آخر: Input Field
- فارغ
- مكتوب فيه نص
- خطأ (Error)
- نجاح (Success)
لماذا Variants مهمة؟
لأن التطبيقات الحقيقية ليست شكل واحد فقط، بل حالات متعددة.
3. Auto Layout (أهم مهارة في Figma)
ما هو Auto Layout؟
هو نظام يجعل العناصر تتحرك وتتمدد تلقائيًا.
مثال بسيط
زر يحتوي على نص:
بدون Auto Layout:
- إذا زاد النص → يتكسر التصميم
مع Auto Layout:
- الزر يكبر تلقائيًا مع النص
استخداماته:
- الأزرار
- القوائم
- الكروت
- النماذج
أهم ميزاته:
- يحافظ على المسافات تلقائيًا
- يجعل التصميم Responsive
- يسهل تعديل المحتوى
4. بناء Design System عملي
الخطوة 1: الألوان
أنشئ:
- Primary
- Secondary
- Accent
- Success
- Error
- Warning
الخطوة 2: الخطوط
حدد:
- H1
- H2
- Body
- Small
الخطوة 3: الأزرار (Button Component)
اصنع زر يحتوي على:
- Auto Layout
- Padding ثابت
- Radius موحد
ثم أضف Variants:
- Primary
- Secondary
- Disabled
الخطوة 4: Input Fields
أنشئ:
- Email Input
- Password Input
مع حالات:
- Default
- Focus
- Error
الخطوة 5: Cards
مثل:
- بطاقة منتج
- بطاقة مقال
مثال عملي كامل
زر احترافي:
- Auto Layout
- Padding: 16px
- Radius: 12px
- Font: 16px Bold
Variants:
- Primary (أزرق)
- Secondary (رمادي)
- Disabled (خفيف)
أخطاء شائعة
❌ عدم استخدام Components
❌ تصميم كل زر بشكل مختلف
❌ عدم توحيد المسافات
❌ تجاهل Variants
❌ استخدام Auto Layout بشكل عشوائي
قاعدة ذهبية للمحترفين
إذا كررت العنصر مرتين → اجعله Component
إذا تغير شكله حسب الحالة → اجعله Variant
إذا تحرك داخليًا → استخدم Auto Layout
كيف تعمل الشركات؟
شركات مثل و لا تصمم كل صفحة يدويًا.
بل تستخدم:
- Design System ضخم
- Components جاهزة
- Variants لكل حالة
- Auto Layout لكل عنصر
تمرين عملي (مهم جدًا)
في Figma:
-
أنشئ Design System صغير يحتوي على:
- 3 ألوان
- 1 زر (مع 3 Variants)
- 1 Input (مع 3 حالات)
- 1 Card
-
استخدم Auto Layout في:
- الزر
- الكرت
-
صمّم شاشة واحدة باستخدام هذه المكونات فقط.
ما تعلمته اليوم
✅ Components
✅ Variants
✅ Auto Layout
✅ بناء Design System احترافي
✅ طريقة عمل الشركات الكبيرة
الدرس الثاني عشر (المرحلة الاحترافية الأخيرة)
في الدرس القادم سنتعلم:
- تصميم مشروع كامل (Case Study)
- كيف تبني Portfolio احترافي
- كيف تعرض أعمالك للشركات والعملاء
- كيف تحصل على أول وظيفة أو عمل حر
هنا سننتقل من “التعلم” إلى “العمل الحقيقي في السوق”.
تعليقات
إرسال تعليق