الـ Styles مقابل الـ Variables

ابحث في ملف Steady عن رمز اللون #0F766E وستجده على أزرار التعليم، والزر الأساسي، وحلقة التركيز، ورابط، وحلقة تقدّم، مكتوبًا يدويًا في كل مرة. حين يطلب فريق العلامة التجارية تركوازيًا أميل إلى الأزرق قليلًا، تواجه البحث نفسه الذي واجهته في الدرس 3.1، لكن هذه المرة للون. والأسوأ أنه حين يأتي الوضع الداكن، ستحتاج بعض هذه الأماكن تركوازيًا أفتح وبعضها لا، ورمز hex لا يستطيع أن يخبرك أيّها.

الـ styles والـ variables كلاهما يضع القيم في مكان واحد. لكنهما يحلّان مشكلتين مختلفتين قليلًا.

الـ Styles: وحدات مركّبة قابلة لإعادة الاستخدام

الـ style حزمة مسمّاة من الخصائص البصرية. وقت كتابة هذا الدرس، في Figma ‏color styles وtext styles وeffect styles وlayout guide styles. خطّطت للـ text styles بالفعل في الدرس 1.3: Headline هو عائلة خط وحجم ووزن وارتفاع سطر وتباعد حروف، كلها تُطبَّق بنقرة واحدة.

تبرز فائدة الـ styles حين تكون القيمة مركّبة. الـ text style عدّة خصائص دفعة واحدة. والـ effect style يمكن أن يحمل ظلّين متراكبين. والـ color style يمكن أن يحمل تدرّجًا لونيًا أو عدّة تعبئات متراكبة. غيّر الـ style فتتحدّث كل طبقة تستخدمه.

الـ Variables: قيم مفردة بقدرات إضافية

الـ variable يحمل قيمة خامًا واحدة. الأنواع الأساسية هي color وnumber وstring وboolean (وأضاف Figma أنواعًا أخرى لأعمال الحركة منذ ذلك الحين). يمكنك ربط الـ variables بالتعبئات والحدود، ونصف قطر الزوايا، والـ gap، والـ padding، والعرض والارتفاع، والشفافية، وظهور الطبقة، ومحتوى النص، وكثير من خصائص الخط.

ثلاثة أشياء تجعل الـ variables مختلفة عن الـ styles:

• الـ Aliasing: يمكن للـ variable أن يشير إلى variable آخر من النوع نفسه، بدل أن يحمل قيمة خامًا.
• الـ Modes: يمكن للـ variable أن يحمل قيمة مختلفة لكل mode، مثل الفاتح والداكن (الدرس التالي).
• الـ Tokens: الـ variables تقابل بشكل وثيق الـ design tokens التي يستخدمها المطوّرون في الكود، ووقت كتابة هذا الدرس يمكنك تسجيل اسم كل variable في الكود للويب وiOS وAndroid ليعرضه Dev Mode.

توجد الـ variables في collections، والشرطات المائلة في الأسماء تصنع مجموعات: color/text/primary يقع في المجموعة color/text.

مستويان: الـ primitives والدلالية

النمط الذي تستخدمه معظم أنظمة التصميم، والذي يستخدمه Steady، فيه مستويان.

الـ Primitives هي لوحة الألوان الخام، مسمّاة بما هي عليه: teal/700 = #0F766E، وgray/500 = #6B7280، وwhite = #FFFFFF. ليس لها رأي في مكان استخدامها.

الـ variables الدلالية (semantic) مسمّاة بما تُستخدم له، وكلٌّ منها alias لـ primitive: ‏color/action/primary ← teal/700، وcolor/text/secondary ← gray/500، وcolor/surface/default ← white. الـ components ترتبط فقط بالـ variables الدلالية.

لماذا نتعب أنفسنا بالعمود الأوسط؟ لأن المعنى والقيمة يتغيّران لأسباب مختلفة. يغيّر فريق العلامة التجارية teal/700، فيتبعه كل لون إجراء. ويغيّر الوضع الداكن ما يشير إليه color/action/primary، فتتبعه ألوان الإجراءات وحدها، لا كل تركوازي في الملف. ولا يحتاج أيّ من التغييرين لمس component واحد.

أرقام Steady تُعامَل بالطريقة نفسها: مجموعة space (من space/1 = 4 إلى space/12 = 48، من الدرس 2.3) ومجموعة radius ‏(radius/sm = 8، وradius/md = 12). اربط الـ padding في صف العادة بـ space/3 وspace/4، ونصف قطر زواياه بـ radius/md.

إبقاء المنتقي نظيفًا

إعدادان يُبقيان الناس على النظام. تحديد النطاق (scoping) يحصر الأماكن التي يُعرض فيها الـ variable: حدّد نطاق variables ‏space بالـ gap والـ padding، فتتوقّف عن الظهور في منتقي نصف قطر الزوايا. والإخفاء من النشر يُبقي الـ primitives خارج المكتبة التي تراها الملفات الأخرى، فلا يجد المصمّمون الذين يستخدمون المجموعة إلا الـ tokens الدلالية. كلا الإعدادين موجود في لوحة تعديل كل variable وقت كتابة هذا الدرس.

استخدم الاثنين

الـ variables لم تحلّ محلّ الـ styles. التقسيم المعتاد هو: الـ variables للقيم المفردة (الألوان والمسافات ونصف قطر الزوايا والـ booleans) لأنها تقبل الـ aliases وتبدّل الـ modes؛ والـ text styles للخطوط، مع ربط أحجامها بـ number variables إذا احتجت أن تتغيّر حسب الـ mode؛ والـ effect styles للظلال؛ والـ color styles للتدرّجات أو التعبئات المتراكبة فقط. اربط تعبئة color style بـ variable، فتحصل على سهولة المركّب مع الـ modes الخاصة بالـ variable.

مع إشارة كل component إلى معانٍ، يصبح الوضع الداكن مسألة ما يشير إليه كل معنى، وهذا بالضبط ما تجيب عنه الـ modes في الدرس التالي.