Design system, Dev ומה שבינהם

לכל אדם יש מטרה במה שהוא עושה. לפעמים המטרות מוגדרות היטב ולפעמים פחות מוגדרות… בכל אופן מטרה זה חשוב בחיים.

מאת: אתי לייפר שרביט | 6 דקות קריאה | 28.01.2024

המטרה שלי כמעצבת (חוץ מכמובן לחלוש על כל חנויות הוינטג׳ בעולם ולהפסיק להסביר מה אני עושה בחיים) – זה שמה שאני (והצוות כמובן) מתכננת, מחליטה ומעצבת יקרה באמת. לא המלצה, לא אולי, לא בצורה אחרת, יקרה – באמת. וזה לא רק העיצוב עצמו, זה לא רק שהכחול באמת יהיה הכחול זה שגם המבנה יהיה אותו מבנה, שההתנהגות תהיה אותה התנהגות, היכולות יהיו אותן יכולות ושאני אבין אם הכוונות שלי הם do-able ושאני לא חיה בלהלה-לנד.

רודמפ לתהילת עולם

אז כשאנחנו נגשים לבנות דיזיין סיסטם ועושים מלא מחקר ורואים את העולמות המושלמים של כל היפים והאמיצים. מטיריאל, אטליסיאן, קרבון, vibe (מנדיי החמודים שלנו) וכו׳, אנחנו מאמינים שגם אנחנו מסוגלים לבנות לנו את העולם המושלם הזה.  ואנחנו חדורי מטרה, אנחנו נעשה סדר בחברה שלנו ונזכה לתהילת עולם. עוד יכתבו עלינו במדיום, ויזמינו אותנו להרצות במיטאפ במיקרוסופט. אנחנו נסדר את כל האייקונים, אנחנו נעשה החלטות על הצבעים, נעשה מיגרציה למלא צבעים שלא באמת צריך או שאנחנו באמת לא יודעים מאיפה הם הגיעו לחיינו. ואפילו נעשה טוקנים, הרי מדברים על זה בכל מקום. אנחנו נגדיר את גדלי הפונטים שלנו ואת ההיררכיה שלהם, אנחנו נעשה גרידים (4 פיקסל גריד לשלטון!), נעשה מיפוי טוב טוב שישכחו מי זה קולומבוס. נבין בדיוק מי זה מי ואיפה כל דבר. נבנה לנו קומפוננטות מושלמות. אחת אחת. מובנות, מסודרות, נקיות, פשוטות ומתוחכמות כאחד. לא תהיה יותר חוסר אחידות. לא יהיו יותר שטויות. אנחנו נהיה חכמים. לא יהיה בזבוז זמן (חוץ מהרמות כוסית כמובן, סליחה בשביל מה אני שכירה?). אנחנו ניקח את הבאטן-מיין שלנו ואנחנו נתקע דגל בפסגת ההימליה. זה כפתור שאין שני לו (חוץ מסקונדרי : ) יש לו טוקנים! ויש לו גם פוקוס מוגדר היטב – כן פוקוס. יש לו מינימום ומקסימום, יש לו גדלים רחמנה ליצלן, יש לו דוקומנטציה שלא נראתה. לא פספסנו אף ״דונט״ ואת כל ״הדוז״ עשינו. יש לו אפילו מיני אנימציה של הובר מובנת בקומפוננטה. מצבי הקצה מוגדרים לו, יש מיפוי לכל השימושים בכל המסכים, יש לו אפילו היסטוריה, יש לו אפילו תיעוד של המיגרציה. ממש כמו שעושים ללוגואים של חברות גדולות – תציצו רגע מה קרה ללוגו של חברת לגו (סופר קול) והבאטן-מיין שלנו הוא לא סתם נקרא ככה- הוא בניימינג בדיוק לפי סביבת הפיתוח. אני ראיתי במו עיני. אני הסתובבתי שם. ומבלים מלא זמן, בקטע טוב כמובן, ובונים הכל יפה יפה. חצי שנה שאנחנו מחליטים החלטות ועומדים מאחוריהם. נפגשים עם הפיתוח פעם בשבוע, להבהיר, להבין , לדבר ולהראות. אפילו רשימת צבעים קיבלנו מהם.

הרודמפ והחיים עצמם

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

ועשינו דוקומנטציה ועברנו עליה יחד.

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

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

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

צריך הגדרת תהליכים בחיים

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

צריך תקשורת בחיים

ראינו, חקרנו והסכמנו על סכמה מסוימת לכתיבת הטוקנים שלנו. קיבלנו עליה אישור. יצרנו קומפוננטה ובמשך חצי יום יצרנו גם את הטוקנים שלה. וכך לעוד עשר קומפוננטות בסיס. לאחר חצי שנה של ״כן עם הראש״, התברר שהפיתוח יישמו אחרת את הטוקנים או בעצם לא יישמו בכלל. החמישה ימים האלה שבילינו בלעשות טוקנים לאותן קומפוננטות היו יכולים להיות מנוצלים למשהו אחר. זה בסדר גמור שהפיתוח לא עובד תמיד בדיוק כמונו, זה רק צריך להיות ברור ומוגדר, מה ההשלכות? מה הפעולות שאנחנו כן עושים מצד העיצוב ששווה לעשות אפילו שהן עוזרות רק לעיצוב? ואולי פעולות שעכשיו לא, אבל בעתיד כן יכולות לעזור לפיתוח. שווה להגדיר מה ה definition of done של קומפוננטה לא? איזה תענוג זה יהיה כשתרד הדרישה בחברה לעשות גם dark theme פתאום וזה יקח לנו רק כמה ימים (ולא שנה כמו שחשבו). ואחר כך בבניית הפלואים כל מסך ומסך פשוט יהיה לחיצת כפתור למעבר בין ה themes. כמה זמן זה לחיצת כפתור? בין שניה לשניה וחצי – ללקק את האצבעות.לכן, אם מתקשרים, מודעים למגבלות ומשקיעים בהגדרות – באמת שאפשר לייצר משהו נפלא. וגם אם הוא כמעט נפלא, זה במודע. אנחנו יודעים איפה בדיוק המקומות הנכונים להשקיע כדי שזה יהיה נפלא בדיוק עבורנו.

תהיו מוכנים

אנחנו נשמע הרבה: ״אה לא חשבתי שזה יעניין אתכם, אבל מה זה משנה לכם? אבל זה ענייני פיתוח, לא רציתי לשעמם אתכם״ וכו׳. ואנחנו נענה: ״אז איך אתם כן עושים את זה אצלכם? אפשר לראות? לא זה לא ישעמם אותי, להיפך!״ (חיוך) ״אז רגע התשתית היא במטיראל ועל זה פלטר, תוכל ממש בכמה דקות להראות לי מה זה אומר?״

כשאנחנו נצעד יחד אל השקיעה, היא תהיה מוגדרת היטב, אחוז אופסיטי וטוקן לצבע (bg.sunset-primary). והשקיעה של היום אחרי תהיה פשוט בלחיצת כפתור. כדי שישאר לנו מספיק זמן לוויקלי, לדיילי ולהאוורלי. צ׳ירז!

Design System Maturity Level Survey

גלו מה רמת הבשלות של הדיזיין סיסטם שלכם

סושיאל

לקהילת DesignOps Israel בפייסבוק

יצירת קשר

hello@desops.co.il

לקבלת תכנים ועדכונים וספאם שאנשים אוהבים :)


by