קורס מוקלט מבית הבצפר | מרצה זמין במייל | סוכן AI 24/7 | לומדים בזמן ובמקום שמתאים לכם

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

קורס פיגמה - מה לומדים ובאיזה סדר

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

1. יסודות הממשק - פריימים, שכבות, גריד, יישור ומרווחים. השלד שהכל יושב עליו.
2. טיפוגרפיה וצבע - הגדרת סגנונות פעם אחת ושימוש בהם בכל מקום.
3. אוטו לייאאוט - מסכים שמסתדרים מחדש לבד כשהתוכן משתנה. הפיצ'ר שחוסך את מרבית הזמן.
4. קומפוננטות ווריאנטים - רכיבים חוזרים שמתעדכנים בכל המסכים בבת אחת.
5. אב טיפוס - חיבור המסכים לזרימה לחיצה שאפשר לבדוק על אנשים אמיתיים.
6. מסירה למפתחים - הצגת מידות, צבעים ונכסים בצורה שמתכנת יכול לעבוד איתה.

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

למה פיגמה הפכה לתקן של התעשייה?

לא משום שהיא מציירת יפה יותר, אלא משום שפתרה בעיות ארגוניות שאף כלי לפניה לא נגע בהן.

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

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

ווייארפריים, עיצוב ואב טיפוס: שלושת השלבים

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

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

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

קומפוננטות ומערכת עיצוב

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

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

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

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

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

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

אב טיפוס לחיץ ובדיקות משתמשים

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

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

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

מסירה למפתחים והחיבור לאתר החי

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

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

למי מתאים קורס פיגמה?

הכלי חצה מזמן את גבולות מקצוע העיצוב:

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

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

פיגמה לבד או מסלול עיצוב מלא

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

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

תיק העבודות והעבודה הראשונה

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

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

שאלות נפוצות

האם צריך רקע בעיצוב כדי ללמוד פיגמה?

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

מה ההבדל בין פיגמה לפוטושופ?

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

כמה זמן לוקח לשלוט בפיגמה?

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

האם פיגמה מספיקה כדי לעבוד כמעצב ממשקים?

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