David Zydd

David Zydd

David Zydd

David Zydd

David Zydd

Melody714/Melody Kusukari

Medhat

Medhat

@mdesigner07

14 Oct 2024

إيه هي الـ Design Tokens؟ Design Tokens هي وحدات بيانات صغيرة، بتستخدم لتعريف القيم الأساسية للتصميم زي الألوان، الخطوط، المسافات، الظلال، والأبعاد. الهدف الأساسي من الـ Tokens هو توفير نظام موحد للعناصر البصرية، بحيث نقدر نعيد استخدام نفس القيم في جميع أجزاء المنتج الرقمي عبر المنصات المختلفة (ويب، موبايل، وتطبيقات سطح المكتب). فكرة التوكينز بتسمح للمصممين والمطورين بتوحيد وتنسيق كل تفاصيل التصميم من مكان مركزي، وبالتالي أي تغيير بيتم على التوكين بينعكس تلقائيًا في كل مكان مستخدم فيه. مثال بسيط، بدل ما نحدد لون معين يدويًا في كل شاشة أو عنصر داخل التصميم أو الكود، بنحدد Color Token زي كده: ```json { "colorPrimary": "#3498db", "colorSecondary": "#2ecc71", "colorBackground": "#ffffff" } ``` دلوقتي لو حبينا نغير اللون الأساسي (Primary Color)، مجرد تغيير القيمة في التوكين هيعدل اللون في كل الأماكن اللي استخدمناه فيها داخل النظام، سواء على الموقع أو في التطبيق. تاريخ Design Tokens مفهوم الـ Design Tokens بدأ يظهر مع زيادة تعقيد المنتجات الرقمية وتطور الأنظمة الضخمة اللي بقت بتحتاج تصميمات متناسقة على منصات متعددة. من هنا، بدأت تظهر الحاجة لأدوات تنظم وتوحد التصميم عبر كل أجزاء المنتج، وده كان الأساس لظهور فكرة الـ Design Systems. في البداية، المصممين والمطورين كانوا بيواجهوا مشكلة كبيرة في إدارة الاتساق بين الويب والموبايل والمنصات الأخرى، وده كان بيأدي لتكرار العمل وظهور اختلافات غير مقصودة في التصميم. مع ظهور أنظمة تصميم كبيرة زي Material Designمن Google، وCarbon Design System من IBM، بدأت تتبلور فكرة استخدام التوكينز لتحديد القيم التصميمية بشكل مركزي. استخدامات Design Tokens في العمل التوكينز بتتخطى مجرد استخدام الألوان والخطوط؛ هي بتغطي كل عناصر التصميم اللي ممكن تتكرر عبر النظام، زي: 1. الألوان (Colors): توحيد ألوان الواجهة والأزرار والخلفيات، زي التوكين ده: ```json { "colorPrimary": "#3498db", "colorSecondary": "#e74c3c", "colorBackground": "#ecf0f1" } ``` 2. الخطوط (Typography): تحديد الخطوط وأحجامها وأنماطها: ```json { "fontFamilyBase": "'Roboto', sans-serif", "fontSizeBase": "16px", "fontSizeHeading": "24px" } ``` 3. المسافات (Spacing): تحديد مسافات مخصصة للمسافات بين العناصر (Margins وPadding): ```json { "spacingSmall": "8px", "spacingMedium": "16px", "spacingLarge": "32px" } ``` 4. الظلال (Shadows): تنظيم الظلال المستخدمة في العناصر: ```json { "shadowDefault": "0px 4px 8px rgba(0, 0, 0, 0.1)", "shadowLarge": "0px 8px 16px rgba(0, 0, 0, 0.2)" } ``` 5. الأبعاد (Dimensions): تحديد أبعاد الأزرار، الحاويات، والأيقونات: ```json { "buttonHeight": "48px", "iconSizeSmall": "24px", "iconSizeLarge": "48px" } ``` إزاي نعمل Setup لـ Design Tokens كمصممين؟ 1. تحديد القيم الأساسية للتصميم: أول خطوة هي إننا نحدد القيم الأساسية للتصميم، زي الألوان، الخطوط، المسافات، والأبعاد. الخطوة دي بتكون حجر الأساس اللي بنبني عليه التوكينز بتاعتنا. مثال عملي: لنفترض إنك بتصمم موقع تجارة إلكترونية، هتحدد مجموعة من القيم اللي هتتكرر عبر المشروع: ```json { "colorPrimary": "#e74c3c", "colorSecondary": "#3498db", "fontFamilyBase": "'Arial', sans-serif", "fontSizeBase": "16px", "spacingSmall": "8px", "spacingMedium": "16px", "buttonHeight": "50px" } ``` القيم دي بنسميها Base Tokens، وهي الأساس اللي باقي عناصر التصميم بتعتمد عليه. 2. استخدام التوكينز على أدوات التصميم (Figma أو Sketch): معظم أدوات التصميم الحديثة زي Figma وSketch بتدعم التوكينز بشكل مباشر أو من خلال إضافات. في Figma مثلًا، فيه إضافة اسمها Figma Tokens Plugin بتسمح للمصممين بإنشاء وإدارة التوكينز بشكل منظم. داخل Figma، بتبدأ تربط التوكينز بكل عناصر التصميم؛ مثلًا، بدل ما تحدد لون الزرار يدويًا في كل مرة، بتختار **Color Token** اللي حددته سابقًا عشان أي تعديل على التوكين يتطبق تلقائيًا على كل الزرار. 3. تصدير التوكينز للمطورين: بعد ما نحدد التوكينز ونعمل تنظيم لها في أدوات التصميم، بنصدرها للمطورين بصيغة JSON أو CSS Variables عشان يقدروا يدمجوها في الكود بسهولة. مثال على CSS Variables: ```css :root { --color-primary: #e74c3c; --font-family-base: 'Arial', sans-serif; --spacing-small: 8px; } ``` 4. استخدام Style Dictionary: في بعض المشاريع الكبيرة، بنستخدم أدوات زي Style Dictionary، اللي بتسمح بتحويل التوكينز لصيغ متعددة (CSS، SASS، JSON، Swift، Android) عشان نضمن إن التوكينز بتشتغل على كل المنصات. على سبيل المثال، لو عندنا نفس التصميم شغال على موقع وتطبيق موبايل، Style Dictionary بيحول التوكينز للصيغ اللي تناسب كل منصة: - على الويب، التوكينز هتتحول لـ CSS Variables. - على الموبايل (iOS أو Android)، التوكينز هتتحول لقيم مناسبة للغات البرمجة الخاصة بالموبايل. فايدة Design Tokens للمصممين والمطورين 1. توفير الوقت والجهد: باستخدام التوكينز، تقدر تعمل تعديل شامل وسريع في كل المشروع من خلال تغيير قيمة توكين واحدة. بدل ما تعيد كتابة القيم يدويًا في كل مكان، تعديل واحد بينعكس على كل عناصر التصميم. مثال: لو قررت تغير اللون الأساسي للموقع، كل اللي هتحتاج تعمله هو تعديل التوكين: ```json { "colorPrimary": "#2ecc71" } ``` وهتلاحظ إن التغيير ده هينعكس في كل مكان استخدمت فيه التوكين ده. 2. الاتساق في التصميم: التوكينز بتضمن إن كل عناصر التصميم متناسقة مع بعضها. سواء كنت بتصمم للويب، الموبايل، أو سطح المكتب، استخدام نفس التوكينز بيضمن إن العناصر بتتطابق تمامًا عبر كل المنصات. 3. التعاون بين المصممين والمطورين: التوكينز بتسهل التعاون بين المصممين والمطورين، لأنها بتوفر لغة مشتركة بينهم. المصممين بيحددوا التوكينز في التصميمات، والمطورين بيستخدموها مباشرة في الكود. ده بيقلل أي لخبطة أو اختلافات غير مقصودة بين التصميم والتنفيذ. 4. التحديث السهل: لما تحب تعدل أي شيء في التصميم، سواء لون أو خط أو حجم عنصر معين، التحديث بيتم مرة واحدة وبيتطبق في كل مكان تلقائيًا. ده بيوفر وقت وجهد كبير، خاصة في المشاريع الكبيرة. إزاي التوكينز بتفيد فئات معينة من المطورين؟ 1. Front-End Developers: التوكينز بتمثل وحدة بناء أساسية لمطوري الواجهات الأمامية (Front-End Developers). بدل ما يعيدوا كتابة نفس القيم مرارًا وتكرارًا، بيستخدموا التوكينز كـ CSS Variables أو SASS Variables. مثال على CSS: ```css :root { --color-primary: var(--colorPrimary); --font-family-base: var(--fontFamilyBase); } ``` 2. Mobile Developers: مطوري الموبايل (iOS وAndroid) بيستفيدوا من التوكينز بشكل كبير، لأنهم بيقدروا يستخدموا نفس القيم اللي بيستخدمها فريق الويب، وده بيسهل عليهم توحيد التجربة عبر المنصات المختلفة. 3. Back-End Developers: في بعض الأحيان، ممكن التوكينز تفيد مطوري الـ Back-End لو المشروع بيتطلب إن API معينة ترجع قيم بصرية زي الألوان أو الخطوط، بحيث يتعاملوا مع نفس القيم اللي بيستخدمها باقي الفريق. Design Tokens في الـ Design Systems التوكينز هي عنصر أساسي في الـ Design Systems اللي بتهدف لتوحيد كل جوانب التصميم عبر المنصات المختلفة. بتوفر لغة مشتركة بين فرق العمل، وبتضمن إن أي تعديل أو تحديث بيتم مرة واحدة وبيتطبق على كل العناصر في النظام. ليه لازم نستخدم Design Tokens؟ Design Tokens هي المفتاح للحفاظ على الاتساق في التصميمات الكبيرة والمعقدة. بتسهل عملية التعاون بين المصممين والمطورين، وبتضمن مرونة في التحديثات والتعديلات. استخدام التوكينز بيوفر وقت وجهد، وبيخلي التصميمات أكتر مرونة واستدامة على المدى الطويل. لو وصلت لحد هنا وعاوز تعرف ازاي ممكن نسمي التوكينز وايه احسن طريقة لده اعمل ريتويت للبوست واستنى البوست الجديد 😁

2,357