أنظمة التصميم للفرق الصغيرة: ابدأ بالرموز

يبدو «نظام التصميم» كأنه شيء للشركات التي لديها فريق مخصص وموقع للتوثيق. لكن الفريق الصغير يحتاج إليه أكثر لا أقل: مع مصممَين اثنين وثلاثة مطورين، يُصلَح كل تعارض يدويًا، مرة بعد مرة. السر هو أن تبني نظامًا صغيرًا، وبالترتيب الصحيح.

ما هو نظام التصميم الصغير فعلًا

ثلاث طبقات، ولا تحتاج للبدء إلا إلى أول اثنتين:

الرموز (Tokens): قرارات لها أسماء، كالألوان وأحجام الخطوط والمسافات والزوايا المستديرة والظلال والحركة.
المكونات: القطع القابلة لإعادة الاستخدام المبنية من تلك الرموز، كالأزرار وحقول الإدخال والبطاقات.
الأنماط والإرشادات: طريقة تركيب المكونات معًا، كالنماذج والحالات الفارغة وتخطيطات الصفحات. تُكتب لاحقًا، حين تلاحظ أنك تكرر الشرح نفسه.

تبدأ معظم الفرق من الطبقة الثانية، فتبني مكتبة أزرار جميلة فوق 37 درجة رمادية متقاربة. ابدأ بالرموز.

الخطوة 1: الرموز

اللون

عرّف مستويين. الرموز الأولية هي لوحة الألوان؛ والرموز الدلالية تقول لأي غرض يُستخدم اللون:

tokens.css

:root {
  /* Primitives */
  --blue-500: #0777d2;
  --blue-600: #0563b0;
  --gray-50: #f8f9fa;
  --gray-900: #111418;
  --red-600: #d92d20;

  /* Semantic — components only use these */
  --color-bg: #ffffff;
  --color-surface: var(--gray-50);
  --color-text: var(--gray-900);
  --color-text-muted: #5b6370;
  --color-primary: var(--blue-500);
  --color-primary-hover: var(--blue-600);
  --color-danger: var(--red-600);
  --color-border: #e3e6ea;
}

[data-theme='dark'] {
  --color-bg: #0d1117;
  --color-surface: #161b22;
  --color-text: #e6edf3;
  --color-border: #30363d;
}

لا تشير المكونات إلا إلى الرموز الدلالية. وهذا ما يجعل الوضع الداكن أو تغيير الهوية أو عميلًا بعلامة بيضاء تعديلًا في ملف واحد.

وتحقّق من التباين ما دمت هنا: يحتاج النص الأساسي إلى نسبة 4.5:1 على الأقل مقابل خلفيته (WCAG AA)، والنص الكبير إلى 3:1.

الطباعة

اختر عائلة خطوط أو اثنتين، وسُلّمًا من ستة إلى ثمانية أحجام. السلّم المتناسب (كل درجة تقارب 1.2 إلى 1.25 من سابقتها) يحافظ على إيقاع متّسق:

css

:root {
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-3xl: 2.75rem;
  --leading-tight: 1.15;
  --leading-normal: 1.6;
}

المسافات والزوايا والظلال والحركة

سلّم مسافات بخطوات 4 أو 8 بكسلات (4, 8, 12, 16, 24, 32, 48, 64)، وزاويتان أو ثلاث، وظلّان أو ثلاثة، ومدتان أو ثلاث مع منحنى تسارع واحد. كل قيمة خارج السلّم قرار سيضطر أحدهم إلى اتخاذه من جديد.

في Tailwind CSS

إن كنت تستخدم Tailwind، فإن الثيم هو ملف الرموز. وجّهه إلى متغيرات CSS لتتحكم الرموز نفسها في الاثنين:

tailwind.config.ts

export default {
  theme: {
    extend: {
      colors: {
        bg: 'var(--color-bg)',
        surface: 'var(--color-surface)',
        text: 'var(--color-text)',
        muted: 'var(--color-text-muted)',
        primary: { DEFAULT: 'var(--color-primary)', hover: 'var(--color-primary-hover)' },
        danger: 'var(--color-danger)',
        border: 'var(--color-border)',
      },
    },
  },
}

الخطوة 2: المكونات العشرة الأولى

تغطي هذه معظم شاشات المنتج:

الزر: أساسي، وثانوي، وشفاف، وخطِر؛ بأحجام مختلفة؛ وحالتا التحميل والتعطيل
حقل النص: مع عنوان وتلميح ورسالة خطأ
القائمة المنسدلة / Combobox
مربع الاختيار وزر الاختيار والمفتاح
البطاقة: الحاوية لكل شيء تقريبًا
النافذة المنبثقة / الحوار: مع حصر التركيز والإغلاق بمفتاح Escape
الإشعار المؤقت (Toast): للتأكيدات والأخطاء
التبويبات
الشارة / الوسم
الحالة الفارغة: أيقونة، وسطر نص واحد، وإجراء واحد

لا تبنِ إمكانية الوصول من الصفر: مكتبات بلا واجهة (headless) مثل Radix UI وReact Aria وHeadless UI تتولى التركيز والتنقل بلوحة المفاتيح وخصائص ARIA، وأنت تنسّقها برموزك. وshadcn/ui نقطة بداية شائعة تنسخ مكونات مبنية على Radix إلى شيفرتك، حيث تصبح ملكك.

كل مكوّن يحتاج إلى حالاته

الفرق بين العرض التجريبي والمنتج هو الحالات. لكل مكوّن، صمّم وابنِ: الافتراضية، والتمرير، والتركيز (مرئية!)، والنشطة، والمعطلة، والتحميل، والخطأ، والفارغة. حالات التركيز هي الأكثر نسيانًا، وهي التي يعتمد عليها مستخدمو لوحة المفاتيح.

الخطوة 3: أبقِ Figma والشيفرة متزامنتين

الأسماء نفسها في الجانبين. إن سمّته Figma color/text/muted وسمّته الشيفرة --gray-500 فسيتباعدان. استخدم Figma Variables بالأسماء الدلالية من ملف الرموز.
مصدر واحد للقيم. يمكن للفرق الصغيرة أن تتفق ببساطة على أن الشيفرة هي المصدر، وأن تحدّث متغيرات Figma عند تغيّر الرموز. أما الفرق الأكبر فتصدّر المتغيرات إلى JSON وتولّد منها CSS (عبر Style Dictionary أو Tokens Studio).
مكونات Figma تعكس خصائص المكونات في الشيفرة. يجب أن يقابل متغيّر Figma ‏size=sm, variant=secondary المكوّنَ <Button size="sm" variant="secondary">.

الخطوة 4: لا توثّق إلا ما يتكرر

لا يلزم أن يكون التوثيق موقعًا. تكفي صفحة واحدة في مستودعك فيها قائمة الرموز، ولقطة شاشة لكل مكوّن، وبضع قواعد («زر أساسي واحد في كل شاشة»، «الإجراءات الخطِرة تطلب تأكيدًا»). أضف قاعدة كلما شرحتَ الشيء نفسه مرتين في المراجعة.

الأخطاء التي أراها أكثر من غيرها

متغيرات أكثر من اللازم. خمسة أنماط للأزرار لا يستطيع أحد التمييز بينها. ابدأ بثلاثة.
عودة القيم الثابتة خلسة. قاعدة فحص (lint) أو بند في قائمة مراجعة الشيفرة («لا قيم سداسية عشرية خارج tokens.css») تحافظ على نزاهة النظام.
تصميم مكونات لا تحتاجها أي شاشة بعد. ابنِ المكوّن عندما تحتاجه الشاشة الثانية، لا قبل ذلك.
اعتبار النظام مكتملًا. إنه منتج مستخدموه هم فريقك. عُد إليه كل بضعة أشهر.

كم يستغرق هذا؟

لمنتج صغير، تستغرق النسخة الأولى (الرموز، وعشرة مكونات بحالاتها، ومتغيرات Figma، ودليل من صفحة واحدة) نحو أسبوع إلى ثلاثة أسابيع من وقت التصميم والتطوير مجتمعَين. وتسترد قيمتها في أول مرة تبني فيها شاشة جديدة في فترة بعد الظهر، أو تفعّل الوضع الداكن في يوم واحد.

تبدأ من الصفر، دون شعار أو علامة بعد؟ ابدأ بذلك أولًا؛ راجع الهوية التي تحتاجها الشركة الناشئة عند الإطلاق.