“هل يمكنك تغيير اللون الأزرق الأساسي إلى اللون الأزرق الداكن قليلاً؟” في قاعدة التعليمات البرمجية القديمة، يكلف هذا الطلب 5000 دولار. لماذا؟ لأن #3b82f6 مضمن في 400 ملف CSS، و20 ملف JS، و5 قوالب HTML. في قاعدة التعليمات البرمجية الحديثة، يكلف هذا الطلب 0 دولارًا. يمكنك تحديث Design Token في Figma، ويتم نشره على iOS وAndroid والويب تلقائيًا.

لماذا تتحدث Maison Code عن هذا

في Maison Code Paris، نعمل كضمير معمari لعملائنا. غالبًا ما نرث حزمًا “حديثة” تم بناؤها دون فهم أساسي للحجم.

نناقش هذا الموضوع لأنه يمثل نقطة تحول حاسمة في النضج الهندسي. التنفيذ الصحيح يميز MVP الهش عن منصة مؤسسية مرنة يمكنها التعامل مع حركة مرور الجمعة السوداء.

ما هي رموز التصميم؟

رموز التصميم هي “ذرات” التصميم المرئي. إنها أزواج ذات قيمة أساسية لا تعتمد على النظام الأساسي.

التراث: اللون: #000000;
الرمز المميز: color: var(--color-foreground);

التسلسل الهرمي للرمز المميز

نحن لا نقوم فقط بتسوية كل شيء. نحن نستخدم تسلسلًا هرميًا ثلاثي الطبقات لضمان المعنى الدلالي.

1. الرموز البدائية (العالمية)

القيم الخام. ولا ينبغي أبدًا استخدامها مباشرةً في واجهة المستخدم.

أزرق-500: #3b82f6
رمادي-900: #111827
فاصل-4: 16 بكسل

2. الرموز الدلالية (الاسم المستعار): موجهة نحو الغرض.

اللون الأساسي: {أزرق-500}
color-surface: {gray-900} (ضروري لـ الوضع الداكن)
حشوة بطاقة التباعد: {فاصل-4}

3. رموز المكونات (محددة)

التجاوزات المستندة إلى السياق.

زر-bg-أساسي: {لون أساسي}
card-bg: {color-surface}
خطأ في حدود الإدخال: {لون مدمر}

سير العمل: من الشكل إلى الكود

نحن نتعامل مع Figma باعتباره “مصدر الحقيقة” للتصميم، تمامًا كما نتعامل مع Git باعتباره مصدر الحقيقة للتعليمات البرمجية. نحن نستخدم ميزة المتغيرات في Figma مع البرنامج الإضافي “Tokens Studio”.

الخطوة 1: تصدير الرموز المميزة

نقوم بتصدير “tokens.json”. هذا الملف هو المصدر الوحيد للحقيقة.

{
  "العالمية": {
    "الألوان": {
       "أزرق": { "500": { "القيمة": "#3b82f6" } }
    }
  },
  "الدلالية": {
    "أساسي": { "القيمة": "{colors.blue.500}" },
    "على الأساسي": { "القيمة": "{colors.white}" }
  }
}

الخطوة 2: التحولات (قاموس النمط)

JSON غير مفيد لنظام التشغيل iOS (Swift) أو Android (XML). نحن نستخدم Style Dictionary (بواسطة Amazon) لتحويل JSON إلى عناصر خاصة بالنظام الأساسي. يبدو مسار البناء (npm run build:tokens) كما يلي:

الرسم البياني LR
    فيجما[متغيرات فيجما] -->|البرنامج المساعد| JSON[الرموز المميزة.json]
    JSON -->|CI/CD| SD [قاموس النمط]
    
    SD -->|التحويل| CSS[متغيرات CSS]
    SD -->|التحويل| TS[تكوين الرياح الخلفية]
    SD -->|التحويل| سويفت[لون.سويفت]
    SD -->|التحويل| XML[colors.xml]

الخطوة 3: الاستهلاك في الريح الخلفية

بالنسبة لواجهة متجرنا بدون رأس (التي تم إنشاؤها باستخدام Atomic Design)، فإننا نربط هذه الرموز المميزة بـ Tailwind CSS. في “tailwind.config.js”، لا نقوم بترميز القيم. نقرأ التحف البناء.

// tailwind.config.js
رموز const = require('./build/tokens.js');

وحدة التصدير = {
  الموضوع: {
    الألوان: {
      أساسي: 'var(--color-primary)', // تعيين إلى CSS var
      الخلفية: 'var(--color-background)',
    },
    تمديد: {
      BorderRadius: tokens.radius،
      عائلة الخطوط: tokens.typography،
      التباعد: tokens.spacing
    }
  }
}

هذا يعني أننا لا نكتب أبدًا class="bg-[#3b82f6]". نكتب class = "bg-primary". إذا تم تغيير العلامة التجارية إلى Red، فإننا نغير الرمز المميز primary -> red-500 في Figma. يتم تحديث الموقع بأكمله فورًا عند النشر.

هندسة الوضع المظلم

الوضع الداكن لا يتعلق بـ “عكس الألوان”. يتعلق الأمر بـ مبادلة الرموز. نحدد خريطة “مضيئة” وخريطة “مظلمة”. يتشاركون في نفس الأسماء الدلالية (“—color-background”)، لكنهم يشيرون إلى بدايات مختلفة.

تنفيذ CSS

:الجذر {
  /* الافتراضي (الخفيف) */
  --color-background: var(--white);
  --color-text: var(--black);
  --color-border: var(--gray-200);
}

[موضوع البيانات = "الظلام"] {
  /* تجاوز */
  --color-background: var(--black);
  --color-text: var(--white);
  --color-border: var(--gray-800);
}

نظرًا لأن Tailwind يستخدم الاسم الدلالي، فإن الفئة bg-background تعمل في كلا الوضعين. إنه أبيض في الوضع الفاتح وأسود في الوضع الداكن. لا حاجة إلى فئات إضافية (dark:bg-black) في مكونات React الخاصة بك. وهذا يقلل من حجم الحزمة بشكل كبير.

أنظمة العلامات التجارية المتعددة (Theming)

بالنسبة للوكالات التي تدير واجهات متاجر متعددة (على سبيل المثال، GAP وOld Navy وBanana Republic)، تتيح لك أنظمة Token Systems إعادة استخدام قاعدة بيانات React Codebase نفسها. ما عليك سوى تحميل ملف “tokens.css” مختلف.

الفجوة: أساسي = أزرق، نصف القطر = 4 بكسل.
البحرية القديمة: أساسي = بحري، نصف القطر = 8 بكسل. يظل رمز المكون <Button /> متطابقًا: <button className="bg-primary rounded-radius">. هذا هو “الوسم الأبيض” على نطاق واسع.

رموز الطباعة

رموز التصميم ليست مجرد ألوان.

الحجم: text-xl -> 1.25rem
الوزن: الخط الغامق -> 700
ارتفاع الخط: المسافة البادئة ضيقة -> 1.25
تباعد الحروف: على مستوى التتبع -> 0.025em

نقوم بتشفير “مقاييس الكتابة” (الثالث الرئيسي، والرابع التام) في الرموز المميزة لضمان الانسجام الرياضي. إذا قمت بتعيين حجم الخط يدويًا: 17 بكسل، فإنك تكسر الإيقاع. الرموز تفرض النظام.

9. تصور الرموز: ملحق القصص المصورة

الرموز مجردة. يحتاج المطورون إلى رؤيتهم. نحن نبني ملحقًا مخصصًا للقصص المصورة يعرض جميع الرموز المميزة مباشرة.

لوحة الألوان: شبكات من عينات الألوان مع أسمائها المميزة.
مقياس الطباعة: النص المعروض بكل حجم خط.
الظلال: مربعات توضح مستويات الارتفاع. وهذا بمثابة “التوثيق الحي”. إذا احتاج المطور إلى لون، فلن يفتح Figma. يفتحون Storybook، ويبحثون عن “Primary”، وينسخون اسم الفصل.

10. سياق “موفر السمة”.

في React، كيف يمكنك تبديل السمات بكفاءة؟ لا تمر الدعائم. استخدم متغيرات CSS + السياق.

const ThemeContext = createContext({ theme: 'light', toggle: () => {} });

وظيفة التصدير ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');
  
  استخدام التأثير (() => {
    document.documentElement.dataset.theme = theme;
  }, [الموضوع]);

  return <ThemeContext.Provider value={{ theme, setTheme }}>{children}</ThemeContext.Provider>;
}

يؤدي هذا إلى تحديث سمة “موضوع البيانات” الموجودة على العلامة <html>. يتم إعادة حساب متغيرات CSS على الفور. لا تقوم شجرة React بإعادة العرض (باستثناء زر Toggle نفسه). وهذا أمر بالغ الأهمية للأداء.

11. الصيانة والحوكمة

“مع القوة العظمى تأتي مسؤولية كبيرة.” إذا سعى أحد المصممين المبتدئين إلى تغيير اللون الأزرق “الأساسي”، فقد يؤدي ذلك إلى انتهاك توافق إمكانية الوصول عبر التطبيق. نقوم بتنفيذ فحوصات CI (فحص النمط في القاموس) للرموز المميزة.

الشيكات الآلية

التحقق من التباين: تأكد من أن النص “الأساسي” يحتوي على تباين بنسبة 4.5:1 مع الخلفية “الأساسية”. إذا لم يكن الأمر كذلك، يفشل البناء.
اتفاقية التسمية: ارفض blue-final-v2. فرض “الأزرق-500”.
الرموز المعزولة: تحذير إذا لم يتم استخدام رمز مميز محدد في منطق واجهة المستخدم.

12. الاسم المستعار للرمز المميز لسهولة الوصول

لا تقتصر إمكانية الوصول على تباين الألوان فقط. إنه تفضيل المستخدم. يحتاج بعض المستخدمين إلى “وضع التباين العالي”. يحتاج بعض المستخدمين إلى “حركة منخفضة”. نقوم بتعيين الرموز المميزة لاستعلامات الوسائط هذه. مدة الحركة: { var(--motion-fast) } @media (prefers-reduced-motion) { --motion-fast: 0ms; } تسمح لنا حركة الترميز باحترام رغبة المستخدم في إيقاف تشغيل الرسوم المتحركة عالميًا، دون إعادة كتابة مكونات CSS.

13. الرموز المميزة للأجهزة المحمولة والويب

يستخدم iOS النقاط. يستخدم الويب Rem. يستخدم Android DP. فشل التصدير الساذج. نحن نستخدم Style Dictionary Transforms للتعامل مع العمليات الحسابية. تباعد.4 (16 بكسل) -> iOS 16pt -> Android 16dp. نحن نتعامل أيضًا مع اصطلاحات التسمية:

الويب: كباب-كاز (--لون أساسي)
iOS: camelCase (colorPrimary)
أندرويد: snake_case (color_primary) وهذا يضمن للمطورين أن يشعروا وكأنهم في منزلهم على منصتهم.

14. الاستنتاج

رموز التصميم هي “واجهة برمجة التطبيقات” بين التصميم والهندسة. يقومون بفصل القيمة (الرمز السداسي) عن القصد (اللون الأساسي). بالنسبة إلى دار، حيث تكون إرشادات العلامة التجارية مقدسة، فإن رموز التصميم هي الطريقة الوحيدة لضمان الدقة بنسبة 100% عبر كل نقطة اتصال رقمية. التوقف عن كتابة CSS. البدء في كتابة الأنظمة.

قم بتوظيف مهندسينا.