מה זה טוקן עיצוב?

טוקן עיצוב הוא ערך בעל שם שמחזיק החלטת עיצוב אחת, כמו צבע, יחידת מרווח או גודל גופן, כך שאפשר לעשות בה שימוש חוזר בכלי העיצוב ובקוד במקום לכתוב אותה ידנית בכל מקום מחדש.

למה בכלל לתת שם לערך

חשבו על הצבע של הכפתורים הראשיים. כשכותבים אותו ישירות הוא מופיע כ-#2563EB בגיליון סגנונות, כשדה הקסדצימלי במילוי ב-Figma, וכמחרוזת במה שמתכנת הקליד בשבוע שעבר. שלושה עותקים, בלי שום קשר ביניהם.

כטוקן הוא מופיע פעם אחת, תחת שם:

--color-action-primary: #2563EB;

כל השאר מפנה לשם. משנים את הערך פעם אחת וכל השימושים משתנים. העקיפה הזאת היא כל הרעיון, וכל השאר בנוגע לטוקנים נגזר ממנה.

מה טוקנים בדרך כלל מכסים

צבע: פלטות, סולמות ותפקידים סמנטיים כמו רקע, מסגרת, טקסט ומצבים
טיפוגרפיה: משפחות גופן, גדלים, משקלים, גובה שורה, מרווח בין אותיות
מרווחים: סולם עקבי, בדרך כלל על בסיס של 4px או 8px
רדיוס פינה ועובי מסגרת
צל ורום
תנועה: משכים ועקומות האצה
נקודות שבירה ומידות פריסה

טוקנים אינם משתנים

ההבחנה חשובה. משתנה CSS הוא מנגנון. טוקן עיצוב הוא החלטה שבמקרה באה לידי ביטוי דרך מנגנון כזה.

ההבדל המעשי הוא ניידות. טוקן קיים בנפרד מכל טכנולוגיה מסוימת, ולכן אותה מערכת טוקנים יכולה להיפלט כמאפייני CSS מותאמים, כקונפיגורציית Tailwind, כמשתני Figma, כ-Swift או כ-Kotlin. אם הוא קיים רק כשורת CSS, זה משתנה.

פורמטים

ה-Design Tokens Community Group, תחת ה-W3C, מפרסמת פורמט JSON שנועד לשמש חילופין משותפים בין כלים. הוא נותן לכל טוקן $value ו-$type:

{
  "color": {
    "action": {
      "primary": { "$value": "#2563EB", "$type": "color" }
    }
  }
}

האימוץ אינו אחיד אבל הולך וגדל, וזה הדבר הקרוב ביותר לפורמט חילופין ניטרלי בין כלי עיצוב לבין צינורות בנייה.

איפה Flash DSM נכנס

Flash DSM מייצר מערכת טוקנים מלאה מתוך פרומפט, כתובת של אתר, קובץ Figma או צילום מסך, ואז מייצא אותה כמאפייני CSS מותאמים, קונפיגורציית Tailwind, Tokens Studio JSON או משתני Figma.