מה זה מעבר מעיצוב לקוד?

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

שתי גישות שמתבלבלות זו בזו

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

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

כמעט כל צוות שמנסה את הגישה הראשונה מגיע בסוף לשנייה.

למה המסירה לפיתוח ממשיכה להיכשל

הכשל אינו ברגע המסירה. הוא בכל מה שקורה אחריה.

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

שני הצדדים עובדים נכון. החיבור ביניהם הוא אדם שזוכר.

המגבלה של ה-API של Figma

כדאי לדעת לפני שמעריכים כלי כלשהו בתחום: נקודת הקצה של ה-API מסוג REST של Figma לקריאת משתנים זמינה רק בתוכניות Enterprise.

כלומר, כלי שמסנכרן משתני Figma דרך ה-REST API עובד בהדגמה על חשבון Enterprise ולא עושה כלום בתוכנית Professional שיש לרוב הצוותים. תוספים אינם כפופים לזה, כי הם קוראים משתנים מתוך הקובץ דרך ה-API של התוספים. אם אתם משווים כלי סנכרון, שאלו במה כל אחד מהם משתמש.

איך נראה לולאה שעובדת

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

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

איפה Flash DSM נכנס

Flash DSM משתמש בתוסף Figma כאמצעי ההעברה, ולכן הוא עובד בכל תוכנית של Figma. פרסום הופך ל-diff טוקנים שניתן לסקור, ו-diff מאושר יכול להיפתח כ-pull request.