תשובה קצרה: מערכת עיצוב היא אוסף משותף של טוקנים, קומפוננטות בקוד וכללי שימוש, שממנו הצוות בונה כל מסך במוצר. צוות קטן צריך אותה מהרגע ששני אנשים או יותר מוציאים ממשק לאותו מוצר, או כשאותו כפתור קיים בשלוש גרסאות. לפני שהמסכים מתייצבים, מספיקים קובץ טוקנים וכמה קומפוננטות בסיס.
עיקרי הדברים
- שלוש שכבות: הטוקנים מחזיקים את הערכים, הקומפוננטות הופכות אותם לקוד, וההנחיות קובעות מה משמש איפה.
- תקן לטוקנים: קבוצת הקהילה של W3C לטוקני עיצוב פרסמה ב-28 באוקטובר 2025 את הגרסה היציבה הראשונה של הפורמט, 2025.10.
- מתחילים מספרייה: shadcn/ui או MUI כבר מכסות שדות, חלונות ותפריטים.
- RTL כבר בבסיס: מאפייני CSS לוגיים מאפשרים לאותה קומפוננטה לעבוד בעברית ובאנגלית בלי גיליון סגנונות נוסף.
ממה מורכבת מערכת עיצוב
טוקן הוא ערך עם שם, כמו color.text.primary. מפרט 2025.10 שומר טוקנים ב-JSON עם השדות $value ו-$type, ומונה את Style Dictionary, Tokens Studio ו-Terrazzo כמימושי ייחוס, כך שקובץ אחד מזין גם את Figma וגם את הקוד.
הקומפוננטות הן הכפתורים, השדות והחלונות בקוד, עם כל המצבים: ריחוף, פוקוס, שגיאה, טעינה. ההנחיות הן הכללים לידן: איזה כפתור ראשי, איך מנוסחת הודעת שגיאה. כאן נכנס גם מיקרוקופי בעברית למוצרי SaaS, ולפיצ׳רים של AI יש דפוסים משלהם, שמתוארים בעיצוב UX למוצרי AI.
נגישות זולה הכי הרבה בשכבה הזאת: חלון שמנהל פוקוס נכון מתקן כל מסך שפותח אותו, וזה עוזר לעמוד בתקן הנגישות הישראלי 5568.
מתי צוות קטן צריך מערכת עיצוב, ומתי זה מוקדם
| המצב | מה מספיק |
|---|---|
| מעצב אחד, מפתח אחד, מוצר שמשתנה כל שבוע | קובץ טוקנים והקומפוננטות שהספרייה כבר נותנת |
| כמה מפתחים שבונים מסכים במקביל | תיקיית קומפוננטות משותפת; בודקים מה קיים לפני שמוסיפים |
| אותה קומפוננטה בשלוש גרסאות, או מוצר שני על אותו בסיס | מערכת מתועדת עם אחראי, גרסאות ויומן שינויים |
מערכת שנכתבת מוקדם מדי מתעדת ניחושים. בשלב ה-MVP מקבעים טוקנים וקומפוננטות בסיס ומחלצים דפוסים כשהם חוזרים, כמו ברוב התוכנה לסטארטאפים.
