איך בונים אתר נכון בווייב קודינג מעיצוב בפיגמה

למה פיגמה מבולגנת הופכת לקוד מבולגן

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

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

את הסידור לא עושים ביד, קלוד עושה אותו בשבילכם

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

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

שלושה טיפים שחייבים להיות בקובץ שלכם לפני שקלוד בונה ממנו

תגיות H בשמות השכבות, כדי שגוגל יבין את מבנה העמוד

כשתגית ה-H יושבת בשם השכבה, למשל H2 | כותרת הסקשן, ההיררכיה מגיעה מוכנה לקוד, ומשם לגוגל ולקוראי מסך. הכלל: H1 אחד בכל עמוד בהירו, H2 לסקשנים, H3 לכרטיסים ושאלות, בלי לדלג רמה. ובאותה הזדמנות, Frame 1234 מקבל שם שמתאר את הסקשן.

תעבור על כל הפריימים בקובץ ותוסיף לשם של כל שכבת כותרת את תגית ה-H שלה, בפורמט "H2 | כותרת הסקשן".
H1 אחד בכל עמוד, בהירו. H2 לכותרות של סקשנים, H3 לכותרות של כרטיסים ושאלות.
תשנה גם שמות כמו "Frame 1234" לשמות שמתארים את הסקשן, ותקרא לסקשן שחוזר בכמה עמודים באותו שם בכולם.
לפני שאתה משנה משהו, תחזיר לי רשימה של מה שמצאת.

תכירו את Annotations, הפיצ׳ר של פיגמה שעושה סדר בכל מה שלא רואים בעיצוב

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

קלוד כבר לא מנחש התנהגות מתוך תמונה, אז קרוסלה שסומנה נבנית כרכיב אחד עם הגדרות. טיפ קטן שחוסך הרבה: כתבו ערכים ולא תיאורים. scale 1.05, 0.3s ease-out ייבנה בדיוק, ו״אפקט עדין״ ייבנה כמו שקלוד מבין אותו.

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

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

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

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

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

הסקיל עובר על כל הקובץ, ולא רק על שלושת הדברים האלה

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

שאלות נפוצות