Design Systems · Handoff · AI Delivery

עיצוב UX/UI ומערכות עיצוב שהקוד נבנה מהן

מערכת אחת. מוצר שלם.

כשהעיצוב מסודר, המוצר נבנה מהר ונראה טוב. וכשהקוד נבנה מאותה מערכת — המסירה מפסיקה להיות שלב בפני עצמו.

בואו נדבר על המוצר שלכם לראות את זה עובד

שלושה דברים שחוסכים חצי מהזמן

עבודה של פעם אחת. אחריה כל מסך חדש הוא הרכבה.

טוקן הוא שם לערך

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

רכיב נבנה פעם אחת

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

מסירה בלי ניחושים

המפתח פותח את הקובץ ורואה בדיוק מה לבנות. אין מדידה ידנית, אין שאלות חוזרות, אין פרשנות.

זו לא עבודה נוספת — זו אותה עבודה, פעם אחת במקום בכל מסך.

איך זה נראה בלי מערכת

ארבעה שלבים שמתחילים מחדש בכל מסך חדש.

מעצבים מסך

בוחרים צבע, ממציאים כפתור, קובעים מרווחים. הכל מאפס.

מעבירים לפיתוח

המפתח מודד בעצמו, משלים פרטים חסרים ושואל שאלות.

מתקנים סבב

מה שיצא לא זהה למה שעוצב, ואז מגיע עוד סבב.

עוברים למסך הבא

שום דבר ממה שנבנה לא נשמר, וכל המסלול חוזר.

וחוזרים לשלב 01 — בכל מסך חדש, מהתחלה.

חמישה שלבים, וזה בנוי

ארבעת הראשונים הם עבודת אפיון ועיצוב רגילה. החמישי הוא מה שהשתנה בשנה האחרונה.

מאפיינים

מי המשתמש, מה הוא בא לעשות, ואיך נראים המסלולים במוצר.

מסתכלים

עוברים על המוצר הקיים וסופרים מה חוזר: צבעים, מרווחים, כפתורים.

מסדרים

כל ערך מקבל שם, ומעכשיו יש מקום אחד לשנות בו דברים.

בונים

ספריית רכיבים עם כל המצבים, מוכנה לשימוש חוזר.

מוסרים

הקובץ מדבר עם הקוד, והמסכים נבנים מהמערכת עצמה.

שלב 05 הוא ההבדל: המסירה מפסיקה להיות תרגום, והופכת להרכבה.

קובץ אחד משנה את כל המוצר

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

סקירת התקדמות

פעיל

חיפוש

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

כל ערך נאכף — לא מומלץ

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