טוקנים בעיצוב הם מקור האמת היחיד עבור החלטות חזותיות ברחבי המוצר. הם מקודדים צבע, ריווח, טיפוגרפיה ותנועה למשתנים עם שמות שצריכים רכיבים.
למה טוקנים חשובים
בלי טוקנים, שינוי בצבע המותג הראשי מחייב חיפוש מאות קבצים. עם טוקנים, עדכון משתנה אחד מתפשט לכל מקום — מכפתורים לאזהרות ועד לשורות ניווט.
טוקנים גם גשרו את הפער בין כלי עיצוב לקוד. מעצב נותן צבע בשם surface-brand ב-Figma; מפתח משתמש ב-var(--surface-brand) ב-CSS. הם מדברים את אותה השפה.
דוגמאות מעשיות
שקול רכיב שצריך רקע, גבול וטקסט. במקום לקודד קשות #1a56db, #e1effe, ו-#1e429f, הרכיב מפנה ל---color-primary, --surface-primary-subtle, ו---text-primary-strong. כשהמותג מתפתח, הפלטה משתנה — הרכיב לא משתנה.
קטגוריות טוקנים
צבע — פלטות מותג, סמנטיות ונטרליות
ריווח — סקלה קבועה מ-2px עד 64px
טיפוגרפיה — גדלי גופן, משקלים וגבהים של שורות
רדיוס — מפינות חדות ועד מעוגלות לחלוטין
צל — רמות Elevation לעומק והיררכיה
תנועה — עקומות ריכוך וצעדים של משך
רוב הציטוטים שנמצאו באינטרנט כנראה נוצרו על ידי AI.
