الدرس الثامن: Design System (نظام التصميم الاحترافي)
الآن دخلنا مرحلة مهمة جدًا، وهي المرحلة التي تفرق بين مبتدئ ومصمم محترف يعمل في شركات.
ما هو Design System؟
هو مجموعة قواعد وعناصر جاهزة تستخدمها في كل تصميمك بحيث يكون كل شيء:
- موحّد.
- منظم.
- سهل التعديل.
- سريع في التنفيذ.
مثال بسيط
بدل أن تصمم زر جديد في كل صفحة، أنت تصمم زر واحد فقط، ثم تستخدمه في كل المشروع.
إذا أردت تغيير لون الأزرار:
تغيّره مرة واحدة → يتغير في كل المشروع.
لماذا نستخدم Design System؟
- يوفر الوقت.
- يجعل التصميم متناسق.
- يسهل العمل مع المطورين.
- يقلل الأخطاء.
- يعطي شكل احترافي جدًا.
مكونات Design System
1. Colors (الألوان)
تحدد:
- Primary Color (الأساسي)
- Secondary Color (الثانوي)
- Accent Color (المميز)
- Colors للحالات:
- Success (نجاح)
- Error (خطأ)
- Warning (تحذير)
2. Typography (الخطوط)
تحدد:
- H1
- H2
- H3
- Body Text
- Small Text
مع تحديد:
- الحجم
- الوزن
- اللون
3. Buttons (الأزرار)
مثال:
- Primary Button (زر رئيسي)
- Secondary Button (زر ثانوي)
- Disabled Button (غير مفعل)
4. Inputs (حقول الإدخال)
مثل:
- Email Field
- Password Field
- Search Field
5. Cards (البطاقات)
تستخدم لعرض:
- منتجات.
- مقالات.
- خدمات.
6. Icons (الأيقونات)
مجموعة أيقونات موحدة مثل:
- بحث
- سلة
- إعدادات
- حساب
7. Spacing (المسافات)
قاعدة 8px:
- 8
- 16
- 24
- 32
- 40
ما هو Component؟
هو عنصر قابل لإعادة الاستخدام.
مثال:
- زر واحد فقط.
- تستخدمه في كل مكان.
إذا عدلته → يتغير في كل المشروع.
ما هو Variant؟
هو نفس العنصر لكن بأشكال مختلفة.
مثال زر:
- Default
- Hover
- Pressed
- Disabled
ما هي Styles؟
هي إعدادات جاهزة مثل:
- الخطوط.
- الألوان.
- الظلال.
كيف تبدأ في Figma؟
الخطوة 1
أنشئ صفحة اسمها:
Design System
الخطوة 2
صمم:
الألوان
ضع مربعات لكل لون.
الخطوة 3
صمم الأزرار:
- زر أساسي.
- زر ثانوي.
- زر غير مفعل.
ثم حوّلها إلى Component.
الخطوة 4
صمم الحقول:
- Email Input
- Password Input
الخطوة 5
صمم Typography System
- H1
- H2
- Body
مثال عملي
زر احترافي:
- لون: أزرق.
- Padding: 16px.
- Radius: 12px.
- خط: 16px Bold.
ثم تحفظه كـ Component.
أخطاء شائعة
❌ تصميم كل زر بشكل مختلف.
❌ عدم توحيد الخطوط.
❌ استخدام ألوان عشوائية.
❌ عدم استخدام Components.
قاعدة ذهبية
إذا كررت نفس الشيء مرتين → اجعله Component.
ماذا يفعل المحترفون؟
مصممو الشركات مثل: و
لا يصممون كل شاشة من الصفر، بل يعتمدون على Design System كامل.
تمرين عملي
في Figma:
- اختر مشروع Wireframe من الدروس السابقة.
- أنشئ Design System صغير يحتوي على:
- 3 ألوان.
- زر رئيسي + ثانوي.
- Input واحد.
- خطين (H1 + Body).
- استخدم هذه العناصر في تصميم شاشة واحدة.
ما تعلمته اليوم
✅ ما هو Design System.
✅ ما هو Component.
✅ ما هو Variant.
✅ ما هي Styles.
✅ كيفية تنظيم المشروع بشكل احترافي.
الدرس التاسع (نقطة التحول)
في الدرس القادم سنتعلم UI Design الكامل:
- تحويل Wireframe إلى تصميم احترافي.
- استخدام الألوان والخطوط.
- بناء واجهات تطبيق حقيقية.
- تطبيق Design System على مشروع كامل.
هنا ستبدأ ترى نفسك كمصمم حقيقي وليس مبتدئ.
تعليقات
إرسال تعليق