Design Tokens אוסף כל משתנה CSS, צבע, ערימת גופנים, רדיוס וצל שדף משתמש בהם, ממיין אותם tokens בסיס, מצבי ערכת נושא והיקפי רכיבים, ומוריד אותם כ- W3C design-token JSON עבור Figma או כקובץ CSS.
מערכת עיצוב נכתבת לעתים רחוקות בצורה מלאה כמו שהיא מיושמת. הפלטה האמיתית, קנה המידה של המרווחים והטיפוס מופיעים בגיליונות הסגנונות - מפוזרים על פני מאפיינים מותאמים אישית, עקיפי נושא וערכים מקודדים קשיחים - ובנייתם מחדש ביד מ- DevTools פירושה לחיצה על מאות כללים והעתקת ערכים אחד בכל פעם.
הכלי הזה קורא את כולם בבת אחת. הוא מעביר כל גיליון סגנונות בעמוד, כולל אלו עם מקורות שונים שהדף עצמו אינו רשאי לבדוק, ואוסף כל מאפיין מותאם אישית, בתוספת משתנים המוגדרים בזמן ריצה בסגנונות מוטבעים. משתנים ב-:root הופכים tokens בסיס; אותם שמות שהוגדרו מחדש תחת בורר ערכות נושא כגון.dark, [data-theme="dark"] או prefers-color-scheme הופכים למצבים נפרדים; משתנים המוגדרים על רכיבים בודדים רשומים בהיקף. כל ערך נפתר דרך שרשרת ה- var() שלו, כך שאתה רואה את הצבע שמציג בפועל, לא רק הפניה למשתנה אחר.
כל token מסווג לפי הערך והשם שלו - צבע, משפחת גופנים, גודל גופן, משקל, גובה שורה, מרווח, רדיוס, צל, שיפוע, משך, הקלה או Z-index - והצבעים מנורמלים ל-hex, כולל הפורמטים לערוץ בלבד Tailwind ו- shadcn use ( 222 47% 11% trips -ו Bootstrap 's -rgb). לצד המשתנים המוצהרים, דגימות הכלים רינדחו אלמנטים כדי לדווח על הצבעים, ערימות הגופנים, הגדלים, הרדיוסים והצללים שבהם נעשה שימוש בפועל, עם ספירת שימוש - בדיוק מה שאתה צריך באתר שמעולם לא אימץ משתנים כלל.
ייצוא לוקח קליק אחד. Download tokens JSON שומר את פורמט W3C Design Tokens ( $value ו- $type), שהתוסף Tokens Studio מייבא לתוך Figma ומילון Style Dictionary הופך לקוד לכל פלטפורמה; מצבי נושא וערכים נצפים נשמרים בקבוצות משלהם, כך ששום דבר לא מתערבב. Download CSS כותבת את המשתנים בחזרה כגיליון סגנונות, כאשר כל מצב נמצא תחת הבורר המקורי שלו.
מאפיינים מותאמים אישית מכל גיליון סגנונות, כולל גיליונות צולבים שהדף לא יכול לקרוא, בתוספת משתנים שהוגדרו בזמן ריצה בסגנונות מוטבעים.
עקיפות תחת.dark, [data-theme] או prefers-color-scheme הופכות למצבים נפרדים, המוצגים זה לצד זה עם ערך הבסיס.
כל שרשרת var() נפתרת, וכל token מוקלד כצבע, גופן, גודל, מרווח, רדיוס, צל, משך זמן, הקלה או Z-index.
Hex, rgb, hsl, oklch, צבעים עם שם וערכי הערוץ בלבד Tailwind, shadcn ו- Bootstrap, כולם מנורמלים ל-hex.
צבעים, ערימות גופנים, גדלים, משקלים, רדיוסים וצללים שנדגמו מאלמנטים שניתנו, עם התדירות שבה כל אחד מהם מופיע.
W3C design-token JSON עבור Tokens Studio and 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+ כלי פיתוח לדפדפן שלך.
