Design System

למה צריך Design System?

• עקביות – כל כפתור/טופס/טבלה נראה אותו הדבר בכל המוצר
• מהירות – מעצב/מפתח לא צריך להחליט מחדש – יש סטנדרט
• איכות – הקומפוננטות נבחנו וחודדו מראש
• Onboarding מהיר – עובד חדש מבין מיד את מבנה העיצוב
• Scalability – שינוי בקומפוננטה = שינוי בכל המקומות

מרכיבים של Design System

1. Design Tokens

ערכים בסיסיים – צבעים, גופנים, מרווחים, גדלים. למשל: --color-primary: #E60000, --space-md: 16px. כאשר מעדכנים token – כל המקומות שמשתמשים בו מתעדכנים.

2. Foundations

• Typography – היררכיית טקסטים, גופנים, גדלים
• Colors – פלטת צבעים ראשית, משנית, ניאוטרלית, סמנטית
• Spacing – מרווחים סטנדרטיים (4px, 8px, 16px, 24px, 32px…)
• Iconography – קבוצת אייקונים אחידה
• Elevation – צללים, layer hierarchy

3. Components

Buttons, Inputs, Forms, Modals, Tables, Cards, Navigation, Alerts – כל אלה עם states שונים (default, hover, active, disabled, error).

4. Patterns

Templates של מסכים – Login screen, Empty state, Loading state, Error state. איך לחבר את הקומפוננטות במסכים מלאים.

Design Systems מפורסמים

• Material Design (Google) – הכי מפורסם, מקיף מאוד
• Apple Human Interface Guidelines – iOS/macOS
• Fluent Design (Microsoft) – Windows
• Ant Design – חזק בסין וב-B2B
• Polaris (Shopify) – E-commerce
• Atlassian Design System – Enterprise SaaS

איך בונים Design System?

1. אאודיט של UI קיים – מה יש, איפה חוסר עקביות
2. הגדרת Design Tokens ב-Figma Variables
3. בניית Foundations – צבעים, טיפוגרפיה, מרווחים
4. בניית קומפוננטות בסיסיות ב-Figma
5. תיעוד ב-Storybook או Zeroheight
6. שיתוף פעולה עם מפתחים – קוד parallel
7. Governance – מי מאשר שינויים, איך מוסיפים דברים חדשים

שאלות נפוצות

מתי מוצדק להשקיע ב-Design System?

כשיש מוצר שיהיה קיים לפחות שנה+ עם 5+ מסכים ו-2+ מעצבים. לפרויקט חד-פעמי קטן – זה overkill.

כמה זמן לוקח לבנות Design System בסיסי?

גרסה 1.0 סבירה: 4-8 שבועות. תלוי בגודל המוצר ובגמישות הקיימת.

מה זה Storybook?

Storybook הוא כלי open-source שמאפשר להציג ולהתנסות בקומפוננטות React/Vue/Angular בסביבה מבודדת. הפך לסטנדרט תעשייתי לתיעוד Design Systems ברמת הקוד.