exm menu

 

exm menu

 

מה חדש ב-Adobe XD

אורי פלג | 27.07.2020
עדכונים ל-XD

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

 

עדכונים ל-XD – קודם כל, מה חדש?

העדכונים ל-XD המשמעותיים הקודמים, ששוחררו בחודש בינואר 2020, הביאו איתם שיפור וגמישות דרך פקודת הריפוד (PADDING), עדכון יוני ממשיך בדיוק מאותה הנקודה ומשפר אף יותר את הגמישות למעצבי הממשקים שבינינו.

להלן רשימת העדכונים החשובים מאז מרס 2020

  • ייצוא כל משטחי העבודה (ARTBOARDS)
  • שיפור בתהליכי שיתוף הקבצים

אפריל

  • עוגנים מקושרים לגלילה בתוך העמוד 
  • התאמת תיבת מלל לכמות המלל
  • ריבוי התנהגויות מטריגר אחד

מאי

  • תמיכה בעריכה משותפת גם בקבצים שאינם שמורים בענן
  • שיפור תצוגת קישורים בדפדפן

יוני

  • ’ערימות‘ – תרגום בעייתי במקצת לפקודה מצויינת – STACKS – הסבר בהמשך
  • גלילה פנימית לקבוצות- אופקית ואנכית
  • DESIGN TOKENS – הסבר בהמשך

יולי

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

 

STACKS בעדכונים ל-XD – יש ערימה של חבר‘ה על הדשבורד…

לא מדובר בדולרים וגם לא בזהב, אבל מדובר בפקודה ממש מצילת חיים שהובילה את רשימת בקשת הקהל בחודשים האחרונים באתר ה-USER VOICE של התוכנה (מעל 4000 בקשות למאפיין זה). אז על מה כל הרעש? כשאנחנו מעצבים ממשק נרצה גמישות מירבית בעבודה עם התוכן ומבנה הממשק. לדוגמא, במידה ואצטרך להעביר את אחד הרכיבים מקום, אשמח מאוד ששאר המרכיבים המשתייכים לאותה הקבוצה יגיבו ויתפסו את המקום שלהם מחדש מבלי שאצטרך להזיז כל אחד מהם ידנית. רציתם דוגמא, קבלו, שינוי סדר הצבעים של סימון השבילים, בתור התחלה…

 

 

וכאן אפשר לראות שינוי בתוך הקבוצה בסדר של המלל והאייקון

 

וכאן שינוי של הסדר בין קבוצות האייקונים

 

כל הקסם הזה מתאפשר על ידי הגדרות של קבוצות (Groups) ובכל קבוצה סימון של הגדרת Stack.

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

 

טיפ – החזיקו את מקש Shift כדי לשמור על יישור האובייקט ביחס למיקום המקורי.

טיפ 2 – הגדרות ה‘הערמה‘ אפשרית גם על ’רכיבים‘ (קומפטננטות).

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

 

גלילה פנימית אל מעבר לאופק בעדכונים ל-XD…

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

במפה נרצה תזוזה של המפה באופן חופשי

 

יש להגדיר על תמונת מפה:

גלילה פנימית מפה

 

גלילה של מוצרים לצדדים

יש להגדיר על קבוצת האוביקטים:

 

גלילה פנימית - קבוצת אוביקטים

 

תצוגה של סביבה עם נקודות ציון (כולל מעברי עכבר)

 

אלה ההגדרות:

גלילה פנימית גלילה פנימית

גלילה פנימית הגדרות

 

DESIGN TOKENS – דברו אל המתכנת בשמות

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

DESIGN TOKENS

 

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

סגנונות טקסט וקומפוננטות

 

גודל משטחי עבודה לרשתות חברתיות

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

גודל משטחי עבודה לרשתות חברתיות

 

ללמוד מהר

כעת תוכלו להגיע לכל ההדרכות וידאו ומקורות המידע הרשמיים של ~Adobe דרך התוכנה, יש איזור חדש בשם LEARN, אז המשיכו ללמוד כי התוכנה מתעדכנת כל חודש.

איזור LEARN

 

לסיכום

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

אנו מזמינים אתכם לסדנת adobe xd online שתקפיץ את יכולות העיצוב שלכם קדימה.

 

print

 

באותו נושא

  • נכתב ע"י
    XD
    במציאות בה אנו מאפיינים ומעצבים ממשקים מורכבים שדורשים התערבות של קוד מותאם- התקשרות עם מתכנתים וקיום שפה משותפת הם גורמים...
    31.12.2019 | כתב: אורי פלג
  • נכתב ע"י
    כנס ADOBE MAX שנערך לאחרונה הביא איתו מבול של עידכונים משמעותיים ביותר למעצבי הממשקים שבינינו. מעניין לבחון את המתח שנוצר...
    12.11.2019 | כתב: אורי פלג
  • נכתב ע"י
    חל עם העדכון של ספטמבר 2018 מאפשרת Adobe XD לטפל ולהציג התנהגות רספונסיבית שלאלמנטים ביחס למסך. מאפיין זה מהווה קפיצת...
    02.05.2019 | כתב: אורי פלג
-

שלח לחבר

מלאו את הפרטים הבאים:

    גללתם 1112 פיקסלים! רוצים שוב?

    להשארת פרטים
    -

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

    • רותם

    • ליהיא



      התקשר

      להשארת פרטים




      אתם מוזמנים למלא פרטים כאן ואנחנו נחזור אליכם