GeekyAnts חשפה תוסף מבוסס React-Fiber המאפשר למפתחים למשוך רכיבי React חיים ישירות לקבצי Figma ניתנים לעריכה, ומבטיח round-trip אמיתי בין קוד לעיצוב. הכלי נלחם ב-"design-code drift" הגובר, שמאלץ צוותים לבצע עבודה מחדש בכל פעם ששינויי UI חוצים את הגבול שבין המעצב למפתח.

מדוע הגישה הישנה המתמקדת ב-DOM אינה מספיקה

כלי ייבוא מסורתיים סורקים את ה-HTML Document Object Model (DOM) המרונדר – הרשימה השטוחה של ה-<div>, <span> ותגיות אחרות בדפדפן. ה-DOM אומר לכלי שקיים כפתור, אך הוא אינו יכול לראות שהכפתור הוא מופע (instance) של רכיב משותף במערכת עיצוב (design system). אם תייצא עשרה כפתורים, תקבל עשר שכבות עצמאיות ב-Figma, שכל אחת מהן מנותקת מהרכיב המאסטר (master component). לאחר מכן, מעצבים נאלצים ליצור מחדש וריאנטים, להחיל מחדש אילוצים (constraints), ולבנות למעשה מחדש את מה שהקוד כבר יודע.

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

React Fiber כחוליה החסרה

React Fiber הוא מנוע ה-reconciliation הפנימי שעוקב אחר שמות רכיבים, היררכיה ומצב (state) לאורך רינדורים. בניגוד ל-DOM, Fiber שומר על המשמעות הסמנטית של כל חלק ב-UI. על ידי קריאת עץ ה-Fiber במקום פלט ה-HTML, כלי יכול למפות רכיב <Button> ישירות לרכיב Figma, תוך שמירה על הקישור ל-design token המקורי.

התוסף של GeekyAnts משתמש בתובנה זו. הוא קורא את React Fiber כדי להביא קוד חי לקבצי Figma ניתנים לעריכה. התוצאה היא סט של שכבות ששומרות על יחסי הווריאנטים המקוריים שלהן.

איך תהליך העבודה (pipeline) עובד

תהליך הייבוא מורכב משלושה שלבים נפרדים:

  • Variant Expander – סורק את קוד הרכיב עבור הגדרות מצב (hover, disabled, active) ומייצר סט מלא של וריאנטים ויזואליים. אלו נארזים כ-Figma Component Sets, כך שמעצבים יכולים להחליף מצבים מבלי לעזוב את הקובץ.
  • Layout Mapping – מתרגם חוקי CSS Flexbox לאילוצי Figma Auto Layout. זה שומר על התנהגות רספונסיבית ומאפשר למעצבים להתאים את המרווחים ישירות בעורך ה-UI.
  • State Triggering – מריץ נתיבי קוד הפותחים מודלים (modals), תפריטים נפתחים (dropdowns) או אלמנטים דינמיים אחרים ב-UI, מה שמבטיח שהתוסף לוכד כל תצוגה אפשרית.

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

המערכת האקולוגית המתהווה

GeekyAnts אינה לבד בניסיון לסגור את הלופ שבין עיצוב לקוד:

  • Anima מתמקדת בכיוון ההפוך, והופכת עיצובי Figma לקוד React או Vue.
  • Locofy.ai מוסיפה יצירה מונעת AI של קוד רספונסיבי מקובצי עיצוב.
  • Builder.io מציעה ייבוא HTML-to-Figma שעדיין מסתמך על ה-DOM, ולכן יורש את המגבלות שלו.
  • **