Design Systems with Storybook: Building Component Variants
Learn to create flexible and reusable UI components by implementing variants within a Storybook-driven design system.
-
💬
مدرب ذكاء اصطناعي
اسأل عن أي درس واحصل على إجابة واضحة فورًا، في أي وقت. -
🕐
ابدأ في أي وقت
بلا جداول أو مواعيد نهائية — تعلّم بوتيرتك، وقتما يناسبك. -
🌐
بالعربية
الدروس والمهام والشهادة — كل ذلك بلغتك بالكامل.
حول هذه الدورة
Designing user interfaces often requires components that adapt to various states and contexts while maintaining a consistent visual language. This course guides you through building a foundational design system using Storybook, enabling you to create versatile UI components that seamlessly adapt to diverse design requirements.
What you'll learn:
* Understand the fundamental concepts of design systems and component-driven development.
* Configure Storybook to develop, document, and showcase UI components.
* Implement robust component variants to handle diverse visual states and behaviors.
* Apply basic accessibility principles when designing and developing component variants.
* Practice writing foundational interaction tests for Storybook components to ensure reliability.
* Organize and maintain a scalable component library within Storybook.
The course begins with foundational design system concepts, then progresses to setting up Storybook, defining and implementing component variants, and integrating modern development practices like accessibility and basic testing. This course is designed for beginner developers and UI designers interested in creating maintainable and scalable user interfaces. No prior experience with design systems or Storybook is required. Start building your resilient component libraries today.
ما الذي ستحصل عليه
-
📜
شهادة إتمام
أضفها إلى ملفك على LinkedIn -
💬
مدرّس AI شخصي
عالق في دورة؟ اسأل مدرّسك المدمج أي شيء، في أي وقت. -
♾️
وصول مدى الحياة
عُد متى شئت، بلا انتهاء -
📱
الهاتف أو الكمبيوتر
يعمل في أي مكان وعلى أي جهاز -
💸
استرداد خلال 14 يومًا
دون أسئلة -
⚡
قصير ومركَّز
2 ساعة 54 دقيقة من المحتوى التطبيقي
المراجعات
لا توجد مراجعات بعد — كن أول من يشارك تجربته.
المتعلمون أخذوا أيضًا
🎓 بشهادة
تقييم واجهة المستخدم واختبار قابلية الاستخدام
شهادة
تطبيق عملي
SR 190
→
🔥 مطلوب
🎓 بشهادة
أساسيات تصميم تجربة المستخدم وواجهة المستخدم (UX/UI): البحث، التخطيط الهيكلي، وقابلية الاستخدام
شهادة
تطبيق عملي
SR 190
→
🔥 رائج
🎓 بشهادة
أنظمة تصميم Figma: إنشاء مكتبات مكونات قابلة لإعادة الاستخدام
شهادة
تطبيق عملي
SR 190
→
🏆 الأكثر شعبية
🎓 بشهادة
أساسيات UX/UI لتصميم الواجهات الرقمية
شهادة
تطبيق عملي
SR 190
→
الأسئلة الشائعة
ما الذي أحتاجه لأخذ هذه الدورة؟ +
يكفي هاتف أو كمبيوتر متصل بالإنترنت. بدون تثبيتات أو أجهزة خاصة.
كيف يمكنني الدفع؟ +
بالبطاقة عبر Stripe. لا نخزن بيانات البطاقة — يتولى Stripe ذلك بأمان.
هل يمكنني استرداد المال؟ +
نعم — استرداد كامل خلال 14 يومًا، دون أسئلة.
إلى متى يستمر وصولي؟ +
إلى الأبد. بمجرد الشراء، الدورة لك تعود إليها متى شئت.
هل سأحصل على شهادة؟ +
نعم. عند الإتمام ستحصل على شهادة يمكنك إضافتها إلى ملفك في LinkedIn.
مصمَّم للعاملين في
التقنية
التصميم
المالية
التسويق
الرعاية الصحية
التعليم
الضيافة
التصنيع
×2
اشحن مرة واحدة وادفع النصف
أضف SR 380 واحصل على 200 رصيد، بحيث تكلف كل دورة حوالي SR 47.50. لا تنتهي صلاحية الأرصدة أبداً.
SR 380
200 رصيد
SR 47.50 / دورة
أفضل قيمة
SR 950
550 رصيد
SR 43.18 / دورة
SR 1,900
1200 رصيد
SR 39.58 / دورة
الرصيد يصلح لأي دورة ولا ينتهي.