מעיצוב לפיתוח

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

Figma הביאה את הבשורה של קוד למעצבים (סוג של), עם היכולות שלה. נוסיף לזה הבנה בסיסית (מאוד) של איך עובד ה-web ואפשר יהיה באמת לשחרר ב-handoff, במקום למשוך כל אחד לצד שלו, כי תכלס, העבודה הכי מורכבת (ומתגמלת) היא עם אנשים, ובגלל זה אנחנו צריכים ללמוד אחד את השפה של השניה.

מבלי לשכוח ש-Figma לא צעדה לבד (Sketch, XD ועוד), לדעתי היא הכלי המוצלח ביותר שיש היום לעיצוב מוצרים דיגיטליים. אחד היתרונות הבולטים של Figma הוא שצורת הבנייה של הרכיבים מדמה בצורה טובה את הצורה שבה כותבים קוד ב-web, ויכולה לקרב לבבות בין מעצבים למפתחים.

אז בואו נצלול קצת פנימה למה זה אומר.

משתנים/Variables

אחד הדברים שתפסו את תשומת ליבי בתור מפתח שמגיע מעולם העיצוב היה עקרון במדעי המחשב שנקרא separation of concerns – הפרדה של קוד תכנות לחתיכות נפרדות, כך שכל חלק אחראי על משהו אחר וכולם יחד מרכיבים את התוכנה עצמה. יש לעקרון הזה הרבה יתרונות, כמו האפשרות להשתמש כמה פעמים בכל רכיב (reuse), לאפשר תחזוקה ושינוי לכל אחד מהרכיבים בנפרד (maintenance) ועוד כל מיני דברים.

אפשר לראות את זה גם בעולם העיצוב, במיוחד במוצרים דיגיטלים. מושגים כמו Atomic design, style guide, design system עפים באוויר. אני אתייחס לכמה מתודות בסיסיות שמדגימות איך אפשר לקחת את החשיבה הזאת וליישם אותה בעבודה עם Figma.

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

צבעים

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

זאת אחת ההחלטות הראשונות שכדאי לעשות שמתחילים לעצב מוצר, וגם אם היא משתנה, זה לא ביג דיל כי משתנה אפשר לשנות! (הבנתם? משתנה -> לשנות ????).

בדוגמא אפשר לראות איך פלטה פשוטה, מתרגמת את עצמה בקלות למשתנים ב-CSS.

טיפוגרפיה

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

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

בדוגמא אפשר לראות סטיילים למובייל ודסקטופ.

Auto layout

אחד הפיצ'רים המשמעותיים של Figma הוא ה-Auto layout. הוא מאפשר בניה של רכיבים מורכבים ועמידים ומכיל בתוכו הרבה אפשרויות. היופי ברובן הוא שהן בונות את הרכיב בצורה שאפשר לתרגם אותה בקלות לפיתוח. 

אני אתייחס כאן לשני שימושים עיקריים ב-Auto Layout.

Spaces

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

למה זה טוב?

קודם כל עקביות (Consistency), חוקים זה טוב! (במידה ????).

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

בדוגמא כאן אפשר לראות הגדרה של מרווח קבוע בין רכיבים ב-Auto Layout, ואיך זה נראה ב-CSS:

Space between

יתרון גדול של ה-Auto Layout הוא ההקבלה ל-CSS flex  – אחד הכלים היותר שימושיים לבנייה של לייאאוט דינאמי ורספונסיבי ב-web.

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

בדוגמא כאן אפשר לראות איך אפשר לקבוע מרווח בין 2 אלמנטים שעטופים באלמנט נוסף עם Space between  ואיך זה מתורגם בקלות לקוד עם CSS flex.

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

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

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