איך להכין קבצי פיגמה לפיתוח מושלם

הבעיה שאף אחד לא מדבר עליה

אחרי מאות פרויקטי המרה מפיגמה לקוד, אנחנו יכולים לומר בביטחון: 70% מהעיכובים בפיתוח פרונטאנד לא נובעים מבעיות קוד — הם נובעים מקבצי פיגמה שלא מוכנים לפיתוח. עיצובים יפהפיים שפשוט לא ניתנים לתרגום ישיר לקוד בלי שעות של ניחושים, שאלות הבהרה, וחזרות על עבודה.

המדריך הזה נכתב מנקודת מבט של מפתחים — אנחנו נסביר למעצבים בדיוק מה אנחנו צריכים כדי לכתוב קוד מושלם מהעיצובים שלכם, בלי שנצטרך לנחש כלום.

מוסכמות שמות — השפה המשותפת

שמות ב-Figma הם לא רק לארגון — הם הופכים ישירות לשמות קומפוננטות, props ו-CSS classes בקוד. מוסכמת שמות עקבית חוסכת שעות של תרגום:

• קומפוננטות: PascalCase — Button, CardHeader, NavigationMenu. בדיוק כמו שם קומפוננטה ב-React.
• Variants: camelCase עם ערכים ברורים — size=small/medium/large, variant=primary/secondary/ghost. אלה הופכים ישירות ל-props.
• שכבות פנימיות: שמות סמנטיים — icon, label, container — ולא Frame 47 או Group 12. מפתח שרואה Frame 47 לא יודע מה האלמנט הזה אמור לעשות.
• Tokens: קידומת לפי קטגוריה — color/primary/500, spacing/md, radius/lg. מבנה היררכי שמתמפה ישירות ל-CSS custom properties.

Auto-Layout — הבסיס לרספונסיביות

אם יש דבר אחד שמשנה הכל, זה Auto-Layout. עיצוב שבנוי עם Auto-Layout מתרגם כמעט ישירות ל-Flexbox/Grid בקוד. עיצוב עם מיקומים אבסולוטיים דורש ניחושים:

• כל frame צריך Auto-Layout. אין יוצאי דופן. אם אלמנט צריך להיות ממוקם אבסולוטית — הגדירו את זה במפורש עם Absolute Position בפיגמה, לא על ידי הזזה חופשית.
• Padding ו-Gap במקום ריווח ידני. כשמפתח רואה padding של 24px ו-gap של 16px, הוא יודע בדיוק מה לכתוב. כשהוא רואה אלמנטים עם מרחקים משתנים — הוא צריך למדוד כל אחד בנפרד.
• Fill/Hug/Fixed: הגדירו לכל אלמנט אם הוא Fill Container (יתפרס לרוחב), Hug Contents (יתכווץ לתוכן), או Fixed Width. זה בדיוק מה שמפתח צריך לדעת כדי לכתוב את ה-CSS הנכון.
• Min/Max Width: השתמשו בהגדרות min ו-max width בפיגמה כדי לתאר את ההתנהגות הרספונסיבית. אם כרטיס צריך להיות בין 280px ל-400px — הגדירו את זה. אחרת, המפתח ינחש.

Variants ו-States — תכסו את כל המצבים

כל קומפוננטה אינטראקטיבית צריכה variants עבור כל מצב אפשרי. רשימת המצבים המינימלית:

• Default: המצב הרגיל של הקומפוננטה.
• Hover: מה קורה כשעוברים עם העכבר. שינוי צבע? אנימציה? צל?
• Active/Pressed: המצב בזמן לחיצה.
• Focus: קריטי לנגישות — איך נראה ה-focus ring?
• Disabled: מצב לא זמין — צבע, opacity, cursor.
• Loading: אם רלוונטי — skeleton, spinner, או שינוי טקסט.
• Error: לשדות קלט — גבול אדום, הודעת שגיאה, אייקון.
• Empty: מה מוצג כשאין נתונים? Empty state הוא חלק מהעיצוב.

Design Tokens — שפת העיצוב כנתונים

Tokens הם הגשר בין עיצוב לקוד. בפיגמה, הם מוגדרים דרך Variables (או Styles בגרסאות ישנות יותר). כל ערך עיצובי צריך להיות token:

• צבעים: primitive tokens (blue-500) ו-semantic tokens (color-primary, color-error). הקוד צריך להשתמש רק ב-semantic tokens.
• ריווח: סולם עקבי — 4, 8, 12, 16, 24, 32, 48, 64. לא ערכים אקראיים כמו 13px או 27px.
• טיפוגרפיה: Text styles מוגדרים — heading-1 עד heading-6, body-large, body-default, body-small, caption. עם line-height ו-letter-spacing.
• רדיוסים: radius/sm=4, radius/md=8, radius/lg=16, radius/full=9999.
• צללים: Elevation levels — shadow/sm, shadow/md, shadow/lg.

כשכל העיצוב בנוי מ-tokens, המפתח ממיר אותם פעם אחת ל-CSS custom properties או Tailwind config, וכל הקומפוננטות מתעדכנות אוטומטית.

מה לתעד מעבר לעיצוב הויזואלי

הפיגמה מראה מה — אבל המפתח צריך לדעת גם איך:

• התנהגות רספונסיבית: מה קורה ב-breakpoints שונים? לא מספיק להראות desktop ו-mobile — תעדו את הלוגיקה. "הגריד עובר ל-2 עמודות ב-768px ולעמודה אחת ב-480px".
• אנימציות: תארו duration, easing, delay ו-trigger. "הכרטיסים מופיעים ב-stagger של 100ms, כל אחד עם fade-in + translateY של 20px, duration 400ms, ease-out".
• אינטראקציות: מה קורה ב-click, ב-scroll, ב-hover ממושך? האם יש tooltips? Popovers? Drawers?
• מקרי קצה: טקסט ארוך מדי, תמונה חסרה, רשימה ריקה, הרבה פריטים, שגיאת שרת. העיצוב צריך לכסות את כולם.

צ׳קליסט לפני Handoff

לפני שאתם שולחים את קבצי הפיגמה למפתחים, עברו על הרשימה הזו:

1. כל השכבות בשמות סמנטיים (לא Frame 1, Group 2)
2. כל הקומפוננטות עם Auto-Layout
3. Variants לכל מצב אינטראקטיבי
4. Design tokens מוגדרים (Variables/Styles)
5. סולם ריווח עקבי (לא ערכים אקראיים)
6. Text styles מוגדרים ומקושרים
7. Breakpoints מתועדים
8. אנימציות מתוארות (לפחות בהערות)
9. Empty states ו-error states מעוצבים
10. Dev mode מופעל עם annotations

קובץ פיגמה מוכן לפיתוח חוסך 30-40% מזמן הפיתוח. לא כי המפתחים עצלנים — אלא כי הם לא צריכים לנחש, לשאול ולחזור על עבודה. ההשקעה של כמה שעות בארגון הקובץ מחזירה את עצמה פי עשר.

רוצים שנסקור את קבצי הפיגמה שלכם ונתן פידבק מנקודת מבט של מפתחים? קבעו שיחת ייעוץ חינם.