أنظمة التصميم

ما هو نظام التصميم؟

تخيل إن عندك فريق من ٥ مصممين بيشتغلوا على نفس المنتج. كل واحد فيهم بيصمم الأزرار بشكل مختلف — واحد بيعمل الزوايا مدورة وواحد مربعة، واحد بيستخدم ظل وواحد لأ، كل واحد بيختار درجة مختلفة من الأزرق. النتيجة؟ منتج بيبان وكأنه ٥ تطبيقات مختلفة.

نظام التصميم (Design System) هو مصدر الحقيقة الواحد اللي بيحل المشكلة دي. هو مجموعة من القواعد والمكونات والمعايير اللي بتضمن إن كل حد في الفريق بيصمم ويبني بنفس الطريقة.

نظام التصميم = مكونات قابلة لإعادة الاستخدام + قواعد استخدام + توثيق

أنظمة تصميم مشهورة

• Material Design (Google): أشهر نظام تصميم — بيُستخدم في كل منتجات جوجل
• Human Interface Guidelines (Apple): معايير تصميم آبل لـ iOS و macOS
• Carbon (IBM): نظام تصميم مفتوح المصدر
• Ant Design: نظام تصميم شائع جدًا في تطبيقات المؤسسات
• Atlassian Design System: نظام وراء Jira و Confluence و Trello
• Chakra UI / shadcn/ui: أنظمة شائعة في عالم React

لماذا تحتاج نظام تصميم؟

١. الاتساق (Consistency)

كل زر، كل كارد، كل نموذج في المنتج بيبان ويتصرف بنفس الطريقة. المستخدم مش محتاج يتعلم أشكال جديدة في كل صفحة.

٢. السرعة (Speed)

بدل ما تصمم كل مكون من الصفر، بتسحب مكونات جاهزة ومُختبرة. التصميم اللي كان بياخد أسبوع ممكن ينتهي في يوم.

٣. الجودة (Quality)

المكونات في نظام التصميم مُختبرة ومُراجعة. فيها Accessibility، فيها حالات مختلفة (hover, focus, disabled)، ومتوافقة مع معايير الأداء.

٤. قابلية التوسع (Scalability)

لما المنتج يكبر ويضاف مصممين ومطورين جدد، نظام التصميم بيخليهم منتجين من أول يوم بدون فترة تدريب طويلة.

٥. التواصل بين المصممين والمطورين

المكونات بنفس الأسماء والخصائص في التصميم والكود. المصمم بيقول "استخدم Button/Primary/Large" والمطور فاهم بالظبط.

التوكنز (Design Tokens)

التوكنز هي الذرات اللي نظام التصميم مبني عليها. هي قيم مُسمّاة بتعبّر عن خصائص بصرية.

أنواع التوكنز

١. توكنز عامة (Global/Primitive Tokens)

القيم الأساسية اللي كل حاجة مبنية عليها:

• ألوان: blue-500: #3B82F6, gray-100: #F3F4F6
• خطوط: font-sans: "Inter", font-size-base: 16px
• مسافات: space-4: 16px, space-8: 32px
• زوايا: radius-sm: 4px, radius-lg: 12px
• ظلال: shadow-sm: 0 1px 2px rgba(0,0,0,0.05)

٢. توكنز دلالية (Semantic/Alias Tokens)

قيم بأسماء وظيفية بتشير للتوكنز العامة:

• color-primary: {blue-500} — اللون الأساسي
• color-error: {red-500} — لون الأخطاء
• color-text-primary: {gray-900} — لون النص الأساسي
• color-background: {white} — لون الخلفية
• font-size-heading: {font-size-xl} — حجم العناوين

٣. توكنز المكونات (Component Tokens)

قيم خاصة بمكون محدد:

• button-padding-x: {space-6} — المسافة الأفقية داخل الزر
• button-border-radius: {radius-lg} — زوايا الزر
• card-shadow: {shadow-md} — ظل الكارد

لماذا التوكنز مهمة؟

لما تحتاج تغير اللون الأساسي للمنتج كله، بتغير قيمة توكن واحد بدل ما تغير ٥٠٠ مكان مختلف. ولما تحتاج تعمل Dark Mode، بتغير قيم التوكنز الدلالية بس.

التوكنز في Figma

Figma عندها نظام Variables اللي بيعمل نفس وظيفة التوكنز:

1. اعمل Collection جديد (مثلاً "Colors")
2. أضف متغيرات بأسماء وظيفية (primary, background, text)
3. حدد قيم مختلفة لكل Mode (Light, Dark)
4. استخدم المتغيرات في تصميمك بدل القيم المباشرة

المكونات (Components)

المكونات هي البلوكات البنائية لنظام التصميم. كل عنصر بصري قابل لإعادة الاستخدام هو مكون.

تصنيف المكونات

١. الذرات (Atoms)

أصغر العناصر اللي مش ممكن تتقسم أكتر:

• زر (Button)
• حقل إدخال (Input)
• أيقونة (Icon)
• تسمية (Label/Tag)
• مؤشر تحميل (Spinner)

٢. الجزيئات (Molecules)

مكونات مبنية من ذرتين أو أكتر:

• حقل إدخال + تسمية + رسالة خطأ = Form Field
• أيقونة + نص + سهم = Menu Item
• صورة + اسم + وصف = Avatar + Name

٣. الكائنات (Organisms)

مكونات أكبر مبنية من جزيئات:

• شريط التنقل (Navbar)
• كارد المنتج (Product Card)
• نموذج تسجيل الدخول (Login Form)
• جدول البيانات (Data Table)

٤. القوالب (Templates)

تخطيطات صفحات كاملة مبنية من كائنات:

• صفحة رئيسية (Home Page)
• صفحة الإعدادات (Settings Page)
• لوحة تحكم (Dashboard)

بناء مكون في Figma

خلينا نبني مكون زر كامل:

الخطوة ١: الحالات (States)

كل زر محتاج الحالات دي كـ Variants:

• Default: الحالة الطبيعية
• Hover: لما الماوس فوقه
• Pressed/Active: لما يتضغط عليه
• Focused: لما يتنقل إليه بالكيبورد
• Disabled: لما يكون غير متاح
• Loading: لما بيحمّل

الخطوة ٢: الأنواع (Types)

• Primary: اللون الأساسي — للإجراءات الرئيسية
• Secondary: لون محايد — للإجراءات الثانوية
• Outline/Ghost: بدون خلفية — للإجراءات الأقل أهمية
• Danger/Destructive: أحمر — للإجراءات الخطيرة (حذف)

الخطوة ٣: الأحجام (Sizes)

• Small: ارتفاع ٣٢px — للأماكن الضيقة
• Medium: ارتفاع ٤٠px — الحجم الافتراضي
• Large: ارتفاع ٤٨px — للإجراءات المهمة

الخطوة ٤: المحتوى المرن

• نص فقط
• أيقونة + نص
• نص + أيقونة
• أيقونة فقط

Component Properties في Figma

بدل ما تعمل Variant لكل تركيبة ممكنة (اللي ممكن يوصل لمئات)، استخدم Component Properties:

• Boolean Property: عرض/إخفاء عنصر (مثلاً: show icon)
• Instance Swap: تغيير أيقونة بأيقونة تانية
• Text Property: تغيير النص بدون ما تفك المكون

التوثيق (Documentation)

نظام تصميم بدون توثيق هو مجرد مكتبة مكونات. التوثيق هو اللي بيحوله لنظام حقيقي.

ما اللي لازم يتوثّق؟

لكل مكون:

• الوصف: أيه المكون ده ومتى يُستخدم
• الأنواع والحالات: كل الـ Variants والحالات المتاحة
• إرشادات الاستخدام: متى تستخدمه ومتى ما تستخدموش
• Do's and Don'ts: أمثلة صح وأمثلة غلط
• Accessibility: معايير الوصول — ألوان، تباين، تنقل بالكيبورد
• أمثلة حية: أمثلة تفاعلية من التطبيق الحقيقي

أدوات التوثيق

• Storybook: الأكتر شيوعًا — بيوثق المكونات البرمجية تفاعليًا
• Zeroheight: بيربط بين Figma والكود
• موقع مخصص: بعض الشركات بتبني موقع توثيق خاص بيها
• Figma itself: صفحات توثيق جوا ملف Figma نفسه

بناء نظام تصميم من الصفر

المرحلة ١: التدقيق (Audit)

قبل ما تبني أي حاجة، ادرس الوضع الحالي:

1. اعمل لقطات شاشة لكل شاشة في المنتج
2. جمّع كل الأزرار في مكان واحد — هتلاقي ١٠ أشكال مختلفة للزر الواحد
3. جمّع كل الألوان — هتلاقي ٢٠ درجة رمادي بدل ٥
4. جمّع كل أحجام الخطوط — هتلاقي فوضى

التدقيق ده بيبيّن حجم المشكلة ويحدد أولويات البناء.

المرحلة ٢: الأساسيات (Foundations)

ابدأ بالتوكنز:

1. لوحة ألوان: لون أساسي + ثانوي + محايد + دلالي (نجاح/خطأ/تحذير/معلومات)
2. سلم الخطوط: حجم، وزن، ارتفاع سطر لكل مستوى
3. سلم المسافات: نظام ٨ نقاط
4. الزوايا والظلال: قيم موحدة
5. نقاط التوقف (Breakpoints): متى يتغير التخطيط

المرحلة ٣: المكونات الأساسية

ابدأ بالمكونات اللي بتحتاجها كل صفحة:

1. Button (بكل أنواعه وأحجامه)
2. Input / Text Field
3. Select / Dropdown
4. Checkbox & Radio
5. Toggle / Switch
6. Card
7. Avatar
8. Badge / Tag
9. Modal / Dialog
10. Toast / Notification

المرحلة ٤: المكونات المُركبة

بعد الأساسيات:

• Navbar / Header
• Sidebar
• Table
• Form layouts
• Page templates

المرحلة ٥: التوثيق والنشر

1. وثّق كل مكون
2. انشر المكتبة في Figma (Team Library)
3. تأكد إن الكود متزامن مع التصميم
4. درّب الفريق على استخدام النظام

صيانة نظام التصميم

نظام التصميم مش مشروع بينتهي — هو كائن حي محتاج صيانة مستمرة.

الحوكمة (Governance)

• مين بياخد قرارات التصميم؟ حدد فريق أو شخص مسؤول
• إزاي تُضاف مكونات جديدة؟ عملية واضحة — اقتراح → مراجعة → بناء → توثيق → نشر
• إزاي تُبلّغ عن مشاكل؟ قناة واضحة للتغذية الراجعة
• كل كم يتحدّث النظام؟ جدول تحديث منتظم (أسبوعي أو شهري)

الإصدارات (Versioning)

• استخدم Semantic Versioning: Major.Minor.Patch
• Major (١.٠ → ٢.٠): تغييرات كبيرة ممكن تكسر التوافق
• Minor (١.٠ → ١.١): مكونات جديدة أو تحسينات
• Patch (١.٠.٠ → ١.٠.١): إصلاح أخطاء

قياس النجاح

إزاي تعرف إن نظام التصميم ناجح؟

• نسبة التبني: كم مصمم ومطور بيستخدمه فعلاً
• سرعة التصميم: هل التصميم بقى أسرع؟
• اتساق المنتج: هل الشاشات بتبان متسقة أكتر؟
• رضا الفريق: هل المصممين والمطورين مبسوطين بالنظام؟

أخطاء شائعة في أنظمة التصميم

١. البناء قبل الاحتياج

ما تبنيش نظام تصميم كامل من أول يوم. ابدأ صغير وكبّر حسب الاحتياج. نظام صغير مُستخدم أفضل من نظام كبير مُهمل.

٢. عدم إشراك المطورين

نظام التصميم مش بس للمصممين. المطورين شركاء أساسيين — لازم يكونوا جزء من القرارات من البداية.

٣. التعقيد الزائد

مكون فيه ٥٠ Variant مستحيل يُستخدم بشكل صحيح. البساطة أهم من الشمولية.

٤. التجاهل بعد الإطلاق

نظام التصميم اللي مابيتحدثش بيموت. خصص وقت أسبوعي للصيانة والتحديث.

٥. عدم التوثيق

المكون اللي مالوش توثيق هيُستخدم غلط أو مش هيُستخدم خالص.

تمرين عملي

ابني Mini Design System لتطبيق إدارة مهام:

1. الأساسيات: حدد لوحة ألوان (٣ ألوان + ألوان وظيفية) وسلم خطوط (٥ أحجام) وسلم مسافات
2. ابني ٥ مكونات: Button, Input, Card, Badge, Avatar — كل واحد بأنواعه وحالاته
3. اعمل Variables في Figma لكل التوكنز
4. ابني صفحة باستخدام المكونات بس — قائمة مهام بسيطة
5. وثّق مكون واحد بالكامل — Do's and Don'ts + إرشادات الاستخدام
6. اعمل Dark Mode بتغيير Variables بس

ده التمرين هيخليك تفهم إن بناء نظام تصميم مش سهل — بس لما يشتغل صح، بيغير طريقة الفريق كله في الشغل.