أنظمة تصميم تكبر مع فريقك
ابنِ نظام تصميم يستخدمه 40 فريقًا فعلًا: tokens ومكوّنات وإصدارات وتبنٍّ حقيقي.
- 4.9 (612 تقييمًا)
- 4,900 متعلّم
- متقدّم
- 6 س 5 د إجمالًا
- حُدّثت في أغسطس 2026
ما ستتعلّمه
- تدقيق واجهة وتحديد ما يجب أن يملكه النظام
- تنظيم الـ tokens في طبقات primitive وsemantic وcomponent
- دعم الفاتح والداكن والكثافة وعلامتين دون نسخ الكود
- تصميم component API يعتمد على composition لا على تكديس الـ props
- إطلاق إصدارات بـ semver وchangelog وdeprecation بلا ألم
- إدارة المساهمة والـ governance وقياس التبنّي على نطاق واسع
لمن هذه الدورة
أغلب أنظمة التصميم تموت بصمت: مكتبة Figma لا يثق بها أحد، وحزمة مكوّنات متأخرة ثلاثة إصدارات، وأربعون درجة رمادي في الإنتاج. تعلّمك هذه الدورة الأجزاء التي تجعل نظام التصميم (design system) يصمد أمام الفرق الحقيقية: معمارية الـ design tokens، وتصميم الـ component API، وإمكانية الوصول المبنية في كل حالة، والإصدارات المرقّمة، ونموذج governance يقبله الناس.
ستعمل على نظام واحد من البداية إلى النهاية: Northwind UI، الذي يخدم تطبيق إدارة شحنات (dispatch) على الويب وموقعًا تسويقيًا لعلامتين تجاريتين. ترافقك صوفيا رييس، مصمّمة منتجات رئيسية أدارت نظامًا يستخدمه أربعون فريقًا. ستكتب CSS حقيقيًا وملفات tokens حقيقية وخطط إصدار حقيقية، وتتعلّم أيّ القرارات يكلّف التراجع عنها غاليًا.
- لمن هذه الدورة
- مصمّمون ومطوّرو واجهات أمامية يطلقون واجهات بالفعل، ويحتاجون الآن إلى بناء نظام تصميم مشترك أو إدارته.
- قبل أن تبدأ
- إلمام جيد بـ HTML وCSS (الـ custom properties والـ selectors)، وأساسيات JavaScript، ومكوّنات Figma.
تدريب عملي
- تمارين موجَّهة: اكتشف الخطأ، وأكمل الأمر، ورتّب الخطوات.
- عدّل HTML وCSS وJavaScript وشاهد النتيجة فورًا.
محتوى الدورة
5 وحدات · 19 درسًا · 6 س 5 د إجمالًا
- منتج، لا مشروع12 دقيقة
- جرد الواجهة20 دقيقة
- المبادئ ونماذج الفرق18 دقيقة
- اختبار الوحدة5 أسئلة
- ثلاث طبقات: Primitive وSemantic وComponent20 دقيقة
- تسمية الـ Tokens لتعيش طويلًا18 دقيقة
- الـ Themes والـ Modes22 دقيقة
- صيغة DTCG للـ Tokens20 دقيقة
- خطوط إنتاج الـ Tokens: من JSON إلى كل منصّة20 دقيقة
- اختبار الوحدة5 أسئلة
- الـ Component API: الـ Props والـ Variants والـ Slots22 دقيقة
- الـ Composition بدل الإعدادات20 دقيقة
- الحالات وإمكانية الوصول، مبنيّة من الأساس22 دقيقة
- توثيق يقرؤه الناس فعلًا18 دقيقة
- اختبار الوحدة5 أسئلة
- Figma Variables والمكتبات، متزامنة مع الكود20 دقيقة
- الـ Semver والـ Changelog لنظام التصميم20 دقيقة
- مسارات الـ Deprecation18 دقيقة
- Storybook والاختبار البصري والإصدارات22 دقيقة
- اختبار الوحدة5 أسئلة
- المساهمة والـ Governance18 دقيقة
- الـ Theming لعلامات متعدّدة على نطاق واسع17 دقيقة
- قياس التبنّي وفنّ قول «لا»18 دقيقة
- اختبار الوحدة5 أسئلة
مدرّبك
صوفيا رييس
مصمّمة منتجات رئيسية · Northwind
- تقييم المدرّب 4.8
- 25,900 متعلّم
- 3 دورات
درست صوفيا التصميم الجرافيكي، ثم علّمت نفسها CSS لتتوقف عن الجدال مع المهندسين حول البكسلات، ومنذ ذلك الحين تعمل على طرفَي التسليم معًا. في Northwind تقود نظام التصميم الذي تقوم عليه 11 منتجًا، من مكتبة Figma حتى الـ tokens التي تصل إلى الكود في CSS.
ماذا يقول المتعلّمون
4.9
612 تقييم
Grace Okonkwo
قبل 6 أشهر
تسمية الـ tokens على ثلاث طبقات، من الأولية إلى الدلالية إلى الخاصة بكل component، أنهت جدالًا دام شهرين في فريقي. أطلقنا مجموعة الـ tokens الجديدة في الأسبوع التالي.
Khaled Mansour
قبل 3 أشهر
معظم المحتوى عن أنظمة التصميم يتوقف عند مكتبة Figma. هذه الدورة تغطي إدارة الإصدارات، وإيقاف المكوّنات القديمة، وإقناع الفرق الأخرى بتبنّي النظام، وهنا تحديدًا تفشل الأنظمة عادة.
Ingrid Solberg
قبل أسبوعين
نقد واجهات components حقيقية هو أفضل ما في الدورة. لكنها تفترض أنك تدير مكتبة صغيرة بالفعل؛ وبصفتي مصممة أعمل وحدي، مررت على الجزء الخاص بالحوكمة سريعًا.