ابحث في ملف Steady عن رمز اللون #0F766E وستجده على أزرار التعليم، والزر الأساسي، وحلقة التركيز، ورابط، وحلقة تقدّم، مكتوبًا يدويًا في كل مرة. حين يطلب فريق العلامة التجارية تركوازيًا أميل إلى الأزرق قليلًا، تواجه البحث نفسه الذي واجهته في الدرس 3.1، لكن هذه المرة للون. والأسوأ أنه حين يأتي الوضع الداكن، ستحتاج بعض هذه الأماكن تركوازيًا أفتح وبعضها لا، ورمز hex لا يستطيع أن يخبرك أيّها.
\nالـ styles والـ variables كلاهما يضع القيم في مكان واحد. لكنهما يحلّان مشكلتين مختلفتين قليلًا.
\nالـ style حزمة مسمّاة من الخصائص البصرية. وقت كتابة هذا الدرس، في Figma color styles وtext styles وeffect styles وlayout guide styles. خطّطت للـ text styles بالفعل في الدرس 1.3: Headline هو عائلة خط وحجم ووزن وارتفاع سطر وتباعد حروف، كلها تُطبَّق بنقرة واحدة.
تبرز فائدة الـ styles حين تكون القيمة مركّبة. الـ text style عدّة خصائص دفعة واحدة. والـ effect style يمكن أن يحمل ظلّين متراكبين. والـ color style يمكن أن يحمل تدرّجًا لونيًا أو عدّة تعبئات متراكبة. غيّر الـ style فتتحدّث كل طبقة تستخدمه.
\nالـ variable يحمل قيمة خامًا واحدة. الأنواع الأساسية هي color وnumber وstring وboolean (وأضاف Figma أنواعًا أخرى لأعمال الحركة منذ ذلك الحين). يمكنك ربط الـ variables بالتعبئات والحدود، ونصف قطر الزوايا، والـ gap، والـ padding، والعرض والارتفاع، والشفافية، وظهور الطبقة، ومحتوى النص، وكثير من خصائص الخط.
\nثلاثة أشياء تجعل الـ variables مختلفة عن الـ styles:
\nتوجد الـ variables في collections، والشرطات المائلة في الأسماء تصنع مجموعات: color/text/primary يقع في المجموعة color/text.
النمط الذي تستخدمه معظم أنظمة التصميم، والذي يستخدمه Steady، فيه مستويان.
\nالـ 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.
\n\nمع إشارة كل component إلى معانٍ، يصبح الوضع الداكن مسألة ما يشير إليه كل معنى، وهذا بالضبط ما تجيب عنه الـ modes في الدرس التالي.
\n","toc":[{"id":"sec-1","text":"الـ Styles: وحدات مركّبة قابلة لإعادة الاستخدام","level":2},{"id":"sec-2","text":"الـ Variables: قيم مفردة بقدرات إضافية","level":2},{"id":"sec-3","text":"مستويان: الـ primitives والدلالية","level":2},{"id":"sec-4","text":"إبقاء المنتقي نظيفًا","level":2},{"id":"sec-5","text":"استخدم الاثنين","level":2}],"takeaways":["الـ style يجمع عدّة خصائص في وحدة مركّبة قابلة لإعادة الاستخدام، مثل text style يضمّ نوع الخط وحجمه ووزنه وارتفاع السطر.","الـ variable يحمل قيمة خامًا واحدة (لونًا أو رقمًا أو نصًا أو boolean)، ويمكن أن يكون alias لـ variable آخر، ويمكن أن تتغيّر قيمته حسب الـ mode.","استخدم مستويين من الـ variables، الـ primitives للوحة الألوان الخام والـ tokens الدلالية للمعاني، واربط الـ components بالمستوى الدلالي وحده.","الـ text styles والـ effect styles وcolor styles متعدّدة التعبئة أو المتدرّجة ما زالت بلا مقابل من variable واحد، لذا تستخدم معظم الفرق النظامين معًا.","تحديد نطاق الـ variables (scoping) وإخفاء الـ primitives من النشر يُبقيان منتقي الـ variables قصيرًا ويمنعان الناس من اللجوء إلى القيم الخام."],"further":[{"title":"Overview of variables, collections, and modes","url":"https://help.figma.com/hc/en-us/articles/14506821864087-Overview-of-variables-collections-and-modes"},{"title":"Guide to styles in Figma","url":"https://help.figma.com/hc/en-us/articles/360039238753-Guide-to-styles-in-Figma"},{"title":"Create and manage variables and collections","url":"https://help.figma.com/hc/en-us/articles/15145852043927-Create-and-manage-variables-and-collections"}],"quiz":[{"q":"حالة Done في صف العادة تستخدم لون التعليم teal/700 مباشرة من مجموعة الـ primitives. في الـ sprint التالي تضيف الوضع الداكن. ما الذي سيتعطّل؟
color/action/primary بدلًا من ذلك يتيح للوضع الداكن توجيه هذا المعنى إلى تركوازي أفتح."},{"text":"يفقد صف العادة الـ variants الخاصة به.","why":"ربط الـ variables لا يؤثّر في الـ variants ولا في خصائص الـ component الأخرى."}],"answer":2},{"q":"أيّ من هذه ينتمي إلى style لا إلى variable واحد؟
","options":[{"text":"تنسيق نص Headline، أي 17 px بوزن semibold وارتفاع سطر 24 px.","why":"صحيح. إنها مركّب من عدّة خصائص. الـ text style يجمعها، ويمكن مع ذلك ربط كل جزء منها بـ variable."},{"text":"الـ padding بمقدار 16 px في البطاقة.","why":"الـ padding رقم واحد، وهذا بالضبط ما وُجد الـ number variable من أجله."},{"text":"لون الإجراء الأساسي.","why":"لون واحد يجب أن يتغيّر حسب الـ mode هو color variable نموذجي."},{"text":"هل تلميح التهيئة الأولى (onboarding) ظاهر.","why":"قيمة true أو false تناسب boolean variable."}],"answer":0},{"q":"ما الفائدة الأساسية من جعل color/text/secondary alias لـ gray/500 بدل كتابة #6B7280 فيه؟
يكتب مصمّم 15 في حقل الـ gap مع أن منتقي variables المسافات space متاح. أيّ تغيير في الإعداد يثنيه عن ذلك على أفضل وجه؟
16 تخفي المعنى ولا تمنع أحدًا من كتابة 15."},{"text":"تحويل كل المسافات إلى text styles.","why":"الـ text styles تحمل إعدادات الخط، لا مسافات التخطيط."}],"answer":1}],"exercise":{"kind":"spot-bug","language":"json","code":"{\n \"primitives\": {\n \"teal/700\": \"#0F766E\",\n \"gray/900\": \"#1A1A1A\",\n \"gray/500\": \"#6B7280\",\n \"gray/400\": \"#9CA3AF\",\n \"gray/200\": \"#E5E7EB\",\n \"white\": \"#FFFFFF\"\n },\n \"semantic\": {\n \"color/text/primary\": \"{gray/900}\",\n \"color/text/secondary\": \"{gray/400}\",\n \"color/surface/default\": \"{white}\",\n \"color/border/default\": \"{gray/200}\",\n \"color/action/primary\": \"#0F766E\",\n \"color/teal-checkbox\": \"{teal/700}\",\n \"color/on-action\": \"{white}\"\n }\n}","bugLines":[12,15,16],"title":"راجع variables الألوان في Steady","prompt":"هذا تصدير لـ variables الألوان في الوضع الفاتح في Steady. الصيغة {name} تعني أن الـ variable alias لـ variable آخر. قواعد المجموعة: الـ variables الدلالية تكون aliases لـ primitives (لا قيمًا خامًا أبدًا)، وتُسمّى حسب الدور (لا حسب المظهر أبدًا)، وكل لون نص يحقّق نسبة 4.5:1 على الأبيض. حدّد كل سطر يخالف قاعدة.
السطر 12: color/text/secondary هو alias لـ gray/400 (#9CA3AF)، الذي يعطي 2.54:1 على الأبيض ويفشل كلون نص. وجّهه إلى gray/500 (4.83:1). السطر 15: color/action/primary يحمل قيمة hex خامًا بدل أن يكون alias لـ {teal/700}، فلن يصله أي تغيير في لوحة الألوان، ويكسر نمط المستويين. السطر 16: color/teal-checkbox مسمّى حسب المظهر وحسب component واحد. أعِد تسميته باسم دور مثل color/action/primary (المعنى نفسه، فيمكنك حذفه واستخدام ذلك) أو color/control/checked إن احتاجت عناصر التحكم المعلَّمة token خاصًا بها.