פרק 39 - פרוטוטייפינג מהיר בעזרת פיגמה מייק - סער גיל מארח את נסטיה גולובוצקי

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

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

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

טיפים של נסטיה לכתיבת הפרומפט:

תתחילו בהסבר ברור על מה עושה המסך - שלב אחרי שלב.

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

התמקדו ב:

לוגיקה בין שדות

עדכונים אוטומטיים

מגבלות של ערכים, וולידציות

פורמט של שדות (שקלים / אחוזים / תפריט בחירה / מספר)

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

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

אין צורך לכלול חלקים שלא נבדקים - עדיף לשמור על מיקוד.

הבדילו בין שדות דינמיים (משתנים, ניתנים להזנה) לבין תכנים סטטיים.

אם מצרפים תמונה - ציינו מה רואים בה ואיך זה מתחבר למה שתיארתם.

ככל שתכתבו את הפרומפט הראשון בצורה מדויקת וממוקדת - התוצאה תהיה מדויקת יותר לפרוטוטייפ שאתם באמת צריכים.

תבנית פרומפט:

Assist in generating well-structured English prompt for Figma Make that clearly convey requirements for building interactive prototype based on my input.

# Instructions

•⁠ ⁠Accept a functional description of a screen from me.

•⁠ ⁠Use the provided information to compose a detailed prompt for Figma Make.

•⁠ ⁠Follow the structured format below to ensure clarity and completeness.

## Prompt Structure

1.⁠ ⁠The purpose of the form/screen:

[Describe what this screen is for – e.g. “A loan refinance form for bank agents.”]

2.⁠ ⁠Step-by-step user flow:

1.⁠ ⁠[What does the user do first?]

2.⁠ ⁠[What happens next? What fields are entered or selected?]

3.⁠ ⁠[Add more steps as needed.]

3.⁠ ⁠Behavior and dependencies:

•⁠ ⁠[Describe any fields that affect one another]

•⁠ ⁠[Mention logic or formulas.]

•⁠ ⁠[Specify constraints or allowed ranges.]

4.⁠ ⁠Input/output formats:

•⁠ ⁠[e.g., Currency in ₪, percentage in %, whole numbers only]

📎 I may also upload an image/mockup as visual reference.