تقوم Design Tokens بتجميع كل متغير CSS ولون ومجموعة خطوط ونصف قطر وظل تستخدمه الصفحة، وفرزها إلى tokens أساسية وأوضاع سمات ونطاقات مكونات، وتنزيلها design-token W3C المميز JSON لـ Figma أو كملف CSS.
نادرًا ما يتم تدوين نظام التصميم بشكل كامل كما يتم تنفيذه. توجد اللوحة الحقيقية ومقياس التباعد ومنحدر الكتابة في أوراق الأنماط - المنتشرة عبر الخصائص المخصصة وتجاوزات السمات والقيم المشفرة - وإعادة بنائها يدويًا من DevTools تعني النقر عبر مئات القواعد ونسخ القيم واحدة تلو الأخرى.
هذه الأداة تقرأهم جميعا مرة واحدة. فهو يتنقل في كل ورقة أنماط على الصفحة، بما في ذلك الأوراق ذات الأصل المشترك التي لا يُسمح للصفحة نفسها بفحصها، ويجمع كل خاصية مخصصة، بالإضافة إلى المتغيرات التي تم تعيينها في وقت التشغيل في الأنماط المضمنة. المتغيرات على:root تصبح tokens الأساسية؛ نفس الأسماء التي تم إعادة تعريفها ضمن محدد السمات مثل.dark أو [data-theme="dark"] أو prefers-color-scheme تصبح أوضاعًا منفصلة؛ يتم سرد المتغيرات المحددة على المكونات الفردية على أنها محددة النطاق. يتم حل كل قيمة من خلال سلسلة var() الخاصة بها، بحيث ترى اللون الذي يتم عرضه بالفعل، وليس مجرد إشارة إلى متغير آخر.
يتم تصنيف كل token بناءً على قيمته واسمه - اللون، أو عائلة الخط، أو حجم الخط، أو الوزن، أو ارتفاع الخط، أو التباعد، أو نصف القطر، أو الظل، أو التدرج، أو المدة، أو التخفيف أو مؤشر z - ويتم تسوية الألوان إلى شكل سداسي عشري، بما في ذلك تنسيقات القناة فقط التي تستخدم Tailwind و shadcn ( 222 47% 11%) و Bootstrap 's -rgb threelets. إلى جانب المتغيرات المعلنة، تعرض الأداة عينات من العناصر للإبلاغ عن الألوان ومجموعات الخطوط والأحجام وأنصاف الأقطار والظلال المستخدمة فعليًا، مع أعداد الاستخدام - وهو بالضبط ما تحتاجه على موقع لم يعتمد المتغيرات على الإطلاق.
يستغرق التصدير نقرة واحدة. Download tokens JSON بحفظ تنسيق W3C Design Tokens ( $value و $type)، والذي يستورده البرنامج الإضافي Tokens Studio إلى Figma ويحوله Style Dictionary إلى كود لأي نظام أساسي؛ يتم الاحتفاظ بأوضاع السمات والقيم المرصودة في مجموعات خاصة بها، لذلك لا يتم الخلط بين أي شيء. Download CSS بكتابة المتغيرات مرة أخرى كورقة أنماط، مع وضع كل وضع ضمن محدده الأصلي.
الخصائص المخصصة من كل ورقة أنماط، بما في ذلك الأوراق ذات الأصل المشترك التي لا يمكن للصفحة قراءتها، بالإضافة إلى المتغيرات التي تم تعيينها في وقت التشغيل في الأنماط المضمنة.
تصبح التجاوزات ضمن.dark أو [data-theme] أو prefers-color-scheme أوضاعًا منفصلة، تظهر جنبًا إلى جنب مع القيمة الأساسية.
يتم حل كل سلسلة var() ، ويتم كتابة كل token مميز بلون أو خط أو حجم أو تباعد أو نصف قطر أو ظل أو مدة أو تخفيف أو فهرس z.
Hex وrgb وhsl وoklch والألوان المسماة وقيم القناة فقط التي يستخدمها Tailwind و shadcn و Bootstrap ، كلها تم تطبيعها إلى hex.
الألوان، ومجموعات الخطوط، والأحجام، والأوزان، ونصف القطر، والظلال المأخوذة من العناصر المعروضة، مع عدد مرات ظهور كل منها.
design-token W3C JSON لـ Tokens Studio و Style Dictionary ، أو ملف CSS مع كل وضع ضمن محدده الأصلي.
قم باستيراد اللوحة الحقيقية والكتابة والتباعد في Tokens Studio بدلاً من اختيار الألوان من لقطات الشاشة.
تعرف على عدد الألوان وأحجام الخطوط التي يستخدمها الموقع بالفعل، والقيم التي تتجاوز tokens التي يحددها.
قارن بين كل متغير يتجاوزه الوضع المظلم وقيمته الفاتحة، جنبًا إلى جنب، وحدد المتغيرات التي لم يتم تجاوزها مطلقًا.
قم بتصدير tokens مرة واحدة وقم بإطعامها إلى Style Dictionary أو تكوين Tailwind بدلاً من نسخ القيم يدويًا.
اسحب نظام الألوان، ونوع المقياس ونصف قطر الموقع الذي تعجبك إلى ملف يمكنك العمل منه.
انقر على أيقونة Design Tokens في قاعدة DevSuite Pro. يتم تشغيل الاستخراج على الفور ويقوم الملخص بحساب المتغيرات والأوضاع والألوان ومجموعات الخطوط.
تعرض علامة التبويب "الألوان" كل token لون كعينة، مقسمة لإظهار كل وضع سمة، متبوعًا بالألوان التي تعرضها الصفحة، مع أعداد الاستخدام.
تقوم الطباعة بمعاينة كل مجموعة خطوط وتسرد الأحجام والأوزان وارتفاعات الخطوط وقواعد @font-face ؛ تغطي علامة التبويب الأخيرة التباعد ونصف القطر والظلال والحركة.
تسرد علامة التبويب "المتغيرات" كل خاصية مخصصة بقيمتها المؤلفة والمحللة. قم بالتبديل بين القاعدة وكل وضع سمة والمتغيرات ذات النطاق المكون.
Download tokens JSON لـ Figma عبر Tokens Studio ، أو Download CSS للحصول على ورقة أنماط. حدد خانة الاختيار لتضمين المتغيرات ذات نطاق المكونات أيضًا.
قم بتثبيت DevSuite Pro مجانًا وافتح أكثر من 74 أداة للمطورين لمتصفحك.
