بناء على استفسارات كثيرة تجيني هذي الفترة بخصوص خاصية برنامج فيقما في الفرق بين Design system & design token.

بألخصها بأبسط مقال تعريفي , علما ان اتقانك لهذي المفهومين يوصلك للمصمم متمكن أو مايقال عنه SENIOR .

Design Token
هي القيم الأساسية اللي يعتمد عليها التصميم – زي اللون الأساسي، نوع الخط، المسافات.
بدال ما تكتب “hashtag#1E90FF” كل شوي، تحفظه كمتغير اسمه --color-primary.
والقوة هنا؟ لما تغيّر التوكن، التصميم كله يتحدث تلقائيًا.



أما Design System
فهو أكبر من كذا.
هو المنظومة الكاملة: يشمل التوكنز، مكونات UI جاهزة (زي الأزرار، النماذج، الكروت)، قواعد الاستخدام، أسلوب الكتابة، وكل ما يخلي تجربة المستخدم متماسكة ومتناسقة.


طيب كيف أبدأ أشتغل عليهم؟
• في Figma، تقدر تستخدم إضافات زي Token Studio لتنظيم التوكنز.
• أو تستفيد من ميزة Variables الجديدة.
• لو تشتغل مع مطورين، استخدم التوكنز كجسر بينهم وبين ملفات التصميم.
• للبناء الكامل للـ Design System، أنصح تطّلع على أنظمة مفتوحة المصدر زي:
IBM Carbon, Google Material, Shopify Polaris

⸻

خلاصة التجربة:

التوكنز ساعدتني أوقف فوضى التكرار.
والنظام خلاني أفكر في التصميم كمنظومة، مو بس شكل.

لو كنت مصمم واجهات، لا تكتفي بـ “ستايلات حلوة”، فكر كيف تخلّي تصميمك يشتغل، يتحدث، ويكبر مع المنتج.s within another component.