ما هو رمز التصميم؟
رمز التصميم قيمة لها اسم تحفظ قرار تصميم واحدًا، مثل لون أو درجة تباعد أو حجم خط، بحيث يمكن إعادة استخدام هذا القرار في أدوات التصميم وفي الشيفرة بدلًا من كتابته يدويًا في كل موضع.
لماذا نمنح القيمة اسمًا أصلًا
خذ اللون المستخدم في الأزرار الأساسية. حين يُكتب مباشرة يظهر بصيغة #2563EB في ورقة أنماط، وكحقل ست عشري في تعبئة داخل Figma، وكسلسلة نصية فيما كتبه مطوّر الأسبوع الماضي. ثلاث نسخ، بلا أي علاقة بينها.
أما كرمز فيظهر مرة واحدة، تحت اسم:
--color-action-primary: #2563EB;وكل ما عداه يشير إلى الاسم. تغيّر القيمة مرة فيتغيّر كل استخدام لها. هذه الوساطة هي الفكرة كلها، وكل ما يتعلق بالرموز بعد ذلك ينبع منها.
ما الذي تغطيه الرموز عادة
- اللون: اللوحات والسلالم والأدوار الدلالية مثل الخلفية والحد والنص والحالات
- الطباعة: عائلات الخطوط والأحجام والأوزان وارتفاع السطر والتباعد بين الحروف
- التباعد: سلّم متسق، عادة على أساس 4px أو 8px
- نصف قطر الحد وسماكة الحد
- الظل والارتفاع
- الحركة: المدد ومنحنيات التسارع
- نقاط الانكسار وأبعاد التخطيط
الرموز ليست متغيرات
التمييز مهم. متغير CSS آلية. أما رمز التصميم فقرار يصادف أن يُعبَّر عنه عبر تلك الآلية.
الفارق العملي هو قابلية النقل. الرمز موجود باستقلال عن أي تقنية بعينها، ولهذا يمكن إخراج المجموعة نفسها كخصائص CSS مخصصة، أو إعداد Tailwind، أو متغيرات Figma، أو Swift أو Kotlin. أما إن كان موجودًا فقط كسطر CSS فهو متغير.
الصيغ
تنشر Design Tokens Community Group، ضمن W3C، صيغة JSON قُصد بها أن تكون تبادلًا مشتركًا بين الأدوات. تمنح كل رمز $value و$type:
{
"color": {
"action": {
"primary": { "$value": "#2563EB", "$type": "color" }
}
}
}الاعتماد عليها متفاوت لكنه يتسع، وهي أقرب ما يكون إلى صيغة تبادل محايدة بين أدوات التصميم وخطوط البناء.
أين يقع Flash DSM من هذا
يولّد Flash DSM مجموعة رموز كاملة انطلاقًا من وصف نصي أو رابط موقع أو ملف Figma أو لقطة شاشة، ثم يصدّرها كخصائص CSS مخصصة أو إعداد Tailwind أو Tokens Studio JSON أو متغيرات Figma.