פיגמה (Figma) היא כלי עיצוב שעובד בדפדפן ובאפליקציה, ומשמש היום ברוב פרויקטי האתרים לשלושה דברים: שרטוט מבנה העמודים, עיצוב המסכים הסופי, והעברה מסודרת של העיצוב למפתח. היתרון המרכזי שלה הוא שכולם עובדים על אותו קובץ חי — המעצב, הלקוח והמפתח — במקום להעביר תמונות וקבצי PDF הלוך ושוב.
מה עושים בפיגמה בפרויקט אתר
| שלב | מה נוצר בפיגמה |
|---|---|
| מבנה | Wireframes לכל סוג עמוד — ראו מה זה Wireframe |
| שפה עיצובית | פלטת צבעים, טיפוגרפיה, מרווחים, אייקונים |
| רכיבים | כפתורים, כרטיסים, טפסים, תפריט — כרכיבים שחוזרים על עצמם |
| מסכים | עיצוב מלא של כל תבנית בדסקטופ ובמובייל |
| אב-טיפוס | מעברים לחיצים בין מסכים, לבדיקה ולהצגה |
| העברה לפיתוח | מידות, צבעים, טקסטים וייצוא של קבצים |
רכיבים ומשתנים: הלב של קובץ טוב
קובץ פיגמה טוב הוא לא אוסף של מסכים מצוירים, אלא מערכת: כפתור מוגדר פעם אחת כרכיב (Component), וכל המסכים משתמשים בו. צבעים ומרווחים מוגדרים כסגנונות או משתנים. כשמשנים את הרכיב — הוא משתנה בכל המסכים.
זה מקביל בדיוק לאופן שבו אני בונה את הקוד: פלטת הצבעים מוגדרת כמשתני CSS, וכל רכיב באתר הוא חלק אחד בתבנית. כשהעיצוב בנוי כמערכת, המעבר לקוד נקי ואחיד, והאתר נשאר עקבי גם אחרי שנה של עדכונים.
העברה לפיתוח (Handoff) ו-Dev Mode
לפי התיעוד של פיגמה, Dev Mode הוא סביבת עבודה ייעודית למפתחים בתוך קובץ העיצוב: הוא מציג מידות ומרווחים, צבעים וסגנונות, קטעי קוד שנוצרים מהעיצוב, וייצוא של אייקונים ותמונות ב-PNG, JPG, SVG ו-PDF. אפשר גם לסמן מסכים כ"מוכנים לפיתוח" ולהשוות גרסאות. נכון לאוקטובר 2026, Dev Mode זמין בתוכניות בתשלום ודורש מושב מתאים.
חשוב להבין מה הקוד שפיגמה מייצרת לא נותן: הוא עוזר לקרוא ערכים, אבל הוא לא קוד אתר מוכן. אתר אמיתי צריך מבנה סמנטי, נגישות, התנהגות רספונסיבית ומחוברות למערכת ניהול תוכן — וזה עדיין עבודת פיתוח.
עיצוב בפיגמה לאתר בעברית
- לעצב מימין לשמאל מההתחלה. הפיכה של עיצוב שנעשה באנגלית יוצרת בעיות: אייקוני חצים, סדר כרטיסים, יישור של מספרים ותוכן מעורב. ראו פיתוח אתר מימין לשמאל.
- להשתמש בגופן שיהיה באתר. גופן עברי שקיים בפיגמה לא בהכרח זמין לשימוש ברשת, או שהרישיון שלו לא מתיר זאת. על בחירת גופן: גופנים עבריים לאתר.
- טקסט אמיתי. כותרות בעברית מתנהגות אחרת באורך ובשבירת שורה.
- מסכי מובייל לכל תבנית, לא רק לדף הבית.
מה לבקש לקבל בסוף הפרויקט
אם מישהו מעצב לכם אתר בפיגמה, ודאו שאתם מקבלים גישה לקובץ המקורי — לא רק צילומי מסך. הקובץ הוא הבסיס לכל שינוי עיצובי עתידי, ולכל מעצב או מפתח שיעבוד על האתר אחר כך. זה חלק מאותה שאלה רחבה של בעלות על האתר.
טעויות נפוצות
- עיצוב בלי רכיבים — כל כפתור מצויר מחדש, ובסוף יש עשרה גוונים של "אותו" כחול.
- מסכים בלי מצבים — אין עיצוב לשגיאת טופס, לתפריט פתוח במובייל, למצב ריק.
- עיצוב שלא בודק תוכן אמיתי — ואז שמות מוצרים ארוכים שוברים את הכרטיסים.
- ניגודיות לא נבדקת — מה שנראה עדין במסך המעצב לא עומד בדרישות הנגישות.
מעיצוב לקוד: מה קורה אחרי שהעיצוב מאושר
אחרי שהמסכים מאושרים, העיצוב הופך לתבניות קוד. בשלב הזה הקובץ משמש כמפרט: מידות, מרווחים, גופנים וצבעים נקראים ממנו, והרכיבים שהוגדרו בו הופכים לרכיבים בקוד. כמה דברים שצריך להחליט בשלב הזה, ושלא תמיד מופיעים בעיצוב:
- התנהגות בין רוחבי מסך. העיצוב מראה בדרך כלל מובייל ודסקטופ; הקוד צריך לעבוד גם בכל מה שביניהם — טאבלט, מסך צר, מסך רחב מאוד.
- מצבים. מעבר עכבר, פוקוס במקלדת, כפתור בזמן שליחה, שגיאה.
- תוכן משתנה. כותרת של שלוש מילים מול כותרת של שלוש שורות, כרטיס בלי תמונה.
- ביצועים. אפקטים, צללים וגופנים רבים שנראים טוב בפיגמה עולים בזמן טעינה באתר.
מה שעובד הכי טוב הוא דיאלוג קצר בין מי שמעצב למי שמפתח לפני שהעיצוב נסגר — כך שהעיצוב לא כולל פתרונות יקרים או איטיים במיוחד לבנייה בלי שמישהו שם לב לזה.
שאלות נפוצות
האם צריך פיגמה כדי לבנות אתר?
לא חובה, אבל לאתר עם כמה סוגי עמודים זו הדרך המסודרת ביותר להסכים על העיצוב לפני שכותבים קוד.
אפשר להפוך עיצוב פיגמה לאתר וורדפרס?
כן — כך אני בונה אתרי וורדפרס על תבנית ייעודית: העיצוב הופך לתבניות קוד, והתוכן מנוהל במערכת. ראו פיתוח וורדפרס.
מה ההבדל בין פיגמה לבונה אתרים?
פיגמה מעצבת — היא לא מפרסמת אתר. בונה אתרים מייצר אתר עובד, אבל לרוב עם פחות שליטה בקוד.
רוצים להפוך עיצוב לאתר מהיר ונגיש, או להתחיל מאפיון ועיצוב? בעמוד בניית אתרים מתקדמים מפורט איך אני עובד, ואפשר לשלוח לי פרטים.
אהבתם את המאמר?
