בואו ניצור

Design System Upgrade for AI Era

Design System Upgrade for AI Era
מעבר משימוש ב Styles לשימוש ב Tokens & Variables

על השירות

אם יש לך Design System טוב שעדיין לא הותאם לעבודה עם AI או שאת.ה מתכננ.ת לבנות Design System מאפס, אז הגעת למקום הנכון.

אם ה Design System שלך זקוק לתחזוקה משמעותית ושיפור, אולי השירות היותר רלוונטי אליך הוא Design System Lifecycle.

 

המהפכה כבר כאן: Figma + MCP

האקו-סיסטם של Figma פתוח לגישה חיצונית באמצעות MCP (Model Context Protocol). פריצת הדרך הזו מאפשרת לכלי פיתוח מבוססי AI "להיכנס" ישירות לקובצי העיצוב ולמשוך הגדרות בצורה אוטומטית.

כבר היום יש אינטגרציה מובנית עם Claude Code, Cursor, Windsurf, VS Code, Android Studio, ServiceNow, Amazon Q, ועוד.

 

כדי למנף את היכולת הזו לבניה אוטומטית ומדויקת של ה Front End כל שצריך לעשות זה לעבור משימוש ב Styles לשימוש ב Variables & Tokens.

איך עושים את זה?

  1. הגדרת משתנים (Variables): יצירת טבלאות המכילות את הגדרות הבסיס (פונטים, ריווחים, עוביים וכו') כמשתנים ואת הערכים ששלהם שישמשו במערכת.
  2. בניית Design Tokens: שימוש במשתנים להגדרת רכיבי ליבה מעוצבים (כפתורים, כותרות וכו') המהווים את אבני היסוד לבניית המסכים.
  3. עיצוב המסכים ב Figma באמצעות ה Tokens: כמו שפעם קישרנו את הרכיבים במסך לסטיילים, כיום בונים אותו מ Tokens. למעשה שלב 2 ו 3 מתערבבים זה בזה כי תו"כ עבודת העיצוב של המסכים בונים Tokens בהתאם לצורך.
  4. אוטומציית Front-End: כאן נכנסים המפתחים ופלטפורמות ה AI שכותבים את הקוד של המסכים בעזרת ה-Tokens, כך הם יורשים באופן אוטומטי ומדויק את כל הגדרות העיצוב ישירות מהפיגמה.

 

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

 

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

 

אם עבדתם בצורה מקצועית ויש לכם Design System טוב (שמבוסס Styles כפי שהיה נהוג עד לא מזמן), כל שנותר לכם לעשות זה להכין טבלאות של משתנים (Variables) עם הגדרות העיצוב הבסיסיות כמו למשל פונטים, ריווחים, עוביים וכד'. לאחר מכן יש לבנות בעזרת המשתנים את רכיבי העיצוב הבסיסיים (Tokens) כמו למשל כפתור ברירת מחדל, כותרת ראשית וכד'. והשלב האחרון הוא בניית מסכי ה Front End בעזרת ה Tokens. בצורה זו כל המסכים יקבלו אוטומטית ובצורה מדויקת את כל הגדרות העיצוב.

 

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

 

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

היתרונות העיקריים:

הכנת ה Design System לפיתוח מבוסס AI

הדרך הנכונה לייצר אוטומציה בבניית ה Front End היא באמצעות MCP תוך שימוש ב Variables & Tokens בהגדרות העיצוב. כשהקוד נוצר אוטומטית מתוך ערכי העיצוב, העקביות המותגית היא כבר לא שאיפה – היא עובדה. כך, (כמעט) נעלם החיכוך בין עיצוב לפיתוח.

חסכון בזמן עיצוב

המרה התשתיתית העיצובית לעבודה עם Tokens & Variables עושים פעם אחת. התהליך דורש דיוק מירבי ולוקח זמן. גם לנו לקח מספר פעמים לפצח את השיטה. היום, אחרי שנה ומספר לא מבוטל של המרות מוצלחות, נוכל לבצע את זה עבורך מהר יותר ומדויק יותר, והמעצבים שלך יוכלו להמשיך במשימות העיצוב בהתאם ל Roadmap ולא יעצרו לטובת Design Debt.

חסכון בכסף ובתסכול

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

כל היתרונות של שימוש ב Design System

  • האצת Time-to-Market: קיצור דרמטי של זמני הפיתוח מרגע סיום העיצוב לעלייה לאוויר.
  • עקביות מוחלטת: שפה ויזואלית אחידה בכל חלקי המערכת, ללא "תקלות" מקומיות.
  • גמישות וסקלאביליות: שינוי של משתנה אחד או טוקן אחד מעדכן את כל המערכת (והקוד!) באופן מיידי.
  • לחברות שיש להן Design System מבוסס Styles – ורוצות להתחיל להשתמש בפלטפורמות פיתוח מבוססות AI לטובת ה Front End.
  • לחברות שהתחילו את התהליך וגילו שזה ארוך ומיגע ועוד לא הגיעו לתוצאה מספקת.
  • לחברות שיש להן מספר מוצרים ו/או מספר מותגים.
  • חברות שעתידות לעבור מיתוג מחדש.
  • למוצרים שתומכים במספר פלטפורמות.
  • לגופי פיתוח שלא רוצים לעצור כדי לטפל בתשתית וכן רוצים לאפשר למעצבים שלהם להמשיך לרוץ על המשימות של ה Roadmap.
  • לחברות שמעוניינות להאיץ תהליכי פיתוח ולייצר מערכת קונסיסטנטית וחכמה עם חוקיות ברורה.
  • לחברות שרוצות להקים Design System ולעשות זאת פעם אחת, טוב ומותאם AI.

למי זה מיועד?

  • ספריית רכיבים חכמה ב Figma, אשר מבוססת באופן מלא על Tokens & Variables. על פני השטח הספריה זהה לקודמת, אך מדובר בשינוי ארכיטקטוני מהותי:

 

    • במקום להתבסס על סטיילים היא מקושרת ל Tokens & Variables. תואמת ל Figma MCP ומאפשרת לפלטפורמות פיתוח מבוססות AI גישה מלאה לעיצוב.

 

    • ניהול משתנים היקפי (Full-Scale Variables) המגדירים את כל ה-DNA של המוצר:
      • Typography: ניהול היררכיית פונטים וגדלים.
      • Layout & Spacing: שימוש בטוקנים לריווחים (Paddings/Gaps).
      • Borders & Radius: הגדרות עובי קווים ועיגול פינות.
      • Dark & Light Modes: תמיכה מובנית במצבי תצוגה משתנים.
      • Responsiveness: הגדרות גמישות המותאמות למסכים ופלטפורמות שונות.

 

  • קבצי פיגמה של המסכים המעוצבים מוכנים לעידן ה AI: כלומר בנויים אך ורק על בסיס הספריה הנ"ל.
  • ניקוי וליטוש: כחלק מהמעבר, אנו נבצע שיפורים קלים ותיקוני בעיות בDesign System הקיים. אמנם המטרה המרכזית היא המרה טכנולוגית, אך התוצר הסופי יהיה נקי, מאורגן ומהודק יותר מהמקור.

תוצרים

התהליך שלנו

סיפור הצלחה

סיפור הצלחה

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

הפתרון: תשתית Design System מוכוונת AI. מהרגע הראשון, בנינו עבור ישקאר את ה-Design System על בסיס Variables & Tokens. המערכת הותאמה לעבודה עם ספריית הרכיבים Kendo UI וחוברה ישירות לתהליכי פיתוח חדשניים.

  • פיתוח אוטומטי: הודות להגדרות המדויקות ב-Figma, ה Front End של המערכת נבנה אוטומטית באמצעות Claude Code. ה AI "קורא" את הטוקנים והגדרות העיצוב ומתרגם אותם לקוד נקי ומסונכרן.
  • יכולת הרחבה עצמאית (Scalability): יצרנו עבור ישקאר תשתית של תבניות ורכיבים חכמים המאפשרים להם להמשיך ולפתח עצמאית את עשרות המסכים הנוספים של המערכת. התשתית מבטיחה שכל מודול חדש שייבנה ישמור על חוקיות העיצוב המקורית ללא צורך בליווי צמוד של מעצב לכל מסך ומסך.

 

יש לומר ביושר, היו חבלי לידה ולמדנו מהם המון. אבל

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

מה הלקוחות מספרים

טל רוזנפלד
מנהל מוצר
״

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

שירותי בריאות כללית
PMO
״

מעדכנים שעלינו לאוויר השבוע עם מודול התפריט החדש, והפידבקים מעולים!!! אצטט את המשתמשים: "וואו…אני חייב לומר שהמערכת נראית מעולה, סופר נוחה ועונה על כל הציפיות שלי"

איתוראן
PM
״

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

Lightbits
מנהל מוצר
״

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

אלביט
Dev
״

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

שירותי בריאות כללית
PMO
״

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

בנק דיסקונט
VP Product
״

סיימנו השבוע סדנת Design Sprint יוצאת דופן (יומיים עמוסים), בהנחיית חברת UI.
סדנה שמביאה לידי ביטוי סיעור מוחות משותף של אנשי ה-Bussiness, אנשי הפיתוח המעולים שלנו, ואנחנו, מנהלי המוצר.
תודה לכל אלה שלקחו חלק במאמץ וביריית הפתיחה המרגשת הזאת.

בואו נשמור על קשר

    contact form