Figma Variables من القيم الخام إلى نظام دلالي
الـVariables تصبح مفيدة عندما تعبّر عن وظيفة القيمة وتربط التصميم بالكود، لا عندما تحول ملف Figma إلى جدول أسماء ضخم.
ابدأ بالمشكلة التي ستحلها الـVariables
إذا كان تغيير اللون يتطلب تعديل عشرات المكونات، أو تختلف أسماء القيم بين التصميم والكود، فالـVariables تستطيع تقليل هذا الاحتكاك. أما إنشاء طبقات كثيرة قبل وجود استخدام متكرر فيضيف عبئًا بلا عائد.
اختر نطاقًا أوليًا: ألوان واجهة واحدة أو spacing محدود، وعرّف نجاح التجربة مثل تغيير الـTheme بدون فك المكونات أو تقليل القيم المكررة.
افصل القيمة الخام عن المعنى الدلالي
Primitive مثل green-500 يصف قيمة ثابتة. Semantic مثل text-success أو action-primary يصف وظيفة. المكون يستخدم الاسم الدلالي، والاسم الدلالي يشير إلى قيمة خام.
هذا الفصل يسمح بتغيير الـTheme أو تحسين التباين بدون تعديل المكونات واحدًا واحدًا. لا تضف طبقة ثالثة إلا إذا كان المنتج يحتاجها فعلًا.
نظّم Collections حول الملكية والتغيير
اجمع المتغيرات التي تتغير معًا ويمتلكها نفس الفريق. Primitive colors قد تكون Collection مستقرة، بينما semantic colors تتغير حسب Theme. لا تجمع كل شيء في مكان واحد لمجرد سهولة البداية.
اكتب وصفًا قصيرًا لكل مجموعة وقواعد إضافة قيم جديدة، حتى لا يتحول الملف إلى أسماء متشابهة لا يعرف أحد الصحيح منها.
استخدم Modes لنسخ السياق لا لتعقيد الملف
Light وDark مثال واضح لأن الوظيفة نفسها تتلقى قيمة مختلفة. يمكن كذلك استخدام Modes للعلامات أو الكثافة إذا كان ذلك جزءًا حقيقيًا من المنتج.
تجنب Mode لكل شاشة أو حالة مؤقتة؛ المكونات والـProperties غالبًا أوضح لهذه الحالات. افحص أيضًا أن التغيير لا يعتمد على اللون وحده.
اربط المكونات واختبر الحالات
ابدأ بمكونات كثيرة الاستخدام، اربط الألوان والمسافات الضرورية، ثم جرّب تغيير الـMode على شاشة كاملة. سيظهر بسرعة أي Fill أو Stroke ما زال بقيمة خام.
اختبر Hover وFocus وDisabled وError، لأن النظام الذي يغطي Default فقط سينهار عند أول تسليم حقيقي.
قرب التسمية من الكود والتوثيق
اتفق مع المطورين على شكل الاسم وكيف يتحول إلى CSS variables أو Tokens في المنصة المستخدمة. التطابق الحرفي مفيد أحيانًا، لكن الأهم وجود mapping موثق ومالك للتغيير.
أرفق مثال استخدام وما لا يجب فعله، وسجل التغييرات المؤثرة. الـVariable ليس قرارًا مكتملًا بدون سياق يشرح وظيفته.