رموز التصميم هي المصدر الوحيد للحقيقة للقرارات البصرية عبر المنتج. إنها ترمز إلى اللون، والمسافات، والطباعة، والحركة في متغيرات مسماة تستهلكها المكونات.
لماذا تهم الرموز
بدون الرموز، يتطلب تغيير لون العلامة التجارية الأساسية البحث في مئات الملفات. مع الرموز، يتم تحديث متغير واحد في كل مكان - من الأزرار إلى التنبيهات إلى أشرطة التنقل.
تربط الرموز أيضًا الفجوة بين أدوات التصميم والكود. يسمي المصمم لونًا surface-brand في Figma؛ يستخدم المطور var(--surface-brand) في CSS. يتحدثون نفس اللغة.
أمثلة عملية
افترض مكونًا يحتاج إلى خلفية وحدود ونص. بدلاً من ترميز #1a56db و#e1effe و#1e429f، يشير المكون إلى --color-primary و--surface-primary-subtle و--text-primary-strong. عندما تتطور العلامة التجارية، تتغير اللوحة - المكون لا يتغير.
فئات الرموز
اللون - لوحات العلامة التجارية، الدلالية، والحيادية
رموز التصميم هي المصدر الوحيد للحقيقة للقرارات البصرية عبر المنتج. إنها ترمز إلى اللون، والمسافات، والطباعة، والحركة في متغيرات مسماة تستهلكها المكونات.
