בניית מערכות יציבות וגמישות במוצרים דיגטליים מעסיקה את רוב התעשייה, ומעניינת אותי במיוחד. אנחנו רואים בשנים האחרונות עלייה במוצרים ומתודות שעוזרים למעצבים, למפתחים ולכל מה שבינהם לייצר מערכות טובות יותר ולתקשר אותן אחת עם השניה.
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.
יש עוד המון מהיכולות של פיגמה ששוברים את קיר הזכוכית בין מעצבים למפתחים ומאפשרים לעצב ולבנות אתרים מרהיבים, מורכבים ועמידים שלא נשברים תחת פשרות בשלבי העבודה שונים.
אם מעניין אתכם ללמוד קצת על הקשר שבין פיתוח ועיצוב, קוד למעצבים, עיצוב למפתחים וכל דבר אחר אתם מזומנים לדבר איתנו.
אהבתם? רוצים גם? דברו איתנו
תפריט נגישות פתווח
תפריט נגישות
הצהרת נגישות
אנחנו בW4 מחויבים לספק באתר תוכן נגיש לקהל הרחב ככל שניתן, ללא כל קשר לטכנולוגיה בה נבנה האתר. אנחנו פועלים לעדכן ולהטמיע את כללי הנגישות ככל שניתן בהתאם לעקרונות תקן הנגישות. האתר עומד בהתאם לדרישות הנגישות לרמה 2 (AA) של ארגון W3C . בקישורים תמצאו פירוט התנאים בהם עומד האתרבעברית ובאנגלית. בנוסף האתר נבנה לפי התקן של W3C ל- CSS ו- HTML האתר מותאם לתצוגה בדפדפנים המובילים.
מבנה האתר והתאמות נגישות
תכני האתר כתובים באופן מסודר והיררכי. במידת הצורך קיימים הסברים לצד התוכן.
לכל התמונות באתר יש הסבר טקסטואלי חלופי (alt).
איזורי הפוקוס מסומנים באופן ברור.
חוקי ARIA
באתר זה הוטמעו חוקי ARIA העוזרים לפרש את תוכן האתר בצורה מדויקת וטובה יותר, עבור קuראי מסך, והוטמעו הודעות והתראות יחודיות לפריטים אנטראקטיבים שונים (פופ-אפים טפסים וכו’)
תפריט נגישות
באתר קיים תפריט נגישות ייעודי. ניתן לפתוח אותו בלחיצה על האייקון . דרך התפריט ניתן לעצור אנימציות, להגדיל קונטרסט, להדגיש קישורים ולשנות את גודל הפונט.
נתקלתם בבעיה? ספרו לנו!
באתר זה הושקעו מאמצים רבים על מנת להפוך אותו לנגיש ושימושי עבור כלל הגולשים. אנחנו משתדלים לשמור ולתחזק את האתר ברמה הטובה ביותר. במידה ומצאתם ו/או נתקלתם בקשיים בגלישה באתר, אל תהססו לדווח לנו לכתובת המייל: assaf@thew4.co. אנחנו נטפל בבעיה ונחזור אליכם בהקדם עם פרטים על טיפולה.