1. וריאנטים/סטייטס (States/Variants) – מגיע בנובמבר 

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

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

2. חיבור רכיבים אינטראקטיביים לפרוטוטייפ – מגיע בינואר

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

3. עיצוב מקביל לקוד באמצעות 'אוטו-לייאוט' (AutoLayout) – מגיע בנובמבר

הכנסת 'אוטו-לייאוט' בשנת 2019 הביאה את כללי הפריסה לפיגמה. מעצבים כיום יכולים לבצע עדכונים לטקסט הכפתורים מבלי להתאים את גודל המסגרת באופן ידני ע"י שימוש ב'אוטו-לייאוט' מאפשרת להם ליצור בקלות רבה יותר ממשקים רספונסיביים. אבל פיגמה ידעו שיש להם עוד עבודה כדי לקרב את 'אוטו-לייאוט' עוד יותר לאופן שבו מודל ה- CSS ו- HTML פועלים ברשת. לשלב הבאה של 'אוטו-לייאוט' פיגמה מביאים ממשק משתמש פשוט וקל עוד יותר לשימוש, בתוספת תכונות חדשות המבוססות על כמה מהבקשות הנפוצות ביותר:
1. היכולת למתוח אלמנטים לאורך שני הצירים.
2. להגדיר ערכי Padding עצמאיים.
3. לבצע אופטימיזציה לרווחים.

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

4. ניווט בספריות באמצעות תפריט – Swap Instance – כבר לייב

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

5. העתק, הדבק וקוד באמצעות כרטיסיית 'Inspect' החדשה – כבר לייב

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

*ניתן למצוא את הכתבה המקורית בקישור כאן