מעצבת מסיימת להכין אתר לתערוכת צילום קהילתית. בעמוד הראשי יש גלריה ובכל צילום אפשר לפתוח סיפור קצר של היוצר. היא הכינה גם גרסת נייד וכפתור שמאפשר לשמור יצירות לביקור מאוחר יותר. בהדגמה הכול נראה משכנע. אבל מה בדיוק מוכן בשלב הזה: עיצוב שאפשר לדפדף בו או אתר שאנשים יכולים להשתמש בו גם בלי לפתוח את Figma?
השאלה נעשתה מבלבלת יותר מאז שנוספו ל־Figma כלים לפרסום אתרים וליצירת יישומים בעזרת AI. יש היום כמה מסלולים בתוך אותה סביבת עבודה והם אינם עושים את אותה פעולה. Figma Design משמשת לעיצוב ולפרוטוטייפ. Figma Sites מיועדת לבניית אתר ולפרסומו. Figma Make יוצרת קוד שמפעיל ממשק באמצעות שיחה ועיצוב כנקודת מוצא. כדי לבחור מסלול צריך להסתכל על מה שיקרה אחרי ההדגמה.
המסך נראה גמור אבל ההתנהגות עדיין יכולה להיות מדומה
פרוטוטייפ הוא דרך מצוינת לבחון סדר פעולות. אפשר לראות אם הקורא מבין איך לפתוח צילום ואיך לחזור לגלריה. אפשר לבדוק את מיקום הכפתורים ולגלות שכותרת מסתירה פרט חשוב. זו עבודה אמיתית שיש לה ערך גם לפני שהאתר מחובר למערכת כלשהי.
עם זאת, מעבר למסך שאומר שהיצירה נשמרה אינו מוכיח שנשמר מידע. ייתכן שהכפתור רק מפעיל מעבר מתוכנן. גם תצוגת רשימה אישית אינה מוכיחה שלכל אדם יש רשימה נפרדת. בפרוטוטייפ צריך להבחין בין מה שמדגים את הרעיון לבין מה שכבר מבצע את הפעולה בפועל. לא כל בדיקת עיצוב דורשת מערכת נתונים אבל כדאי לדעת מה בדיוק נבדק.
זה גם ההבדל בין שיתוף פרוטוטייפ לפרסום אתר. קישור לצפייה בעיצוב יכול לשמש לתהליך העבודה בלי להיות הכתובת שאליה שולחים את הקהל. אתר ציבורי צריך להתמודד עם כניסה ישירה לעמוד פנימי ועם מכשיר שלא השתתף בהדגמה. המבקר לא יודע איזה רצף לחיצות תוכנן מראש עבור המצגת.
ב־Figma Sites העיצוב מקבל עמודים שאפשר לפרסם
Figma Sites מאפשרת לקחת עיצוב ולבנות ממנו אתר רספונסיבי בתוך סביבת Figma. אפשר להעתיק מסגרות מקובץ Design ולהמשיך לעבוד על פריסת האתר. יש נקודות שבירה לרוחבי מסך שונים ורכיבים שיכולים לעבור בין גרסאות בהתאם לנקודת השבירה. יש גם אינטראקציות מוכנות ואפשרות להשתמש בשכבות קוד להתאמות נוספות.
העתקה אינה מבטלת את הצורך להבין את מבנה העיצוב. מסגרות עם Auto layout שומרות על סידור יחסי בין הרכיבים. אובייקטים שלא משתמשים בו עשויים לעבור למיקום מוחלט. בדוגמת התערוכה, כרטיס צילום שגובהו משתנה עם אורך הסיפור צריך להסתדר גם כאשר נוסף טקסט. מיקום שנראה מושלם עם שתי שורות עלול לחפוף לכרטיס הבא עם שש שורות.
גם חיבורי פרוטוטייפ אינם הבטחה שכל התנהגות תעבור ללא שינוי. רבים מהם מומרים לאינטראקציות מתאימות ב־Sites אבל קיימות אינטראקציות שאינן נתמכות. לכן עוברים על הפעולות החשובות אחרי ההעתקה. בודקים פתיחת תפריט וחזרה לגלריה ומוודאים שכפתור קישור אינו נשאר רק צורה צבעונית.
כשבונים רכיב רספונסיבי אפשר להתאים את שמות גרסאות הרכיב לשמות נקודות השבירה. כך גרסת Mobile יכולה להופיע בנקודת השבירה המתאימה בלי לבחור אותה ידנית בכל פעם. המנגנון עוזר לשמור על עקביות אבל אינו קובע עבורכם אם הסדר בנייד נכון. אולי תיאור הצילום צריך להופיע לפני פרטי המצלמה דווקא במסך הצר.
CMS משנה את הדרך שבה מעדכנים את התוכן
אחת היכולות המשמעותיות של Sites כיום היא מערכת ניהול תוכן מובנית. אפשר ליצור אוסף של פריטים עם שדות קבועים. בתערוכה אלה יכולים להיות שם היצירה ושם הצלם לצד תמונה ותיאור. במקום לשכפל עמוד ולתקן את הטקסט בכל עותק, מנהלים את המידע כאוסף שהעיצוב מתחבר אליו.
שלושה חלקים מרכיבים את השיטה. האוסף מחזיק את השדות והפריטים. רשימת CMS מציגה כמה פריטים באותו מבנה חזותי. עמוד CMS מגדיר את הפריסה של פריט יחיד ולכל פריט מתקבלת כתובת משלו. זה מתאים למצב שבו לכל צילום בתערוכה יש סיפור שאפשר לפתוח ולשתף בנפרד.
כדאי לתכנן שדות לפי המידע האמיתי ולא רק לפי מה שנוח להציג בכרטיס. אם יש תאריך צילום ותאריך הוספה לארכיון, אלה שני פרטים שונים. אם חלק מהיצירות כוללות סדרת תמונות, צריך להבין איך ייראה עמוד כזה ולא להניח שכל פריט מסתכם בתמונה אחת. מבנה תוכן ברור מצמצם תיקוני עיצוב חוזרים בהמשך.
אפשר גם לייבא אוסף מקובץ CSV. היבוא אינו שלב שבו מפסיקים לבדוק. כותרות עמודות ופורמט התוכן עשויים לדרוש התאמה. התחילו בכמה פריטים מייצגים לפני שמכניסים את כל הארכיון. פריט עם כותרת ארוכה ואחד עם שדה חסר ילמדו יותר מחמישה פריטים כמעט זהים.
שינויים בנתוני CMS נראים מיד על משטח העבודה אבל הציבור רואה את התוכן אחרי פרסום האתר. זה פרט חשוב למי שמחליף תיאור דקות לפני פתיחת התערוכה. בדקו את הכתובת שפורסמה ולא רק את מה שמופיע בקובץ. הפרדה בין עריכת התוכן לפרסום מאפשרת לעבוד על הגרסה הבאה בלי להניח שהיא כבר מוצגת לכולם.
Figma Make מתאימה לרגע שבו צריך לבדוק פעולה
נחזור לכפתור ששומר יצירות לביקור מאוחר יותר. כאן כבר לא מספיק להציג אוסף של עמודים. צריך להחליט מה יישמר ואיך הרשימה תחזור כשהאדם פותח את האתר שוב. Figma Make יכולה לקחת את העיצוב כבסיס וליצור ממשק שמגובה בקוד. אפשר להמשיך לשנות אותו בשיחה ולערוך את הקוד או פרטים בתצוגה.
ב־Make אפשר לצרף מסגרות ורכיבים מתוך Figma במקום להסתפק בצילום מסך. למסגרת יש מידע מובנה על העיצוב שיכול לעזור בתרגום שלו. עדיין צריך להגדיר את ההתנהגות שלא רואים בתמונה. צילום של רשימת מועדפים אינו מספר אם אפשר לשנות את הסדר שלה או מה קורה כשלוחצים פעמיים על אותה יצירה.
התחילו בהתנהגות קטנה שאפשר לבדוק. למשל, הוספת יצירה לרשימה והסרתה. אחר כך בדקו מה נשמר ברענון ומה קורה בפתיחה ממכשיר אחר. אם הרשימה צריכה ללוות אדם בין דפדפנים או להיות קשורה לחשבון, נדרשת מערכת נתונים מתאימה. Make מאפשרת להוסיף צד שרת לצורך שמירת נתונים ותהליכים כאלה. הוא אינו קיים רק מפני שהממשק כולל כפתור התחברות.
בשלב הבדיקה אפשר להסתפק בנתוני דוגמה. אין צורך להזין פרטים אישיים של מבקרים כדי לראות אם שתי רשימות נפרדות באמת נשארות נפרדות. המטרה היא להכיר את ההתנהגות של היישום לפני שמכניסים אליו מידע שאנשים יצטרכו להסתמך עליו.
הכלים לעריכת התצוגה ב־Make מתעדכנים בהדרגה. בקבצים חדשים יכול להופיע ממשק עריכה שונה מזה שבקובץ ישן. לכן הוראה מסרטון אינה תמיד תואמת למסך הנוכחי. מה שחשוב הוא למצוא את הרכיב שרוצים לשנות ולהבין אם השינוי נוגע רק לסגנון שלו או גם לאופן הפעולה. תזוזה של כפתור והחלפת פעולת השמירה אינן אותה משימה.
שלושה ניסיונות שמבדילים בין הדגמה לשימוש אמיתי
ביקור בלי מסלול הכניסה המתוכנן
שלחו למכשיר אחר כתובת של יצירה פנימית. פתחו אותה בלי לעבור דרך העמוד הראשי. בדקו אם התמונה והסיפור נטענים ואם ברור איך להגיע לשאר התערוכה. ביישום שנבנה ב־Make כדאי לחזור גם אחרי רענון. כך מגלים אם התוכן תלוי בבחירה קודמת שלא נשמרה בכתובת או במערכת.
תוכן שלא תוכנן בשביל העיצוב
החליפו כותרת קצרה בשם ארוך והכניסו תמונה אנכית במקום תמונה רחבה. הגדילו את הטקסט בדפדפן. בדקו אם משהו נחתך או נעלם מתחת לכפתור. אתר רספונסיבי צריך להכיל תוכן משתנה ולא רק להצטלם יפה בשני הרוחבים שהוכנו בקובץ. בדיקת רוחב ביניים חשובה לא פחות מצילום מסך של נייד.
פעולה שלא מסתיימת כפי שציפינו
ברשימת המועדפים בדקו מצב ריק וגם מצב שבו השמירה לא הסתיימה. האם הקורא מקבל הודעה שהוא מבין או שהכפתור ממשיך להסתובב? אם הפעולה עדיין מדומה, כדאי לדעת זאת בזמן הבדיקה ולא לגלות אחרי שהקהל התחיל להשתמש בה. ממשק עובד צריך להסביר גם מה לא קרה.
פרסום הוא החלטה נפרדת מהעיצוב
בשני המוצרים אפשר לפרסם תוצר בכתובת ייעודית של Figma ולחבר דומיין משלכם בכפוף לאפשרויות החשבון. שיתוף קובץ העבודה ופרסום התוצר הם פעולות שונות. ב־Make מי שנכנס לאתר הציבורי אינו מקבל בכך גישה לקובץ שבו הוא נבנה. את הרשאות שיתוף הקובץ יש לבדוק בנפרד.
ב־Sites יש נקודה שחשוב במיוחד להכיר: הפרסום כולל את כל עמודי האתר שעל משטח העבודה וגם עמודי משנה דינמיים של CMS. אין להניח שעמוד ניסוי לא יעלה רק מפני שהוא רחוק משאר העיצוב על המשטח. את החומר שלא מוכן לפרסום צריך להפריד בהתאם להתנהגות הנוכחית של הכלי.
בחנו את הגדרות האתר לפני הפרסום. כותרת ותיאור צריכים להתאים לתוצר והגדרות הגילוי בחיפוש צריכות לשקף את המטרה שלו. אתר לתערוכה פתוחה שונה מפרוטוטייפ פנימי. בדיקה שמצליחה לטעון עמוד אינה הוכחה שהוא כבר מופיע בגוגל. את ההבחנה בין נגישות התוכן לבין אינדוקס אפשר להכיר גם במדריך על בדיקת עמודים ואינדוקס באתרי Lovable. העיקרון שימושי גם כשעובדים בכלי אחר.
אחרי עדכון צריך לפרסם שוב כדי שהגרסה הציבורית תשתנה. כדאי לפתוח אותה בסיום ולעבור על הפעולה שלשמה בוצע העדכון. אם תוקן תיאור של יצירה, קוראים אותו באתר. אם תוקן תפריט בנייד, פותחים אותו בנייד. בדיקה ממוקדת כזאת שומרת על קשר ברור בין השינוי לבין התוצאה.
איפה WordPress נכנסת לתמונה?
קובץ Figma אינו תבנית WordPress וקוד שנוצר ב־Make אינו אוסף מאמרים בעורך וורדפרס. אפשר להשתמש בעיצוב כתוכנית לבנייה במערכת אחרת אבל עדיין צריך להגדיר בה תבניות תוכן ושדות ואת דרך העריכה. אפילו אם הכותרות והתמונות נראות זהות, מי שיעדכן את האתר יפגוש מערכת עבודה אחרת.
ב־Sites קיימת גם מגבלה מעשית: נכון לעכשיו אין אפשרות לייצא את קוד האתר כדי לפרסם אותו באחסון חיצוני. לכן לפני שבונים שם ארכיון גדול כדאי להחליט היכן הוא אמור להתנהל. אם המטרה היא להמשיך לערוך בוורדפרס, עדיף לתכנן את הבנייה סביב צורת התוכן שלה ולא להניח שפעולת העתקה תסיים את המעבר.
אין צורך לבחור לפי השם של הטכנולוגיה בלבד. תערוכה עם עמודי יצירות יכולה להתאים לזרימת עבודה של Sites ו־CMS. ניסוי ברשימות אישיות יכול להצדיק עבודה ב־Make. אתר שעיקרו פרסום שוטף במערכת קיימת עשוי להישאר בה. המדריך על בחירת כלי לבניית אתרים עם AI מרחיב את ההשוואה לפי העבודה שחוזרת ביום־יום.
שאלות שכדאי לפתור לפני שבוחרים מסלול
האם צריך Figma Make כדי לפרסם אתר שעוצב ב־Figma?
לא. Sites היא מסלול נפרד לבניית אתר ולפרסומו. Make רלוונטית כאשר רוצים ליצור ממשק שמגובה בקוד ולחקור התנהגות בעזרת AI. אפשר לבחור ב־Sites בלי לעבור דרך Make. הבחירה תלויה במה שהתוצר צריך לבצע ולא בכך ששני הכלים נמצאים באותה משפחה.
האם העתקה מ־Make חזרה ל־Design שומרת את היישום?
אפשר להעתיק תמונת מצב של תצוגת Make כשכבות עיצוב ל־Design. זה מאפשר לעבוד על המראה ולשתף את העיצוב עם אחרים. השכבות אינן העברה של מערכת הנתונים או של פעולות השרת. יש להבחין בין העברת ייצוג חזותי לבין המשך הפיתוח של היישום שעומד מאחוריו.
האם כל פריט באוסף CMS מקבל כתובת משלו?
כן, כאשר יוצרים עבור האוסף עמוד CMS ומחברים את השדות לפריסה שלו. לכל פריט מתקבל עמוד לפי אותו מבנה עם התוכן המתאים. רשימת כרטיסים לבדה אינה מחליפה את הגדרת עמוד הפרטים. אחרי פרסום האתר כדאי לפתוח כתובת של פריט ישירות ולבדוק שהתמונה והטקסט שלו מופיעים גם בלי לעבור קודם דרך הרשימה.
