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

מה זה פיגמה ולמה משתמשים בה בעיצוב אתרים?

פיגמה, או Figma באנגלית, היא תוכנה לעיצוב ממשקים שעובדת בדפדפן, ולפי מרכז העזרה שלה יש לה גם אפליקציות למחשבי macOS ו-Windows. מעצבים משתמשים בה כדי לשרטט מסכים של אתרים ואפליקציות, לבנות ספריית רכיבים ולהכין הדמיה לחיצה של המעבר בין עמודים. הקובץ נשמר בענן, ולכן כל מי שקיבל הרשאה רואה את אותה גרסה בזמן אמת, בלי לשלוח קבצים במייל.

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

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

מה המונחים בקובץ פיגמה אומרים לכם כלקוחות?

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

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

מה זה פרוטוטייפ בפיגמה, ומה הוא לא מראה?

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

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

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

איך נראה עיצוב אתר בפיגמה בעברית?

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

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

• יישור: כותרות, פסקאות, טבלאות ושדות טופס מיושרים לימין
• סדר בשורה: לוגו, תפריט וכפתורים מסודרים לפי סדר הקריאה מימין לשמאל
• חיצים ואייקונים: חץ של הבא מצביע שמאלה, וחץ של חזרה מצביע ימינה
• טקסט מעורב: מספרי טלפון, כתובות אתר ושמות באנגלית בתוך משפט עברי
• גופן: הגופן בעיצוב תומך בעברית ויש לו רישיון לשימוש באתר

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

איך משאירים הערות על עיצוב בפיגמה?

לפי מרכז העזרה של Figma, כל מי שיש לו לפחות הרשאת צפייה בקובץ יכול להשתמש בתגובות, והאפשרות קיימת בכל המסלולים. כדי להגיב צריך חשבון Figma ולהיות מחוברים אליו. ההערה מוצמדת למקום מסוים במסך, ואפשר להשיב עליה, לתייג בה משתתף אחר ולסמן אותה כמטופלת. גם על פרוטוטייפ אפשר להגיב, במצב הצגה. הערה טובה חוסכת סבב תיקונים שלם, וכמה כללים פשוטים עוזרים:

• הערה אחת לכל נושא: כך אפשר לסמן כל אחת כמטופלת בנפרד
• הצמדה למקום המדויק: על הכפתור או הכותרת עצמם, ולא הערה כללית בפינת המסך
• הפרדה בין טעות להעדפה: מידע שגוי או חסר מתוקן תמיד, ועניין של טעם פתוח לדיון
• הסבר במקום פתרון: מה מפריע לכם ולמה, במקום להכתיב צבע או גודל
• גורם מאשר אחד: אם כמה אנשים בעסק מגיבים, החליטו מראש מי מכריע

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

מה לבדוק בקובץ העיצוב לפני שמאשרים?

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

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

איך עיצוב בפיגמה הופך לאתר אמיתי?

העיצוב הוא תוכנית עבודה, בדומה לתוכנית אדריכלית. לפי מרכז העזרה של Figma, נכון לאוקטובר 2026 Dev Mode זמין במסלולים בתשלום ובמסלול לחינוך, למשתמשים עם מושב מסוג Full או Dev. בתוכו המפתח בודק מידות, מרווחים ומאפיינים, רואה קטעי קוד לדוגמה, מוריד קבצים גרפיים, קורא הערות של המעצב, משווה בין גרסאות ורואה אילו חלקים סומנו כמוכנים לפיתוח.

אבל קטעי קוד לדוגמה הם לא אתר. המפתח מחליט איך כל רכיב מתנהג בכל רוחב מסך, ולא רק בגדלים שעוצבו. הוא בונה שדות עריכה כדי שתוכלו לעדכן תוכן בלי לשבור את העיצוב, מחבר טפסים, מוסיף תגיות SEO ונתונים מובנים, דואג שהאתר יעבוד במקלדת ובקורא מסך, ומקפיד שהעמודים ייטענו מהר. אצלנו כל עמוד נבדק לפני ההשקה ב-11 רוחבי מסך, מ-320 ועד 1920 פיקסלים, בדיוק כי העיצוב מכסה רק חלק מהרוחבים. על הגישה הזו כתבנו בעמוד בניית אתרים רספונסיביים.

לפי מרכז העזרה של Figma, בכנס Config 2025 הושק בגרסת בטא פתוחה גם כלי בשם Figma Sites, שמפרסם אתר ישירות מקובץ עיצוב. אם מציעים לכם אתר שמתפרסם ישירות מכלי עיצוב, שאלו את מה שהייתם שואלים על כל פלטפורמה: איפה האתר מתארח ובבעלות מי, איך מעדכנים תוכן, איך מוגדרות תגיות לחיפוש, איך מתבצעת ההנגשה, ומה קורה אם תרצו לעבור לפלטפורמה אחרת. השאלות האלה חשובות במיוחד באתר עסקי, שצריך לעבוד שנים ולגדול יחד עם העסק.

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