{"checkpoints":{"s-ds-1":[{"q":"

يقترح قائد التصميم في شركة ناشئة «جولة نظام تصميم» مدّتها ثلاثة أشهر تنتهي بحفل إطلاق، دون أي مالك بعدها. بناءً على تاريخ Northwind، ما أقوى اعتراض؟

","options":[{"text":"بعد الإطلاق لا يملك أحد الأخطاء والطلبات والإصدارات، فتبدأ الفرق بترقيع نسخها الخاصة.","why":"صحيح. هكذا فشل نظام Northwind لعام 2021، فقد كان «منتهيًا»، والأنظمة المنتهية تنحرف."},{"text":"ثلاثة أشهر مدّة أقصر من أن يُبنى فيها أي مكوّن.","why":"يمكن بناء مكوّنات مفيدة كثيرة في ثلاثة أشهر؛ المشكلة فيما يحدث بعدها."},{"text":"حفلات الإطلاق تجعل التبنّي إلزاميًا، وهذا يزعج الفرق.","why":"الإعلانات لا تفرض التبنّي؛ الفجوة الحقيقية هي الملكية بعد الإطلاق."},{"text":"يجب أن تبني فرق المنتجات أنظمة التصميم، لا قادة التصميم.","why":"مَن يبدأ النظام أقل أهمية من وجود مَن يُبقيه محدَّثًا."}],"answer":0},{"q":"

كشف جرد الواجهة لديك 9 أشكال للجداول في 31 شاشة، و4 أشكال للـ tooltips في 6 شاشات، و52 درجة رمادي مستخدمة في كل مكان. بأيّ ترتيب يجب أن يملكها النظام؟

","options":[{"text":"الـ tooltips أولًا، لأنها أسرع مكسب.","why":"المكاسب السريعة في ست شاشات لا تعالج الانحراف الأوسع انتشارًا."},{"text":"الجداول أولًا، لأنها أصعب مكوّن.","why":"الصعوبة لا تحدّد الأولوية؛ ما يحدّدها هو التكرار مضروبًا في عدم الاتّساق."},{"text":"الثلاثة معًا لإظهار النطاق الكامل للنظام.","why":"توزيع فريق صغير على كل شيء يؤخّر عملية التوحيد الأعلى قيمة."},{"text":"الرماديات أولًا، ثم الجداول، ثم الـ tooltips.","why":"صحيح. الرماديات في كل مكان وغير متّسقة إلى حدّ كبير، والجداول شائعة ومتنوّعة، والـ tooltips نادرة."}],"answer":3},{"q":"

أيّ مبدأ مقترح سيحسم على أفضل وجه نقاشًا حول إضافة variant رابع للأزرار في الموقع التسويقي؟

","options":[{"text":"واجهتنا نظيفة وعصرية.","why":"لا أحد يدافع عن واجهة فوضوية وقديمة، فلا يمكن لهذا أن يحسم شيئًا."},{"text":"نقدّر التعاون بين التصميم والهندسة.","why":"قيمة جيدة، لكنها لا ترشد إلى قرار إضافة الـ variant أو عدمها."},{"text":"مكوّنات أقل لكن أفضل، فوسّع مكوّنًا موجودًا قبل أن تضيف نسخة شبه مكرّرة منه.","why":"صحيح. ينحاز إلى طرف في مفاضلة حقيقية ويشير مباشرة إلى قرار."},{"text":"يجب أن يشعر كل فريق منتج بملكية النظام.","why":"الملكية تتعلّق بالعملية، لا بما إذا كان هذا الـ variant ينتمي إلى النظام."}],"answer":2},{"q":"

شركة لديها ثمانية فرق منتجات. يصون نظامَ التصميم فيها مصمّمان من فريق الـ dispatch في أوقات فراغهما، والفرق السبعة الأخرى تنسخ ما يبنيه فريق الـ dispatch. أيّ نموذج فريق هذا، وما فشله المعتاد؟

","options":[{"text":"المركزي؛ يصبح فريق النظام عنق زجاجة.","why":"لا يوجد هنا فريق نظام متفرّغ؛ النظام يعيش داخل فريق منتج واحد."},{"text":"المنفرد؛ يعكس النظام احتياجات فريق واحد، وتنحرف الفرق الأخرى وهي تكيّف نسخها.","why":"صحيح. النموذج المنفرد ينجح مع فريق واحد ويتفكّك بمجرّد أن تعتمد عليه عدّة فرق."},{"text":"الفيدرالي؛ تتعثّر المساهمات لأن أحدًا لا يراجعها.","why":"الفيدرالي يعني أن فرقًا كثيرة تساهم؛ وهنا فريق واحد فقط يبني."},{"text":"الهجين؛ تختلف النواة والمساهمون حول الاتجاه.","why":"النموذج الهجين يحتاج نواة متفرّغة، وهذه الشركة لا تملكها."}],"answer":1},{"q":"

يُبلغ سكربت التدقيق عن #1F2933 و#1f2933 و#222b35 كثلاث درجات رمادي. ماذا يجب أن يقول تقرير التدقيق؟

","options":[{"text":"ثلاث درجات رمادي مختلفة، تمامًا كما كُتبت.","why":"القيمتان الأوليان قيمة واحدة بحالة أحرف مختلفة؛ وعرضهما منفصلتين يضخّم الأرقام."},{"text":"درجة رمادي واحدة، لأنها كلها تبدو متشابهة.","why":"القيمة #222b35 مختلفة؛ يجب أن تُعرض كقيمة شبه مكرّرة، لا أن تُدمج بصمت."},{"text":"لا شيء بعد؛ الرماديات لا تهمّ قبل وجود المكوّنات.","why":"انحراف الألوان غالبًا أوسع النتائج انتشارًا، وهو ما يشكّل عمل الـ tokens الذي يأتي أولًا."},{"text":"قيمتان بعد توحيد حالة الأحرف، معلَّمتان كمجموعة واحدة شبه مكرّرة ليوحّدها المصمّمون.","why":"صحيح. وحّد الصيغة آليًا؛ ودع المصمّمين يقرّرون أيّ القيم شبه المكرّرة تصبح token واحدًا."}],"answer":3}],"s-ds-2":[{"q":"

يكتب فريق منتج .order-card { border-color: var(--nw-gray-200); } في الـ CSS الخاص به. والوضع الداكن يُطلق الأسبوع القادم. ماذا سيحدث لذلك الحدّ؟

","options":[{"text":"سيتكيّف تلقائيًا، لأن كل الـ tokens تتغيّر في الوضع الداكن.","why":"الوضع الداكن يعيد ربط الـ semantic tokens؛ أما الـ primitives فتحتفظ بقيمها."},{"text":"سيصبح شفافًا، لأن الـ primitives تُحذف في الوضع الداكن.","why":"الـ primitives تبقى معرّفة؛ هي فقط لا يُعاد ربطها."},{"text":"سيختار المتصفّح مقابلًا داكنًا عبر color-scheme.","why":"الخاصية color-scheme تؤثّر في واجهة المتصفّح المرسومة، لا في الـ custom properties الخاصة بك."},{"text":"سيحتفظ بالرمادي الفاتح، لأنه يشير إلى primitive لا يعيد الوضع الداكن ربطه.","why":"صحيح. استخدام --nw-color-border بدلًا منه سيسمح للـ theme بتغييره."}],"answer":3},{"q":"

أيّ مما يلي dimension token مكتوب بشكل صحيح وفق DTCG 2025.10؟

","options":[{"text":""inset-md": { "$type": "dimension", "$value": { "value": 1, "unit": "rem" } }","why":"صحيح. قيمة الـ dimension كائن فيه value رقمية وunit قيمتها px أو rem."},{"text":""inset-md": { "$type": "dimension", "$value": "16px" }","why":"المسودّات الأقدم استخدمت النصوص، لكن 2025.10 تشترط صيغة الكائن بـ value وunit."},{"text":""inset.md": { "$type": "dimension", "$value": { "value": 16, "unit": "px" } }","why":"القيمة سليمة، لكن النقاط غير مسموحة في الأسماء لأنها تفصل مسارات المراجع."},{"text":""inset-md": { "$type": "dimension", "$value": { "value": 1, "unit": "em" } }","why":"الوحدتان الصالحتان الوحيدتان لـ dimension tokens هما px وrem."}],"answer":0},{"q":"

يحتوي الـ CSS المولَّد في Northwind على --nw-color-action-bg: var(--nw-color-blue-600); على :root. وملف الأنماط الخاص بصفحة حملة يحدّد قيمة أسطع لـ --nw-color-blue-600 على :root، فتتبعها كل أزرار الإجراء في تلك الصفحة. ما الذي جعل هذا ممكنًا؟

","options":[{"text":"ينجح لأن الـ primitives تُحسب دائمًا في النهاية؛ لا علاقة لأي إعداد بذلك.","why":"ترتيب الحساب لا علاقة له بالأمر؛ كان يجب أن يحتفظ الإخراج بالمراجع."},{"text":"احتُفظ بالمراجع في الـ CSS المولَّد، فما زال الـ semantic token يشير إلى الـ primitive وقت التشغيل.","why":"صحيح. مع outputReferences تصل الصلة بين الـ semantic والـ primitive إلى المتصفّح، فيسري تخصيص الـ primitive على العنصر نفسه."},{"text":"خط الإنتاج يولّد ملفًا لكل صفحة.","why":"تولّد Northwind ملفًا لكل theme لا لكل صفحة؛ والتخصيص يحدث في المتصفّح."},{"text":"يراقب Style Dictionary الصفحة ويعيد البناء حين تتغيّر القيم.","why":"أدوات البناء تعمل وقت البناء؛ والتخصيص يعمل بالكامل داخل الـ cascade في المتصفّح."}],"answer":1},{"q":"

يسمّي مصمّم token جديدًا --nw-color-tidewater-teal-button. ما المشكلة الرئيسية؟

","options":[{"text":"إنه أطول من اللازم لـ CSS.","why":"أسماء الـ custom properties لا حدّ عمليًا لطولها؛ والأسماء الطويلة لا بأس بها إن كانت ذات معنى."},{"text":"ينقصه جزء الحالة من القواعد.","why":"ليس كل token يحتاج حالة؛ المشكلة فيما يصفه الاسم."},{"text":"يحشر علامة ولونًا ومكوّنًا في اسم دلالي، فينكسر حين يتغيّر أيٌّ منها.","why":"صحيح. اسم مبني على الدور مثل --nw-color-action-bg يسمح لكل علامة بربط لونها الخاص."},{"text":"أسماء الـ tokens لا يمكن أن تحتوي أسماء علامات في صيغة DTCG.","why":"الصيغة تسمح بأي اسم خالٍ من $ و{ و} و.؛ هذه مشكلة تصميم لا مشكلة صياغة."}],"answer":2},{"q":"

كتلة الـ theme الداكن هي [data-theme="dark"] { … } والكثافة هي [data-density="compact"] { … }. تحدّد صفحة السمتين معًا على <html>. ماذا تحتاج أن تضيف لتعمل التركيبة؟

","options":[{"text":"لا شيء، لأن كل محور يعيد ربط tokens مختلفة والـ cascade يجمعها.","why":"صحيح. المحاور المستقلة التي تملك tokens منفصلة تتركّب دون selectors مركّبة."},{"text":"كتلة مركّبة [data-theme="dark"][data-density="compact"].","why":"لا تلزم إلا حين يتفاعل محوران فعلًا على الـ tokens نفسها؛ والـ theme والكثافة لا يتفاعلان."},{"text":"دالة JavaScript تدمج مجموعتي الـ tokens.","why":"الـ cascade في CSS يدمج التعريفات أصلًا؛ لا حاجة إلى سكربت."},{"text":"سمة ثالثة، مثل data-mode="dark-compact".","why":"دمج الـ modes في سمة واحدة يعيد التضاعف الذي كنت تتجنّبه."}],"answer":0}],"s-ds-3":[{"q":"

الـ API الخاص بمكوّن Select فيه القيم المنطقية isSmall وisLarge وisCompact. ما أفضل إعادة تصميم؟

","options":[{"text":"enum واحد باسم size (sm، md، lg) يطابق المكوّنات الأخرى، مع ترك الإحكام لـ mode الكثافة.","why":"صحيح. الأحجام المتنافية تصبح enum واحدًا، والكثافة تنتمي إلى محور الـ theme لا إلى كل مكوّن."},{"text":"إبقاء القيم المنطقية مع توثيق التركيبات غير الصالحة.","why":"التوثيق لا يمنع التركيبات غير الصالحة؛ النوع هو الذي يجب أن يمنعها."},{"text":"استبدالها بـ prop باسم className لتحدّد الفرق الحجم بنفسها.","why":"هذا يتخلّى عن سيطرة النظام على الأحجام ويخلق انحرافًا."},{"text":"إضافة isMedium ليكون لكل حجم قيمة منطقية.","why":"مزيد من القيم المنطقية يعني مزيدًا من التركيبات المستحيلة."}],"answer":0},{"q":"

يمرّر <Tabs> القيمة المحدّدة إلى الـ triggers عبر نسخ children. يغلّف فريق أحد الـ triggers بـ <Tooltip>. ماذا يحدث، وما الإصلاح؟

","options":[{"text":"ينكسر الـ tooltip؛ فالـ tooltips لا يمكنها تغليف الأزرار.","why":"الـ tooltips تغلّف الأزرار طوال الوقت؛ المشكلة في طريقة عثور Tabs على الـ triggers."},{"text":"لا شيء؛ النسخ يصل إلى العناصر المتداخلة تلقائيًا.","why":"النسخ لا يلمس إلا الأبناء المباشرين، فيُفوَّت الـ trigger المغلَّف."},{"text":"تُزال لوحة التبويب؛ أضف key إلى الـ tooltip.","why":"المفاتيح تتحكّم بالهوية في القوائم، لا بكيفية وصول الحالة إلى trigger متداخل."},{"text":"لم يعد الـ trigger المغلَّف يستقبل الـ props الخاصة به؛ شارك الحالة عبر الـ context بدلًا من ذلك.","why":"صحيح. الـ context يصل إلى الـ trigger مهما كان عمق تداخله."}],"answer":3},{"q":"

تُظهر تصاميم مصمّم مربّع اختيار مخصّصًا مرسومًا بـ <div>. على أيّ أساس يجب أن يُبنى Checkbox في النظام؟

","options":[{"text":"على الـ <div> مع إضافة role="checkbox" وtabindex ومعالجات المفاتيح.","why":"ممكن، لكنه يعيد بناء ما يفعله عنصر الإدخال الأصلي بشكل صحيح أصلًا، يدويًا."},{"text":"على <img> يتبدّل بين صورتي المحدّد وغير المحدّد.","why":"الصور لا تحمل حالة ولا سلوك لوحة مفاتيح للتقنيات المساعدة."},{"text":"على <input type="checkbox"> أصلي، منسَّق بصريًا، ومرتبط بالـ label الخاص به.","why":"صحيح. العناصر الأصلية تجلب التركيز ولوحة المفاتيح والحالة مجانًا؛ نسّقها بدل أن تستبدلها."},{"text":"على <button> مع aria-pressed.","why":"هذا نمط زر التبديل، ويُعلَن بشكل مختلف عن مربّع الاختيار."}],"answer":2},{"q":"

صفحة توثيق Dialog تسرد كل prop بدقّة، لكن الفرق تستمرّ في استخدام Dialog لرسائل النجاح. أيّ جزء من الصفحة ناقص؟

","options":[{"text":"جدول props أكثر تفصيلًا.","why":"جدول الـ props دقيق أصلًا؛ ولا يستطيع أن يخبر الناس متى لا يستخدمون Dialog."},{"text":"رابط إلى الـ changelog.","why":"التاريخ لا يساعد أحدًا على تقرير أيّ مكوّن يستخدم اليوم."},{"text":"وصف أطول لحركة الطبقة المعتمة.","why":"تفاصيل الحركة لا تعالج اختيار المكوّن الصحيح."},{"text":"إرشاد «متى لا تستخدمه» مع البديل، Toast، ومثال افعل/لا تفعل.","why":"صحيح. إساءة الاستخدام تأتي من غياب الحكم، ولا يقدّمه إلا الإرشاد المكتوب."}],"answer":3},{"q":"

زرّ Button معطّل بـ aria-disabled="true" حتى يشرح tooltip السبب. نقره مختبِر فحُفظ النموذج رغم ذلك. ما الذي فات؟

","options":[{"text":"يجب أن تكون القيمة aria-disabled="disabled".","why":"القيمتان الصالحتان هما true وfalse؛ والقيمة ليست المشكلة."},{"text":"السمة aria-disabled تعلن الحالة فقط؛ ويجب أن يمنع المكوّن الإجراء بنفسه.","why":"صحيح. على عكس السمة disabled، لا توقف aria-disabled النقرات."},{"text":"اعترض الـ tooltip النقرة.","why":"الـ tooltips لا تغيّر سلوك النقر؛ عمل معالج الزر لأن شيئًا لم يوقفه."},{"text":"قارئات الشاشة تتجاهل aria-disabled على الأزرار.","why":"قارئات الشاشة تعلنها؛ المشكلة في غياب الحارس على الإجراء."}],"answer":1}],"s-ds-4":[{"q":"

ملف JSON الخاص بالـ tokens هو مصدر الحقيقة، لكن مصمّمًا نشر أزرق إجراء جديدًا مباشرة في مكتبة Figma. ماذا يجب أن يحدث بعد ذلك؟

","options":[{"text":"نسخ القيمة من Figma إلى JSON حتى يتطابقا.","why":"هذا يقبل تغييرًا غير مُراجَع ويتخطّى فحوص التباين والتسمية."},{"text":"ترك الاثنين؛ الفروق الصغيرة لا تهمّ.","why":"الفروق الصغيرة هي بالضبط ما انتهى بمنتجين إلى لونين أزرقين مختلفين."},{"text":"إعادة المكتبة إلى القيم المعتمدة في آخر إصدار وتحويل التغيير إلى pull request على ملف JSON.","why":"صحيح. يمرّ التغيير عبر المراجعة والفحوص المعتادة، ثم يُزامَن إلى Figma عند الإصدار."},{"text":"قفل مكتبة Figma حتى لا يستطيع أحد تعديل المتغيّرات.","why":"يحتاج المصمّمون إلى التجريب في الـ branches؛ العملية، لا القفل، هي ما يمنع التباعد."}],"answer":2},{"q":"

الحزمة @northwind/tokens في الإصدار 2.3.1. إصدار جديد يضيف ثلاثة tokens جديدة ويعيد تسمية token موجود دون إبقاء اسم مستعار. ما الإصدار الصحيح؟

","options":[{"text":"3.0.0، لأن إعادة التسمية بلا اسم مستعار تكسر كل من يستخدم الاسم القديم.","why":"صحيح. الإضافات وحدها كانت ستعطي 2.4.0، لكن الرفع الأعلى هو الذي يفوز، والحذف major."},{"text":"2.4.0، لأن معظم التغييرات إضافات.","why":"الأغلبية لا تقرّر؛ تغيير كاسر واحد يجعل الإصدار major."},{"text":"2.3.2، لأن تغييرات الـ tokens دائمًا patches.","why":"إعادة التسمية والحذف تغيّران الـ API العام، وهذا لا يكون patch أبدًا."},{"text":"2.4.0 الآن، و3.0.0 حين تشتكي الفرق.","why":"الإصدارات تصف التغيير لحظة إطلاقه، لا بعد وقوع الضرر."}],"answer":0},{"q":"

أيّ تغيير مكانه إصدار major من Northwind UI؟

","options":[{"text":"إصلاح Tabs حتى تنقل مفاتيح الأسهم التركيز كما هو موثّق.","why":"استعادة سلوك موثّق patch."},{"text":"إضافة prop باسم size إلى Badge.","why":"الإضافة المتوافقة مع ما سبق minor."},{"text":"جعل قيمة token أغمق قليلًا ضمن دوره.","why":"تحسين القيمة ضمن الدور نفسه تحديث تصميم من نوع minor."},{"text":"تغيير Dialog بحيث لا يُغلق بمفتاح Escape افتراضيًا بعد الآن.","why":"صحيح. تغيير القيمة الافتراضية يغيّر السلوك في كل استخدام قائم دون أي تغيير في الكود."}],"answer":3},{"q":"

أعاد codemod تسمية kind إلى variant في مستودع، لكن تحذير الـ deprecation ما زال يظهر في الـ console. ما السبب الأرجح؟

","options":[{"text":"لم يعمل الـ codemod على ملفات الاختبار.","why":"ممكن، لكن الاختبارات نادرًا ما تطلق تحذيرات في التطبيق الذي يشغّله المطوّر."},{"text":"بعض الأزرار تستقبل kind عبر props تُمرَّر بالـ spread وبُنيت في مكان آخر، ولا تراها إعادة الكتابة الثابتة.","why":"صحيح. تحذير وقت التشغيل موجود تحديدًا لالتقاط الحالات التي تفوّتها الـ codemods."},{"text":"المتصفّح يخزّن التحذير مؤقتًا.","why":"تحذيرات الـ console لا تُخزَّن؛ إنها تُسجَّل حين يعمل الكود."},{"text":"الـ codemods لا تعمل إلا في نسخ الإنتاج.","why":"الـ codemods تعيد كتابة ملفات المصدر ولا علاقة لها بنمط البناء."}],"answer":1},{"q":"

يُظهر اختبار بصري أن تغيير token للحشوة غيّر 3 stories لـ Dialog و40 story لـ Table. والـ pull request لم يقصد إلا تغيير Dialog. ماذا يخبر هذا المراجع؟

","options":[{"text":"أن الـ token مستخدم على نطاق أوسع من المقصود، فالأرجح أن Dialog يحتاج component token خاصًا به.","why":"صحيح. كشف الفرق المدى الحقيقي للتغيير؛ والـ component token يحصره في Dialog."},{"text":"أن الاختبارات البصرية غير موثوقة في تغييرات الحشوة.","why":"فرق ثابت عبر 40 story إشارة حقيقية، لا عدم استقرار."},{"text":"قبول الفروقات الـ 43 كلها، لأن تغييرات الحشوة minor.","why":"قبول تغييرات غير مقصودة في 40 story لـ Table يطلق انحدارًا في كل جدول."},{"text":"حذف stories الخاصة بـ Table حتى يُطلَق Dialog.","why":"حذف التغطية يخفي الأثر الجانبي بدل إصلاحه."}],"answer":0}],"s-ds-5":[{"q":"

يقترح فريق المساهمة بمكوّن FreightRateCalculator في النظام. ولا يوجد فريق آخر يحسب الأسعار. ما نتيجة الفرز الصحيحة؟

","options":[{"text":"قبوله، لأن المساهمات قدرة مجانية.","why":"مكوّن النظام يحمل تكاليف صيانة إلى الأبد، حتى حين يكتبه شخص آخر."},{"text":"رفضه وطلب حذفه من الفريق.","why":"المكوّن يحلّ مشكلة حقيقية؛ لكنها ليست مشكلة مشتركة."},{"text":"الطلب من فريق النواة أن يعيد بناءه بشكل صحيح أولًا.","why":"يجب أن تذهب قدرة النواة إلى الاحتياجات المشتركة، لا إلى ميزة لفريق واحد."},{"text":"إبقاؤه محليًا، مبنيًا من قطع النظام، وإدراجه في القائمة حتى تطلق حاجة فريق ثانٍ RFC.","why":"صحيح. البقاء محليًا نتيجة مشروعة، والقائمة تُبقي الخيار مفتوحًا."}],"answer":3},{"q":"

يريد فريق علامة Tidewater أن تستخدم Tabs الخاصة به تفاعلًا مختلفًا مع لوحة المفاتيح عن Northwind. ماذا يجب أن يحدث؟

","options":[{"text":"قبوله عبر brand token يبدّل التعامل مع المفاتيح.","why":"الـ tokens تحمل قيمًا بصرية؛ والسلوك المخبّأ في الـ tokens غير قابل للاختبار ومفاجئ."},{"text":"معاملته كاقتراح منتج للعلامتين معًا، يُحسم في مراجعة الـ API وفق نمط التبويبات في WAI-ARIA.","why":"صحيح. العلامات تغيّر الشخصية لا السلوك؛ وإن كان التفاعل أفضل، فستحصل عليه العلامتان."},{"text":"نسخ Tabs منفصل لـ Tidewater.","why":"النسخ المنفصلة تتباعد في الإصلاحات وإمكانية الوصول، وهذا يهزم فكرة النظام المشترك."},{"text":"إضافة prop باسم brand إلى Tabs.","why":"المكوّنات الواعية بالعلامة يجب أن تتغيّر مع كل علامة جديدة، وهذا لا يصمد."}],"answer":1},{"q":"

يُبلغ مسح الـ DOM عن تبنٍّ لـ Button بنسبة 88%، لكن المستخدمين ما زالوا يبلّغون عن ثلاثة أشكال مختلفة للأزرار في صفحات الفوترة. ماذا تفحص أولًا؟

","options":[{"text":"هل يعدّ المسح شيئًا يمكن للفرق نسخه، مثل الـ class المسمّى nw-button، بدل العلامة الخاصة بالمكوّن.","why":"صحيح. المكوّنات المنسوخة بأسماء classes منسوخة تبدو تبنّيًا في نظر مسح ساذج."},{"text":"هل يستخدم المستخدمون متصفّحات قديمة.","why":"المتصفّحات القديمة لا تخلق ثلاثة تصاميم مختلفة للأزرار."},{"text":"هل كانت عيّنة الاستبيان صغيرة جدًا.","why":"المشكلة في قياس التبنّي، لا في استبيان الرضا."},{"text":"هل نسبة 88% أعلى من هدف الشركة.","why":"بلوغ الهدف لا يفسّر لماذا الواجهة غير متّسقة."}],"answer":0},{"q":"

يختلف مهندسان كبيران حول هل يجب أن يدعم Table التعديل المباشر داخل الخلايا. أيّ خطوة في الـ governance تجعل القرار دائمًا؟

","options":[{"text":"ترك المهندس الأكثر خبرة يقرّر على انفراد.","why":"القرارات الخاصة القائمة على الأقدمية يُعاد الجدال فيها بمجرّد انضمام شخص جديد."},{"text":"إطلاق التعديل المباشر خلف علم تجريبي ورؤية ما يحدث.","why":"الإطلاق هربًا من القرار ينقل القرار إلى كل فريق منتج."},{"text":"مناقشته في مراجعة الـ API العلنية بالاستناد إلى المبادئ وأدلّة الاستخدام، ثم تسجيل القرار وأسبابه في السجلّ.","why":"صحيح. القرار المكتوب مع أسبابه يمكن مراجعته بأدلّة جديدة بدل خوض المعركة نفسها من جديد."},{"text":"تأجيله حتى دورة التخطيط السنوية التالية.","why":"عام من «ربما» أسوأ للفرق من إجابة واضحة في أي اتجاه."}],"answer":2},{"q":"

نسبة تبنّي فريق Reporting هي 25%، أقل بكثير من الفرق الأخرى. وتريد الإدارة عرض نتائج الفرق في الاجتماع العام الشهري. ما الاستخدام الأفضل للرقم؟

","options":[{"text":"نشر الترتيب حتى تشعر الفرق المتأخّرة بضغط للتحسّن.","why":"الترتيب العلني يدعو إلى التلاعب، مثل إعادة تسمية المكوّنات المحلية، بدل ملاءمة أفضل."},{"text":"تحديد هدف 90% لـ Reporting في الربع القادم.","why":"هدف بلا فهم لسبب انخفاض التبنّي يدفع المكوّنات إلى أماكن لا تناسبها."},{"text":"تجاهله، لأن مقاييس التبنّي غير موثوقة.","why":"الرقم إشارة مفيدة؛ والسؤال هو كيف تستخدمه."},{"text":"معاملته كسؤال بحثي، أي سؤال Reporting عمّا ينقص النظام، ورفع اتّجاهات المؤسسة كلها إلى الإدارة.","why":"صحيح. في Northwind كانت الإجابة الرسوم البيانية والجداول الكثيفة، وصارت خارطة الطريق التالية."}],"answer":3}]},"final":[{"q":"

تريد Northwind أن تكون الواجهة الرئيسية في موقع Tidewater التسويقي داكنة بينما تبقى بقية الصفحة فاتحة. أيّ إعداد يحقّق ذلك دون أي تغيير في المكوّنات؟

","options":[{"text":"وضع data-theme="dark" على قسم الواجهة الرئيسية، مع الـ tokens الداكنة تحت selector مجرّد [data-theme="dark"]، والـ component tokens معرّفة على الـ selectors الخاصة بالمكوّنات.","why":"صحيح. السمة تبدأ شجرة فرعية داكنة، والـ component tokens تُحسب وفقها على كل عنصر."},{"text":"إضافة class باسم .dark إلى كل مكوّن داخل الواجهة الرئيسية.","why":"الـ classes الخاصة بكل مكوّن تعني أن كل مكوّن يجب أن يعرف عن الـ themes."},{"text":"تحميل ملف أنماط ثانٍ لقسم الواجهة الرئيسية.","why":"ملفات الأنماط تنطبق على المستند كله؛ ولا يمكن حصرها في قسم واحد دون selectors."},{"text":"استخدام filter: invert(1) على الواجهة الرئيسية.","why":"القلب يشوّه ألوان العلامة والصور، وينتج تباينًا غير مختبَر."}],"answer":0},{"q":"

أيّ محتوى ملف سترفضه أداة تلتزم بـ DTCG 2025.10؟

","options":[{"text":"مجموعة فيها "$type": "color" تحتوي tokens بلا $type خاص بها.","why":"الـ tokens ترث $type من مجموعتها، فهذا صالح."},{"text":"token قيمة $value فيه هي "{color.blue.600}" حيث color.blue.600 token.","why":"هذا اسم مستعار صالح يشير إلى token."},{"text":"token لون فيه colorSpace وcomponents وhex اختياري.","why":"هذه هي صيغة اللون في 2025.10."},{"text":"token اسمه space.inset داخل مجموعة space.","why":"صحيح. النقاط محجوزة لمسارات المراجع، فلا يمكن أن تحتويها الأسماء."}],"answer":3},{"q":"

الـ API الخاص بـ Button هو variant وsize وloading وstartIcon وendIcon، إضافة إلى كل سمات الزر الأصلية. يحتاج فريق Button يفتح قائمة. ماذا يجب أن يفعل النظام؟

","options":[{"text":"إضافة prop باسم menuItems إلى Button.","why":"محتوى القائمة كـ prop على Button يبدأ انفجار الـ props ويخلط مهمّتَي مكوّنين."},{"text":"تقديم MenuButton مركّب مبني من Button وMenu، يتبع نمط زر القائمة في WAI-ARIA.","why":"صحيح. الـ composition تُبقي Button بسيطًا وتعطي القائمة سلوكها الخاص القابل للوصول."},{"text":"إخبار الفريق أن يبنيه من الصفر بـ <div>.","why":"يجب أن يغطّي النظام نمطًا شائعًا كهذا، والـ <div> يُسقط السلوك الأصلي."},{"text":"إضافة قيمة منطقية باسم isMenu إلى Button.","why":"القيمة المنطقية لا تستطيع التعبير عن محتوى القائمة ولا سلوك لوحة المفاتيح، وتُكبّر الـ API."}],"answer":1},{"q":"

في خط إنتاج الـ tokens لدى Northwind، لماذا يُبنى الـ theme الداكن بوضع الـ primitives في include والملف الدلالي الداكن وحده في source، مع التصفية على isSource؟

","options":[{"text":"لأن ملفات include تُصغَّر (minified).","why":"لا يصغّر Style Dictionary ملفات include؛ الفرق هو هل تُعدّ الـ tokens مصدرية أم لا."},{"text":"لأن Figma لا يصدّر إلا الـ modes الداكنة.","why":"يصدّر Figma أي mode؛ والأمر هنا يتعلّق بالـ CSS المولَّد."},{"text":"حتى تُحلّ المراجع وفق الـ primitives، بينما لا تُكتب تحت الـ selector الداكن إلا الـ semantic tokens المعاد ربطها.","why":"صحيح. وإلا لكرّر الملف الداكن كل primitive بلا سبب."},{"text":"لأن الوضع الداكن لا يستخدم الـ primitives.","why":"الـ semantic tokens الداكنة تشير إلى الـ primitives؛ لكنها لا تحتاج إلى إعادة إخراجها."}],"answer":2},{"q":"

أيّ موقف يتطلّب aria-disabled="true" بدل السمة disabled؟

","options":[{"text":"زر Submit أثناء إرسال النموذج، دون حاجة إلى شرح.","why":"السمة disabled (أو حالة تحميل) مناسبة حين لا يحتاج أحد إلى الوصول إلى العنصر."},{"text":"زر زخرفي لا يفعل شيئًا أبدًا.","why":"العنصر الذي لا يعمل أبدًا يجب ألا يكون زرًا أصلًا."},{"text":"زر مخفيّ على الجوّال.","why":"العناصر المخفية لا تحتاج أيًّا من السمتين؛ فلا يمكن الوصول إليها."},{"text":"زر Save يجب أن يبقى قابلًا للتركيز حتى يصل مستخدمو لوحة المفاتيح إلى شرح سبب عدم توفّره.","why":"صحيح. تُبقيه aria-disabled في ترتيب التنقّل بـ Tab؛ والمكوّن يمنع الإجراء بنفسه."}],"answer":3},{"q":"

اقتُرحت الدالة light-dark() في CSS بديلًا عن كتل الـ themes في Northwind. ما التقييم الدقيق؟

","options":[{"text":"تتعامل جيدًا مع قيم الألوان ذات الوضعين، لكنها لا تستطيع التعبير عن العلامات أو الكثافة أو أكثر من وضعين، فما زالت إعادة ربط الـ tokens لازمة.","why":"صحيح. مفيدة للألوان الفاتحة والداكنة البسيطة، لا لنظام theming متعدّد المحاور."},{"text":"تحلّ محلّ الـ custom properties بالكامل.","why":"إنها تختار فقط بين لونين (أو صورتين) بحسب نظام الألوان؛ ولا تحلّ محلّ المتغيّرات للمسافات وأنصاف الأقطار والعلامات."},{"text":"لا تعمل إلا في Figma.","why":"إنها دالة CSS تدعمها المتصفّحات الحديثة."},{"text":"تحتاج JavaScript لتبديل الأوضاع.","why":"تستجيب لقيمة color-scheme السارية؛ ولا تحتاج أي سكربت."}],"answer":0},{"q":"

بعد أن يحذف 5.0.0 الـ prop المُهمَل kind، لا يستطيع فريق الفوترة الترقية لمدة شهرين. ماذا تمنحه سياسة الـ deprecation في Northwind؟

","options":[{"text":"لا شيء؛ يجب أن يرقّي فورًا.","why":"فرض الترقية الفورية هو ما أدّى إلى النسخ المنفصلة في أول major لدى Northwind."},{"text":"نسخة خاصة منفصلة من 5.0.0 يُعاد إليها kind.","why":"النسخ الخاصة المنفصلة هي بالضبط ما صُمّمت سياسة الدعم لمنعه."},{"text":"إصلاحات الأخطاء والأمان على 4.x لستة أشهر، حتى يرقّي وفق جدوله الخاص.","why":"صحيح. فترة دعم معلنة للإصدار الـ major السابق تحمي الفرق أثناء انتقالها."},{"text":"إصدار 5.0.1 جديد يعيد kind.","why":"إعادة API محذوف في patch ستجعل أرقام الإصدارات بلا معنى."}],"answer":2},{"q":"

وُلّدت الصور المرجعية البصرية على حاسوب Mac لمصمّم، والـ CI يعمل على Linux. كل story كثيفة النص تفشل ببضعة بكسلات. ما الإصلاح الصحيح؟

","options":[{"text":"رفع حدّ الفرق حتى تنجح الاختبارات.","why":"حدّ متساهل بما يكفي لإخفاء اختلافات رسم الخطوط يخفي أيضًا الانحدارات الحقيقية."},{"text":"توليد الصور المرجعية ومقارنتها في بيئة الـ CI نفسها.","why":"صحيح. اللقطات القابلة للمقارنة تحتاج المتصفّح ونظام التشغيل والخطوط نفسها."},{"text":"تعطيل الاختبارات البصرية للـ stories كثيفة النص.","why":"هذه الـ stories هي حيث تظهر انحدارات الطباعة، مثل انحدار ارتفاع السطر."},{"text":"تشغيل الاختبارات البصرية على أجهزة المصمّمين وحدها.","why":"حينها لا يستطيع الـ CI إيقاف انحدار، وتظلّ الأجهزة تختلف فيما بينها."}],"answer":1},{"q":"

Combobox جديد قدّمه مساهم لا يملك stories إلا لحالتيه الافتراضية والـ hover. ماذا يجب أن تطلب المراجعة؟

","options":[{"text":"لا شيء إضافي؛ اثنتان من الـ stories تكفيان لتوثيقه.","why":"الحالات الناقصة هي حيث تفشل المكوّنات، وتحتاج تغطية بصرية وتغطية لإمكانية الوصول."},{"text":"وصفًا أطول في التوثيق.","why":"التوثيق مطلوب أيضًا، لكن الفجوة هنا حالات غير مختبَرة."},{"text":"لقطة شاشة لكل حالة في وصف الـ pull request.","why":"اللقطات في الوصف لا يُعاد فحصها مع التغييرات المستقبلية؛ أما الـ stories فنعم."},{"text":"stories لكل خانة في مصفوفة حالاته، بما فيها التركيز والفتح والتعطيل والقيمة غير الصالحة.","why":"صحيح. كل حالة تصبح توثيقًا وفحصًا لإمكانية الوصول واختبارًا بصريًا."}],"answer":3},{"q":"

أيّ وصف لإصدار DTCG 2025.10 دقيق؟

","options":[{"text":"أول إصدار مستقر لتقرير من W3C Community Group، تطبّقه أدوات مثل Style Dictionary واستيراد المتغيّرات وتصديرها في Figma.","why":"صحيح. إنه مستقر ومطبّق على نطاق واسع، لكنه ليس توصية رسمية من W3C."},{"text":"توصية رسمية من W3C تطبّقها المتصفّحات مباشرة.","why":"تقارير المجموعات المجتمعية ليست توصيات رسمية، والمتصفّحات لا تقرأ ملفات الـ tokens."},{"text":"مسودّة مبكرة بلا أي دعم من الأدوات بعد.","why":"2025.10 هو الإصدار المستقر، وتدعمه عدّة أدوات."},{"text":"صيغة مملوكة لـ Figma.","why":"الصيغة محايدة تجاه الشركات وتطوّرها مجموعة مجتمعية."}],"answer":0},{"q":"

يعرض تطبيق الـ dispatch قسمين لـ Northwind وTidewater جنبًا إلى جنب، وما زالت أقسام Tidewater تستخدم Inter للعناوين رغم أن [data-brand="tidewater"] يحدّد --nw-brand-font-heading. ما الإصلاح؟

","options":[{"text":"إضافة !important إلى token الخط في Tidewater.","why":"لا يفيد !important هنا؛ فالـ semantic token حُسب مسبقًا عند الجذر."},{"text":"تحميل ملف خط Georgia.","why":"Georgia خط نظام هنا؛ المشكلة في القيمة التي يستقبلها العنوان."},{"text":"إعادة تعريف الروابط الدلالية، بما فيها --nw-font-heading، تحت [data-brand] إضافة إلى :root.","why":"صحيح. حينها يحسب كل قسم علامة الـ semantic tokens الخاصة به من طبقة علامته."},{"text":"إعطاء عناوين Tidewater class خاصًا بها.","why":"classes العلامة على المكوّنات تتجاوز معمارية الـ tokens."}],"answer":2},{"q":"

أيّ مجموعة من الإشارات تعطي أوثق صورة عن صحّة نظام التصميم؟

","options":[{"text":"عدد المكوّنات في المكتبة.","why":"المكتبة الكبيرة قد تكون غير مستخدمة أو غير متّسقة؛ الحجم ليس صحّة."},{"text":"عدد النجوم على مستودع موقع التوثيق.","why":"الشعبية خارج الشركة لا تقول الكثير عن التبنّي الداخلي."},{"text":"إجمالي الـ pull requests المدموجة شهريًا.","why":"النشاط قد يكون عاليًا بينما تنسخ الفرق النظام بصمت؛ إنه يقيس فريق النواة لا المستخدمين."},{"text":"تبنّي المكوّنات، وتغطية الـ tokens، وتأخّر الإصدارات، ورضا الفرق، متابَعة معًا كاتّجاهات.","why":"صحيح. عدّة إشارات معًا تقاوم التلاعب وتُظهر أين يخذل النظام مستخدميه."}],"answer":3}],"glossary":[{"id":"design-system","term":"نظام التصميم (Design system)","definition":"المجموعة المشتركة من الـ tokens والمكوّنات والأنماط والتوثيق، ومعها الناس والعمليات التي تُبقيها محدَّثة، حتى تبني فرق كثيرة واجهات متّسقة دون إعادة التفكير في كل قرار من الصفر.","lesson":"l-ds-1-1"},{"id":"interface-inventory","term":"جرد الواجهة (Interface inventory)","definition":"تدقيق يجمع كل نسخة من كل عنصر في واجهات المنتجات مجمّعة حسب النوع، ليصبح التكرار مرئيًا، ولتحديد ما يجب أن يملكه نظام التصميم أولًا.","lesson":"l-ds-1-2"},{"id":"design-principle","term":"مبدأ التصميم (Design principle)","definition":"عبارة قصيرة تنحاز إلى طرف في مفاضلة حقيقية، مثل «إمكانية الوصول قبل الجمال»، حتى تستطيع حسم خلافات التصميم دون اجتماع طويل.","lesson":"l-ds-1-3"},{"id":"hybrid-team-model","term":"نموذج الفريق الهجين (Hybrid team model)","definition":"طريقة لإدارة نظام التصميم تملك فيها نواة صغيرة متفرّغة الـ tokens والمراجعات والإصدارات، بينما تساهم فرق المنتجات بمكوّنات وإصلاحات عبر عملية محدّدة.","lesson":"l-ds-1-3"},{"id":"design-token","term":"Design token","definition":"قرار تصميم له اسم، مثل لون أو قيمة مسافة أو حجم خط، يُخزَّن مرة واحدة وتشير إليه أدوات التصميم والكود باسمه بدل تكرار القيم الخام.","lesson":"l-ds-2-1"},{"id":"primitive-token","term":"Primitive token","definition":"token يسمّي قيمة خامًا بحسب ما هي، مثل --nw-blue-600، دون أن يقول أين تُستخدم. والـ primitives تشكّل لوحة ألوان النظام وسلالمه.","lesson":"l-ds-2-1"},{"id":"semantic-token","term":"Semantic token","definition":"token يسمّي نيّة، مثل --nw-color-action-bg، ويشير إلى primitive. والـ themes والعلامات تغيّر الـ primitive الذي يشير إليه كل semantic token.","lesson":"l-ds-2-1"},{"id":"component-token","term":"Component token","definition":"token خاص بمكوّن واحد، مثل --nw-button-bg، يشير إلى semantic token ويسمح بتعديل ذلك المكوّن دون التأثير في المكوّنات الأخرى.","lesson":"l-ds-2-1"},{"id":"naming-grammar","term":"قواعد تسمية الـ tokens (Token naming grammar)","definition":"ترتيب ثابت لأجزاء الاسم، مثل الفئة والمفهوم والخاصية والـ variant والحالة، يجعل أسماء الـ tokens سهلة التخمين والترتيب، وقابلة للفحص بقاعدة lint.","lesson":"l-ds-2-2"},{"id":"theme","term":"Theme","definition":"إعادة ربط للـ semantic tokens بـ primitives مختلفة، مثل الـ theme الداكن، تُطبَّق بـ selector مثل [data-theme="dark"] بينما تبقى المكوّنات بلا تغيير.","lesson":"l-ds-2-3"},{"id":"mode-axis","term":"محور الـ mode (Mode axis)","definition":"بُعد مستقل من أبعاد الـ theming، مثل نظام الألوان أو العلامة أو الكثافة، يملك مجموعة tokens خاصة به، فتتركّب التركيبات دون ملف منفصل لكل منها.","lesson":"l-ds-2-3"},{"id":"dtcg-format","term":"صيغة DTCG (DTCG format)","definition":"صيغة JSON للـ design tokens حدّدتها مجموعة Design Tokens Community Group التابعة لـ W3C، وأول إصدار مستقر منها، 2025.10، يغطّي الـ tokens والأنواع والمجموعات والأسماء المستعارة والألوان.","lesson":"l-ds-2-4"},{"id":"alias","term":"الاسم المستعار (Alias)","definition":"token تشير قيمته إلى token آخر بمساره بين أقواس معقوفة، مثل {color.blue.600}. ويجب أن يشير إلى token، لا إلى مجموعة أبدًا.","lesson":"l-ds-2-4"},{"id":"token-pipeline","term":"خط إنتاج الـ tokens (Token pipeline)","definition":"خطوة بناء تحلّل ملفات الـ tokens، وتحلّ الأسماء المستعارة، وتحوّل الأسماء والقيم لكل منصّة، وتكتب صيغًا مثل CSS custom properties وSwift وKotlin.","lesson":"l-ds-2-5"},{"id":"output-references","term":"Output references","definition":"إعداد في خط الإنتاج يُبقي الأسماء المستعارة مراجع var() في الـ CSS المولَّد بدل القيم المحلولة، فتصل طبقات الـ tokens والتخصيصات وقت التشغيل إلى المتصفّح سليمة.","lesson":"l-ds-2-5"},{"id":"variant","term":"Variant","definition":"واحد من مجموعة ثابتة من الأنماط المتنافية لمكوّن ما، مثل primary أو secondary أو danger، ويُعبَّر عنه أفضل بـ prop واحد من نوع enum بدل قيم منطقية منفصلة.","lesson":"l-ds-3-1"},{"id":"slot","term":"Slot","definition":"مكان في المكوّن يمرّر فيه المستخدم محتوى، مثل children أو عنصر startIcon، بدل ضبط ذلك المحتوى عبر مزيد من الـ props.","lesson":"l-ds-3-1"},{"id":"compound-component","term":"المكوّن المركّب (Compound component)","definition":"مكوّن مؤلّف من قطع متعاونة، مثل Tabs.List وTabs.Trigger، يرتّبها المستخدم بحرية بينما تتشارك القطع الحالة عبر الـ context.","lesson":"l-ds-3-2"},{"id":"state-matrix","term":"مصفوفة الحالات (State matrix)","definition":"شبكة تقابل كل variant بكل حالة تفاعل، مثل الـ hover والتركيز المرئي والتعطيل والتحميل والضغط، وتُستخدم لتصميم المكوّن وبنائه واختباره بالكامل.","lesson":"l-ds-3-3"},{"id":"focus-visible","term":":focus-visible","definition":"pseudo-class في CSS يتطابق حين يقرّر المتصفّح أن التركيز يجب أن يكون مرئيًا، وعادةً بعد التنقّل بلوحة المفاتيح، ويُستخدم لإظهار حلقات التركيز دون إظهارها مع معظم نقرات الفأرة.","lesson":"l-ds-3-3"},{"id":"figma-variable-mode","term":"الـ mode في Figma variables (Figma variable mode)","definition":"واحدة من عدّة مجموعات قيم لمتغيّرات collection في Figma، مثل Light وDark، تُطبَّق على الإطارات كما تُطبَّق selectors الـ theme على أقسام الصفحة.","lesson":"l-ds-4-1"},{"id":"semver","term":"الترقيم الدلالي للإصدارات (Semantic versioning)","definition":"نظام ترقيم بالشكل MAJOR.MINOR.PATCH، تُصلح فيه الـ patches الأخطاء، وتضيف الـ minors ميزات متوافقة مع ما سبق، وتحتوي الـ majors تغييرات قد تكسر الاستخدام الحالي.","lesson":"l-ds-4-2"},{"id":"changeset","term":"Changeset","definition":"ملف صغير يُضاف إلى الـ pull request يذكر رفع الإصدار الذي يحتاجه التغيير وملخّصًا موجّهًا للمستخدمين، ويُجمَع لاحقًا في رقم الإصدار والـ changelog.","lesson":"l-ds-4-2"},{"id":"deprecation","term":"Deprecation","definition":"تعليم API أو token أو مكوّن بأنه مُقرَّر حذفه بينما ما زال يعمل، مع ذكر بديله وإصدار حذفه، حتى تنتقل الفرق قبل أن يختفي.","lesson":"l-ds-4-3"},{"id":"codemod","term":"Codemod","definition":"سكربت يعيد كتابة الكود المصدري آليًا، مثل إعادة تسمية prop مُهمَل عبر مستودع كامل، فتصبح عمليات الانتقال مراجعات بدل عمل يدوي.","lesson":"l-ds-4-3"},{"id":"visual-regression-test","term":"اختبار الانحدار البصري (Visual regression test)","definition":"اختبار يلتقط صورة لحالة مكوّن ويقارنها بصورة مرجعية معتمدة، ويفشل عند وجود فروق يقبلها إنسان بعد ذلك كتغيير مقصود أو يرفضها كخلل.","lesson":"l-ds-4-4"},{"id":"rfc","term":"RFC (طلب تعليقات)","definition":"اقتراح مكتوب لتغيير كبير، مثل مكوّن جديد، يعرض المشكلة والأدلّة ومسوّدة الـ API وخطة إمكانية الوصول، لمراجعة علنية قبل البناء.","lesson":"l-ds-5-1"},{"id":"brand-tier","term":"طبقة العلامة (Brand tier)","definition":"طبقة صغيرة من الـ tokens بين الـ primitives والـ semantic tokens، مثل تدرّج الألوان والخطوط وأنصاف الأقطار، تربطها كل علامة تجارية بقيمها الخاصة.","lesson":"l-ds-5-2"},{"id":"adoption-rate","term":"معدّل التبنّي (Adoption rate)","definition":"نسبة عناصر الواجهة في منتج ما التي تعرضها مكوّنات نظام التصميم الحقيقية، وتُقاس بإشارات لا تنتجها إلا تلك المكوّنات، وتُتابَع كاتّجاه عبر الزمن.","lesson":"l-ds-5-3"}]}