קונבנציות שיום עקביות הן מפתח ליצירת דיזיין סיסטם יעיל ולניהול תקשורת יעילה מול הפיתוח. הן משתנות בין פריימוורקים ושפות, לכן חשוב להתייעץ עם צוות הפיתוח ולבחור גישת שיום שמתאימה לתשתית הטכנולוגית שלכם.
כדאי להשתמש במוסכמות סטנדרטיות: בחרו באותיות קטנות ללא רווחים והפרידו מילים באמצעות מקפים (kebab-case), קווים תחתונים (snake_case) או אותיות גדולות באמצע המילה (camelCase). לדוגמה, במקום "Surface Primary" כמו שמציג הדיפולט של פיגמה, הגדירו את הטוקן כ-surface-primary, surface_primary או surfacePrimary בהתאם לקונבנציות הקוד בפרויקט שלכם. זה יקל על הפיתוח וימנע טעויות בהעתקת השמות מהדב מוד.
לשיפור הארגון והחיפוש, בנו היררכיה לוגית בשמות הטוקנים שתשקף את תפקידם בממשק. הנה כמה דוגמאות נפוצות:
- טוקנים של צבעים: color-bg-primary, color-text-secondary
- טוקנים של טיפוגרפיה: font-size-lg, font-weight-bold
- טוקנים של ריווחים: spacing-md, spacing-inline-sm
- טוקנים של בורדרים: border-radius-md, border-width-sm
עקרונות לשיום טוקנים יעיל:
- תנו שמות ברורים וקצרים – השתמשו בשמות מתארים אך תמציתיים. במקום color-background-page-primary העדיפו color-bg-primary-light.
- הבחינו בין ערכים סמנטיים לגלובליים – הפרידו בין טוקנים גלובליים (color-blue-500) לבין טוקנים סמנטיים שמתארים את השימוש (color-primary).
- שמרו על עקביות בסדר המילים – שמרו על סדר עקבי, לדוגמה קטגוריה-סוג-ערך (color-text-primary) והיצמדו לסדר שבחרתם.
- העדיפו תיאור מאשר מספרים – במקום color-gray-1, color-gray-2, השתמשו בתיאורים מהותיים יותר כמו color-gray-lightest, color-gray-light, color-gray-medium.
- ציינו גדלים במילים ולא במספרים – העדיפו xs, s, m, l, xl על פני גדלים מספריים, מה שיקל על הרחבת סקאלות בעתיד בלי לשבור את הסדר הלוגי.
כל אלו לא רק יקלו על ניהול ואיתור הטוקנים, אלא גם ייצרו שפה משותפת ברורה בין מעצבים ומפתחים, מה שיפחית טעויות במהלך המימוש.
מהניסיון שצברנו 