Modes الـ Variables: الفاتح والداكن

أسرع طريقة لصنع الوضع الداكن أن تكرّر كل شاشة وتعيد تلوينها يدويًا. وهي أيضًا أسرع طريقة للحصول على مجموعتين من الشاشات تختلفان خلال شهر: يضيف أحدهم صف عادة إلى شاشة Today الفاتحة وينسى الداكنة. في Steady سيكون الوضع الداكن مفتاحًا واحدًا على الـ frame، لأن الألوان تشير إلى معانٍ أصلًا.

الـ Modes أعمدة من القيم

افتح الـ variables المحلية (تصل إليها من الشريط الجانبي الأيمن دون تحديد أي شيء، وقت كتابة هذا الدرس) وانظر إلى الـ collection المسمّاة Semantic. فيها عمود واحد من القيم، اسمه Mode 1 افتراضيًا. أعِد تسميته إلى Light، ثم أضف mode وسمّه Dark. صار لكل variable قيمتان: واحدة لكل عمود. ينسخ Figma القيم الموجودة إلى العمود الجديد، وهذه نقطة بداية لا إجابة.

املأ عمود Dark بجعل كل variable ‏alias لـ primitives مختلفة. هذا جدول الربط في Steady، مع قياس التباين مقابل السطح الذي يقع عليه كل لون:

أبقِ الـ collection المسمّاة Primitives بـ mode واحد. الـ primitive حقيقة (teal/700 هو #0F766E)؛ أما الـ variable الدلالي فقرار يعتمد على السياق. والـ modes تخصّ القرارات.

تبديل شاشة

كرّر frame شاشة Today وحدّد النسخة. في الشريط الجانبي الأيمن، استخدم عنصر التحكم في mode الـ variables (في قسم Appearance وقت كتابة هذا الدرس)، واختر الـ collection المسمّاة Semantic ثم Dark. تتبدّل كل تعبئة وحدّ ولون نص مرتبط في الشاشة دفعة واحدة.

ينجح ذلك بفضل الوراثة. كل طبقة تبدأ على Auto، أي «استخدم الـ mode الخاص بأبي». يصعد Figma في شجرة الطبقات حتى يجد أبًا ضُبط له mode، وإن لم يجد، يستخدم الـ mode الافتراضي للـ collection (العمود الأول). ويمكنك أيضًا ضبط mode على صفحة كاملة دون تحديد أي شيء.

الآن لم تعد النسخة شيئًا تصونه؛ إنها الـ components نفسها معروضة عبر mode مختلف. أضف صف عادة إلى الشاشة الفاتحة وانسخه إلى الداكنة، وسيكون داكنًا من فوره.

صمّم الوضع الداكن ولا تقلبه

الوضع الداكن تصميم قائم بذاته. وبضع قواعد تكفي لمعظم العمل:

• الألوان المميّزة تصبح أفتح. ‏teal/700 يعطي 5.47:1 على الأبيض لكن 3.24:1 فقط على gray/950. يجب أن يكون اللون المميّز في الوضع الداكن درجة أفتح.
• النص فوق الألوان المميّزة قد ينقلب. الأبيض على teal/400 يعطي 1.86:1، وهذا فشل واضح. لهذا السبب يوجد color/on-action كـ token مستقل: في Dark يشير إلى gray/950، فيعطي 9.53:1.
• الارتفاع يعني لونًا أفتح، لا أغمق. الظلال بالكاد تظهر على الخلفيات الداكنة، لذا تستخدم الأسطح المرتفعة مثل لوحة New habit رماديًا أفتح قليلًا (surface/raised).
• تجنّب التطرّف الحادّ. النص القريب من الأبيض على خلفية قريبة من الأسود أريح في الجلسات الطويلة من الأبيض الصافي على الأسود الصافي، الذي قد يبهر العين.

الـ Modes أبعد من الألوان

الـ modes ليست للثيمات فقط. collection باسم Density فيها الـ modes ‏Comfortable وCompact يمكن أن تحمل number variables للـ padding في الصف (12 مقابل 8) وللـ gap بين الصفوف. وcollection باسم Content فيها string variables يمكن أن تحمل التسميات نفسها بالإنجليزية والعربية، وهذه طريقة سريعة لترى هل ما زال “Save habit” يتّسع حين يصبح أطول. بل يمكنك تبديل الـ modes داخل prototype، مثلًا لعرض مفتاح الثيم الداكن في الإعدادات.

صارت لديك الآن مجموعة بثيمات ومبنية على tokens. الدرس الأخير من هذا القسم ينظّمها في شيء يستطيع مصمّم آخر، أو مطوّر، أن يتسلّمه ويستخدمه دون أن يسألك.