לא צריך 200 קומפוננטות ביום ראשון. Design system מתפתח. הנה המסגרת שאנחנו עוברים איתה בכל פרויקט.

Foundation – מה חייב להיות ביום 1

Typography: 3-4 sizes (H1, H2, body, small). Font family (בפרויקטים שלנו: Varela Round לעברית, Roboto ללועזית).

Colors: primary, secondary, background, text (dark + light), errors, success. 6-8 צבעים בסה”כ.

Spacing scale: 4px base (4, 8, 12, 16, 24, 32, 48, 64). לא לזרוק ערכים שרירותיים.

Icons: ספריה אחת בלבד (Lucide, Heroicons). לא לערבב.

Components – איך לבחור מה קודם

מה שחוזר על עצמו. Button. Input. Card. Header. Footer. אלה 5 הקומפוננטות הראשונות.

אל תבנו modal אם יש modal אחד באתר. חכו ל-3.

Documentation

Storybook: standard לפרויקטים גדולים. Interactive, isolated, testable.

אלטרנטיבה קלה: Figma library + README ב-repo. מספיק לפרויקטים קטנים.

Tokens

Design tokens = הגשר בין Figma ל-CSS/React. במקום ‘blue-500’ – ‘–primary’. משנים ב-tokens – משתנה בכל מקום.

כלים: Style Dictionary (Amazon), Figma Tokens plugin, או manual עם CSS variables.

Growth

Component לא נכתב עד שיש 3 שימושים. אחד = לא צריך. שניים = maybe. שלושה = component. זה חוסך overhead.

Naming: BEM או styled-components או Tailwind – העיקר consistency. לא לערבב 3 גישות.

מבוסס על פרויקטים אמיתיים

המדריך הזה מבוסס על עבודה עם:

• FitIL
• Podd

קריאה נוספת

אם המדריך הזה עזר לכם, אולי תרצו לקרוא גם על עיצוב UX/UI – המדריך המקיף שלנו לתחום.