פרוטוטייפ בפיגמה

איך פרוטוטייפ בנוי

עוברים ללשונית Prototype בסרגל הימני (או Shift E). כשבוחרים שכבה, מופיעה נקודה בקצה שלה. גוררים ממנה חץ אל מסך אחר, וזה חיבור (connection). פיגמה מכנה את החצים הכחולים האלה גם noodles. כל חיבור מכיל שלושה דברים: מה מפעיל אותו, מה קורה, ואיך המעבר נראה.

• Flow: רשת של מסכים מחוברים באותו עמוד. פיגמה יוצרת Flow ונקודת התחלה (starting point) כשמוסיפים את החיבור הראשון. בעמוד אחד יכולים להיות כמה Flows, למשל הרשמה ותשלום.
• Hotspot: האזור שעליו לוחצים, בדרך כלל כפתור או קישור.
• Destination: המסך או ה-Overlay שאליו מגיעים.

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

Triggers ו-Actions

ה-Action קובע מה קורה. הנפוצים: Navigate to (מעבר למסך אחר), Scroll to (גלילה לנקודה באותו מסך), Open overlay (חלון שנפתח מעל המסך, כמו תפריט או חלון דו-שיח), Change to (מעבר בין Variants של קומפוננטה), ו-Conditional (תנאי). אפשר גם לפתוח קישור חיצוני.

אנימציות ו-Smart animate

לכל חיבור אפשר לבחור סוג מעבר, כמו Dissolve, Move in, Push או Slide, את הכיוון, את עקומת התאוצה (easing או spring) ואת המשך, בין 1 ל-10,000 אלפיות שנייה.

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

• השמות של השכבות והמקום שלהן בהיררכיה צריכים להתאים בשני המסכים. כשזה לא קורה, השכבה פשוט לא מונפשת.
• שכבות עם צל חיצוני או פנימי (drop shadow, inner shadow) לא נתמכות, ופיגמה מחליפה את המעבר ב-Dissolve.
• Smart animate לא נתמך בפתיחת Overlay, כי פיגמה מתייחסת ל-Overlay כמסך חדש. במעבר בין שני Overlays עם שכבות תואמות הוא כן עובד.
• בעברית: אם מסך נכנס מהצד, כדאי לבחור כיוון שמתאים לקריאה מימין לשמאל. למשל, מעבר קדימה שנכנס משמאל ומעבר אחורה שנכנס מימין.

קומפוננטות אינטראקטיביות ותנאים

קומפוננטה אינטראקטיבית: בונים את האינטראקציה פעם אחת בין Variants של אותו Component set, וכל עותק בעיצוב כבר מגיע איתה. הדוגמה הקלאסית היא כפתור עם חיבור On hover מסוג Change to בין מצב Default למצב Hover. כך לא צריך לבנות מסך נפרד לכל צ'קבוקס או מתג. היכולת זמינה בכל התוכניות. קומפוננטות ו-Variants הם תנאי מוקדם.

Multiple actions ו-Conditionals: אפשר להוסיף כמה פעולות לאותו Trigger, והן רצות מלמעלה למטה. עם Conditional כותבים תנאי (If) ובוחרים מה קורה כשהוא מתקיים ומה קורה אחרת (Else). בשילוב עם Variables אפשר לבנות עגלת קניות שסופרת פריטים או טופס שמציג שגיאה. היכולת הזו זמינה ב-Professional, Education, Organization, Government ו-Enterprise, ולא בתוכנית החינמית.

מציגים ומשתפים

1. פותחים תצוגת הצגה לוחצים Present בסרגל הכלים, או Cmd Option Return ב-Mac ו-Ctrl Alt Enter ב-Windows.
2. מנווטים חץ ימינה, רווח או N למסך הבא, חץ שמאלה לקודם, R כדי להתחיל מחדש.
3. בוחרים קנה מידה בתפריט האפשרויות יש Actual size, Responsive, Fit width ועוד. Z מחליף בין האפשרויות.
4. משתפים כפתור השיתוף בתצוגת ההצגה נותן קישור. אם הסתרתם את הממשק (Hide UI), הקישור ישתנה, אז מעתיקים אותו מחדש.

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