معسكر أنظمة التصميم (Design Systems & Tokens)

في هذا المعسكر ستتلقى أكثر من 30 ساعة من المحتوى التعليمي التفاعلي المباشر عالي الجودة عبر الانترنت، وستتعلم وتطبق بناء أنظمة التصميم بمنهجية التصميم الذرّي (Atomic Design)، وإدارة الرموز التصميمية (Design Tokens) وتوثيق النظام وربطه بالكود.

المدة

4 أسابيع

عدد الساعات

30 ساعة

سجل في المسار

معسكرات المسار التعليمي

اختر المعسكر لعرض تفاصيله • 6 معسكرات شاملة

3 من 6 معسكرات مكتملة (50%) تقدمك في المسار

حول هذا المعسكر

ستنتقل من بناء مكونات متفرقة إلى تصميم نظام متكامل يضمن الاتساق عبر كل شاشة، ومن قرارات تصميمية يصعب تفسيرها إلى Design Tokens موثقة تتحدث نفس لغة المطورين. هذا المعسكر لا يعلّمك كيف تستخدم فيجما فحسب، بل يعلّمك كيف تفكر في التصميم كنظام حي قابل للتوسع والصيانة، ويخرجك بنظام تصميم حقيقي جاهز للتسليم.

بعد المعسكر، ستكون قادرًا على:

فهم الفرق بين Design System وStyle Guide وUI Kit واختيار ما يناسب مشروعك.
بناء مكونات منهجية باستخدام Atomic Design من أبسط العناصر إلى أكثرها تعقيداً.
إنشاء مكونات ديناميكية باستخدام Auto Layout والـ Variants والـ States.
بناء Design Tokens موثقة وربطها بمكوناتك داخل فيجما.
إنشاء الـ Dark Mode والـ Light Mode بشكل منهجي.
توثيق نظام التصميم وتسليمه للمطورين باحترافية.
تصدير متغيرات فيجما إلى JSON وتحويلها إلى CSS جاهز للتطوير.

هذا المعسكر مناسب لك إذا كانت:

مصمم واجهات لديه خبرة وتريد الارتقاء بعملك من تصميم شاشات إلى بناء أنظمة.
مصمم يعمل ضمن فريق ويعاني من عدم الاتساق بين المكونات والشاشات.
مصمم يريد التحدث بنفس لغة المطورين وتسليم عمله باحترافية.
مدير تصميم أو قائد فريق يريد بناء نظام تصميم موحد لمنتجه.
لأي شخص يرى في نفسه القدرة على الالتزام والمثابرة لتعلم مهارات جديدة.

الأدوات التي ستحتاجها خلال المعسكر:

توفر جهاز كمبيوتر أو حاسوب محمول مع اتصال مستقر بالإنترنت.
حساب مجاني على Figma (وسنرشدك خطوة بخطوة لإعداده عند الحاجة).
تثبيت تطبيق Zoom وإنشاء حساب عليه لحضور الجلسات المباشرة والتفاعلية

المنهج التعليمي

ما ستتعلمه في هذا المعسكر

رحلتك التعليمية – خطوة بخطوة

نحن نؤمن بأن التعلم الفعّال يبدأ بخطوات واضحة ومدروسة. في هذه الدورة، ستنطلق في رحلة تعليمية موجهة، تبدأ من الأساسيات وتنتقل بك تدريجيًا نحو الاحتراف. كل مرحلة مصممة بعناية لتبني مهاراتك بثقة وتمنحك فهماً عملياً يمكنك تطبيقه مباشرة في مشاريع واقعية.

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

UI Kit و Style Guide و Design System والفرق بينهم

عناصر النظام الأساسية.

كيف تبدأ ببناء نظام تصميم؟

منهجية التصميم الذري (Atomic Design) ومستوياتها.

كيفية التخطيط وتحليل مستويات المكونات.

فهم حالات المكونات (States & Variants)

نشاط عملي تفاعلي: استخدام Figma Auto Layout و Properties لإنشاء مكونات ديناميكية.

نشاط عملي تفاعلي: إنشاء زر Button باستخدام Variables و Auto Layout.

نشاط عملي تفاعلي: بناء مكونات معقدة (Molecules & Organisms).

ما هي الرموز التصميمية (Design Tokens) ولماذا هي مهمة؟

الفرق بين الرموز التصميمية (Design Tokens) ومتغيرات فيجما (Figma Variables).

أنواع الرموز التصميمية الـ (Design Tokens) واستراتيجيات التسمية.

استراتيجيات تخطيط وبناء الرموز التصميمية (Design Tokens).

تنظيم وربط المكونات بالـ Design Tokens داخل Figma

إنشاء (Dark Mode & Light Mode)

لماذا التوثيق مهم؟ وكيفية إنشائه بطرق عملية.

أفضل الأدوات لمرحلة التسليم للمطورين (Handoff).

صيانة نظام التصميم (Design System): مجالاتها وأهميتها

الحوكمة (Governance): النماذج وأفضل الممارسات لإدارة التغييرات.

تصدير متغيرات فيجما إلى JSON ومعاينة الكود

أدوات التصدير والتحويل (Style Dictionary )

تحويل JSON إلى CSS وربطه بالمشروع

إعداد مكتبة المتغيرات (Variables) في فيجما للتصدير

الـ Workflow الكامل: من فيجما إلى التطوير

اترك مراجعتك

آراء الخريجين

دعاء خفاجه

البلد : الأردن

15 يوليو, 2024

بصراحة استفدت جداً من أفضل التجارب التعليمية يلي مريت فيها

الاء عبدالناصر سليم

البلد : السعودية

26 يناير, 2025

أقدر أقول بثقة وبدون أي مبالغة إن ده أحسن معسكر دخلته. توقعاتي من أول سيشن مع البشمهندس محمد العارف كانت في محلها تمامًا. ممتنة جدًا للفرصة دي اتعلمت منها حاجات كتير.

عتّاب محمد عبدالله الغندور

البلد : الاردن

27 ديسمبر, 2025

تجربتي في معسكر UI, Design System, Design Tokens كانت مفيدة جدًا. تعلمت أساسيات بناء أنظمة التصميم واستخدام التوكنز بشكل فعّال لتوحيد الواجهات. أكثر شيء أعجبني هو التطبيق العملي والشرح الواضح.