أسرع طريقة لصنع الوضع الداكن أن تكرّر كل شاشة وتعيد تلوينها يدويًا. وهي أيضًا أسرع طريقة للحصول على مجموعتين من الشاشات تختلفان خلال شهر: يضيف أحدهم صف عادة إلى شاشة Today الفاتحة وينسى الداكنة. في Steady سيكون الوضع الداكن مفتاحًا واحدًا على الـ frame، لأن الألوان تشير إلى معانٍ أصلًا.
\nافتح الـ variables المحلية (تصل إليها من الشريط الجانبي الأيمن دون تحديد أي شيء، وقت كتابة هذا الدرس) وانظر إلى الـ collection المسمّاة Semantic. فيها عمود واحد من القيم، اسمه Mode 1 افتراضيًا. أعِد تسميته إلى Light، ثم أضف mode وسمّه Dark. صار لكل variable قيمتان: واحدة لكل عمود. ينسخ Figma القيم الموجودة إلى العمود الجديد، وهذه نقطة بداية لا إجابة.
املأ عمود Dark بجعل كل variable alias لـ primitives مختلفة. هذا جدول الربط في Steady، مع قياس التباين مقابل السطح الذي يقع عليه كل لون:
\n| الـ variable الدلالي | \nLight | \nDark | \n
|---|---|---|
color/surface/default | \nwhite | \ngray/950 (#111827) | \n
color/surface/raised | \nwhite | \ngray/800 (#1F2937) | \n
color/text/primary | \ngray/900، 17.40:1 | \ngray/50، 16.98:1 | \n
color/text/secondary | \ngray/500، 4.83:1 | \ngray/400، 6.99:1 | \n
color/action/primary | \nteal/700، 5.47:1 | \nteal/400، 9.53:1 | \n
color/on-action | \nwhite | \ngray/950 | \n
أبقِ الـ collection المسمّاة Primitives بـ mode واحد. الـ primitive حقيقة (teal/700 هو #0F766E)؛ أما الـ variable الدلالي فقرار يعتمد على السياق. والـ modes تخصّ القرارات.
كرّر frame شاشة Today وحدّد النسخة. في الشريط الجانبي الأيمن، استخدم عنصر التحكم في mode الـ variables (في قسم Appearance وقت كتابة هذا الدرس)، واختر الـ collection المسمّاة Semantic ثم Dark. تتبدّل كل تعبئة وحدّ ولون نص مرتبط في الشاشة دفعة واحدة.
ينجح ذلك بفضل الوراثة. كل طبقة تبدأ على Auto، أي «استخدم الـ mode الخاص بأبي». يصعد Figma في شجرة الطبقات حتى يجد أبًا ضُبط له mode، وإن لم يجد، يستخدم الـ mode الافتراضي للـ collection (العمود الأول). ويمكنك أيضًا ضبط mode على صفحة كاملة دون تحديد أي شيء.
\nالآن لم تعد النسخة شيئًا تصونه؛ إنها الـ components نفسها معروضة عبر mode مختلف. أضف صف عادة إلى الشاشة الفاتحة وانسخه إلى الداكنة، وسيكون داكنًا من فوره.
\n\nالوضع الداكن تصميم قائم بذاته. وبضع قواعد تكفي لمعظم العمل:
\ncolor/on-action كـ token مستقل: في Dark يشير إلى gray/950، فيعطي 9.53:1.surface/raised).الـ modes ليست للثيمات فقط. collection باسم Density فيها الـ modes Comfortable وCompact يمكن أن تحمل number variables للـ padding في الصف (12 مقابل 8) وللـ gap بين الصفوف. وcollection باسم Content فيها string variables يمكن أن تحمل التسميات نفسها بالإنجليزية والعربية، وهذه طريقة سريعة لترى هل ما زال “Save habit” يتّسع حين يصبح أطول. بل يمكنك تبديل الـ modes داخل prototype، مثلًا لعرض مفتاح الثيم الداكن في الإعدادات.
صارت لديك الآن مجموعة بثيمات ومبنية على tokens. الدرس الأخير من هذا القسم ينظّمها في شيء يستطيع مصمّم آخر، أو مطوّر، أن يتسلّمه ويستخدمه دون أن يسألك.
\n","toc":[{"id":"sec-1","text":"الـ Modes أعمدة من القيم","level":2},{"id":"sec-2","text":"تبديل شاشة","level":2},{"id":"sec-3","text":"صمّم الوضع الداكن ولا تقلبه","level":2},{"id":"sec-4","text":"الـ Modes أبعد من الألوان","level":2}],"takeaways":["الـ mode عمود واحد من القيم في collection من الـ variables؛ وتبديل الـ mode في frame يستبدل كل قيمة مرتبطة دفعة واحدة.","ضع الـ modes على الـ collection الدلالية وأبقِ الـ primitives بـ mode واحد، فلا يغيّر الوضع الداكن إلا ما يشير إليه كل معنى.","تستخدم الطبقات الـ mode Auto افتراضيًا، فترث من أقرب أب ضُبط له mode، وإلا تعود إلى الـ mode الافتراضي للـ collection.","الوضع الداكن ليس قلبًا للألوان؛ الألوان المميّزة تصبح عادةً أفتح، والنص فوقها قد ينقلب إلى داكن، والأسطح تصبح أفتح كلما ارتفعت.","كل لون نص وعنصر تحكم يحتاج فحص تباين جديدًا في كل mode، لأن زوجًا ينجح في الفاتح قد يفشل في الداكن."],"further":[{"title":"Modes for variables","url":"https://help.figma.com/hc/en-us/articles/15343816063383-Modes-for-variables"},{"title":"Variable modes in prototypes","url":"https://help.figma.com/hc/en-us/articles/15253268379799-Variable-modes-in-prototypes"},{"title":"Dark Mode (Apple Human Interface Guidelines)","url":"https://developer.apple.com/design/human-interface-guidelines/dark-mode"}],"quiz":[{"q":"تضبط frame شاشة Today على Dark. صف عادة واحد داخله مضبوط صراحةً على Light. ماذا ترى؟
","options":[{"text":"الشاشة كلها داكنة، وذلك الصف وحده يُعرض بقيم Light.","why":"صحيح. الطبقات ترث من أقرب أب ضُبط له mode. والـ mode الصريح على الصف يتغلّب على mode الـ frame لذلك الصف وأبنائه."},{"text":"الشاشة كلها بما فيها الصف داكنة، لأن mode الـ frame يفوز دائمًا.","why":"الـ mode الصريح الأقرب هو الذي يفوز، لا الأبعد."},{"text":"يعرض Figma خطأً لأن الـ modes متعارضة.","why":"خلط الـ modes مسموح ومفيد، مثل بطاقة فاتحة داخل منطقة ترويجية داكنة."},{"text":"يصبح الصف فاتحًا، ومعه بقية الشاشة.","why":"الـ mode في الابن لا يغيّر الـ mode في أبيه أبدًا."}],"answer":0},{"q":"في الوضع الداكن، يشير color/action/primary إلى teal/400 (#2DD4BF)، وتسمية الزر تستخدم color/on-action الذي ما زال أبيض. تباين التسمية 1.86:1. ما الإصلاح الصحيح؟
لماذا تبقى الـ primitives (teal/700، gray/500…) في collection بـ mode واحد؟
","options":[{"text":"لأن Figma لا يسمح بالـ modes في collections فيها أكثر من 20 variable.","why":"لا يوجد حدّ كهذا. الاختيار معماري."},{"text":"لأن الـ primitives حقائق خام عن لوحة الألوان، والمعاني تتغيّر حسب الـ mode بأن تكون aliases لـ primitives مختلفة.","why":"صحيح. لو تغيّر teal/700 حسب الـ mode لما بقي teal/700، ولأصبح كل alias غير متوقّع."},{"text":"لأن الـ primitives لا يمكن أن تكون هدفًا لـ alias إذا كانت لها modes.","why":"الـ variables التي لها modes يمكن مع ذلك أن تكون هدفًا لـ alias. السبب الوضوح، لا قاعدة تقنية."},{"text":"لأن Dev Mode لا يقرأ إلا الـ collections ذات الـ mode الواحد.","why":"يعرض Dev Mode الـ variables من أي collection، بما في ذلك الـ modes الخاصة بها."}],"answer":1}],"exercise":{"kind":"choice","multiple":true,"options":["lighter-accent","flip-on-action","border-dark","secondary-white","duplicate-recolor","mode-primitives"],"correct":["lighter-accent","flip-on-action","border-dark"],"title":"راجع المحاولة الأولى للوضع الداكن","prompt":"أضاف زميلك mode باسم Dark إلى الـ collection الدلالية في Steady، لكنه لم يغيّر إلا قيم الأسطح والنصوص. هذا ما تُحلّ إليه شاشة Today في Dark، مقيسًا مقابل surface/default (#111827) ما لم يُذكر غير ذلك:
| الـ Variable | \nالقيمة في Dark | \nالنتيجة | \n
|---|---|---|
text/primary | \ngray/50 | \n16.98:1 | \n
text/secondary | \ngray/400 | \n6.99:1 | \n
action/primary | \nteal/700 (دون تغيير) | \n3.24:1، أيقونات التعليم والروابط تبدو باهتة | \n
on-action | \nwhite (دون تغيير) | \n5.47:1 على teal/700 | \n
border/default | \ngray/200 (دون تغيير) | \n14.33:1، الفواصل تبهر العين | \n
اختر كل تغيير يحسّن الوضع الداكن دون أن يكسر شيئًا آخر.
\n","hints":["الروابط وأيقونات التعليم الصغيرة تشبه النص. هل 3.24:1 كافية لها؟","إذا فتّحت اللون المميّز، فافحص ما يحدث للتسمية البيضاء التي تقع فوقه.","الفواصل زخرفة؛ يجب أن تكون مرئية لكن هادئة. وخط قريب من الأبيض على خلفية قريبة من الأسود ليس هذا ولا ذاك."],"explanation":"وجّه action/primary إلى تركوازي أفتح مثل teal/400 (9.53:1 على gray/950)، لأن الروابط والأيقونات الصغيرة تحتاج تباينًا بمستوى النص. هذا يجعل التسميات البيضاء فوق اللون المميّز تفشل (1.86:1)، لذا اقلب on-action إلى رمادي داكن مثل gray/950 (9.53:1) في Dark. ووجّه border/default إلى رمادي أغمق حتى تفصل الفواصل بين الصفوف دون أن تبهر العين؛ واحتفظ بـ token منفصل لحدود عناصر التحكم يحقّق 3:1 لخانات الاختيار. أما جعل النص الثانوي أبيض فيمحو التسلسل البصري للنص، وإعادة تلوين frame مكرّر يدويًا تُفشل الغاية من الـ modes كلها، والـ primitives يجب أن تبقى حقائق بـ mode واحد تختار بينها الطبقة الدلالية.