Frontend Academy · درس

رموز التصميم باستخدام Style Dictionary

حدّد رموز الألوان والمسافات والطباعة في JSON، وحوّلها باستخدام Style Dictionary إلى متغيرات CSS أو ثوابت JS أو صيغ iOS وAndroid

الدرس 2 من 414 خطوة

رموز التصميم باستخدام Style Dictionary درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.

ما هي Design Tokens؟

Design tokens هي القيم الأولية المسمّاة في نظام التصميم: الألوان، والمسافات، وأحجام الخطوط، وأنصاف أقطار الحدود، والظلال. وهي مصدر الحقيقة؛ إذ يستمد كل مكوّن أنماطه منها.

لماذا تهم Design Tokens؟

تفصل Design Tokens قرارات التصميم عن التنفيذ. غيّر color.primary من الأزرق إلى الأخضر مرة واحدة، فتتحدّث كل المكوّنات التي تستخدمه. كما تتيح لك تطبيق التصميم نفسه على الويب وiOS وAndroid.

تخزين Design Tokens

خزّن Design Tokens بصيغة JSON أو YAML، فهما صيغتان محايدتان يمكن للأدوات على مختلف المنصات استهلاكهما. ويُعد JSON الأكثر شيوعاً.

// tokens/color.json
{
  "color": {
    "brand": {
      "primary": { "value": "#2563eb" },
      "secondary": { "value": "#7c3aed" }
    },
    "text": {
      "default": { "value": "#111827" },
      "muted": { "value": "#6b7280" }
    }
  }
}

Style Dictionary

يُعد Style Dictionary (من Amazon) أداة البناء الفعلية الشائعة لـ Design Tokens. يقرأ التوكنات ويحوّلها إلى صيغ إخراج متعددة: متغيرات CSS، وSCSS، وثوابت JS، وSwift لنظام iOS، وXML لنظام Android.

npm install -D style-dictionary

الإعداد

أنشئ style-dictionary.config.js لوصف التوكنات المُدخلة والمنصات المستهدفة للإخراج.

// style-dictionary.config.js
module.exports = {
  source: ['tokens/**/*.json'],
  platforms: {
    css: {
      transformGroup: 'css',
      buildPath: 'build/css/',
      files: [{ destination: 'tokens.css', format: 'css/variables' }]
    },
    js: {
      transformGroup: 'js',
      buildPath: 'build/js/',
      files: [{ destination: 'tokens.js', format: 'javascript/es6' }]
    },
    ios: {
      transformGroup: 'ios',
      buildPath: 'build/ios/',
      files: [{ destination: 'Tokens.swift', format: 'ios-swift/class.swift' }]
    }
  }
};

تشغيل عملية البناء

شغّل CLI لإخراج ملفات جميع المنصات.

npx style-dictionary build

# Output:
# build/css/tokens.css     — CSS variables
# build/js/tokens.js       — JS constants
# build/ios/Tokens.swift   — Swift constants

إخراج CSS المُنشأ

متغيرات CSS وفق مخطط تسمية متسق (kebab-case مع مساحة أسماء).

:root {
  --color-brand-primary: #2563eb;
  --color-brand-secondary: #7c3aed;
  --color-text-default: #111827;
  --color-text-muted: #6b7280;
}

إخراج JS المُنشأ

كائن JS لاستخدامه في شيفرة JS/TS (إعدادات Tailwind وCSS-in-JS).

export const ColorBrandPrimary = '#2563eb';
export const ColorBrandSecondary = '#7c3aed';
export const ColorTextDefault = '#111827';

اصطلاحات تسمية التوكنات

استخدم أسماء دلالية (color.primary) بدلاً من الأسماء الحرفية (color.blue-500). تتيح لك التوكنات الدلالية تغيير القيم دون إعادة التسمية. نظام من مستويين: لوحة حرفية (blue-500) ← اسم مستعار دلالي (primary).

{
  "color": {
    "palette": {
      "blue-500": { "value": "#2563eb" }
    },
    "brand": {
      "primary": { "value": "{color.palette.blue-500.value}" }
    }
  }
}

إنشاء السمات باستخدام التوكنات

أنشئ عمليات بناء متعددة بمدخلات مختلفة لدعم السمات (الفاتحة/الداكنة) — الأسماء نفسها مع قيم مختلفة.

// Light theme:
--color-bg: white;
--color-text: black;

// Dark theme:
--color-bg: #111;
--color-text: white;

فئات التوكنات

الفئات الشائعة: color، وspacing، وtypography (font-family وsize وline-height وweight)، وborder (radius وwidth)، وshadow، وtransition (duration وeasing)، وz-index، وbreakpoint.

أدوات سجل التوكنات

بالإضافة إلى Style Dictionary، هناك Tokens Studio (ملحق Figma) وSpecify وSupernova. تتيح هذه الأدوات للمصممين إدارة التوكنات في Figma ومزامنتها مع قاعدة الشيفرة تلقائياً.

اختبار سريع

ما الفائدة الأساسية من استخدام Design Tokens مع Style Dictionary؟

أجب عليها في الدرس التفاعلي

مراجعة: Design Tokens

التوكنات هي قيم أولية مسمّاة (اللون، والمسافات، والطباعة)، وهي مصدر الحقيقة لنظام التصميم. خزّنها بصيغة JSON. يحوّل Style Dictionary التوكنات إلى متغيرات CSS وJS وiOS وAndroid. استخدم التسمية الدلالية (primary) بدلاً من الحرفية (blue-500). النظام من مستويين: لوحة الألوان ← اسم مستعار دلالي. أنشئ السمات عبر عمليات بناء منفصلة. زامنها من Figma باستخدام Tokens Studio.

البدء مجانًا

تعلم HTML مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 41
الدروس: 163

ابدأ التعلم مجانًا عرض الدورة الكاملة

الأسئلة الشائعة

هل درس «رموز التصميم باستخدام Style Dictionary» مجاني؟

نعم — نص درس «رموز التصميم باستخدام Style Dictionary» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.

ماذا ستتعلم في «رموز التصميم باستخدام Style Dictionary»؟

حدّد رموز الألوان والمسافات والطباعة في JSON، وحوّلها باستخدام Style Dictionary إلى متغيرات CSS أو ثوابت JS أو صيغ iOS وAndroid تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟

لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «رموز التصميم باستخدام Style Dictionary»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟

نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Frontend Academy