מה חדש ב-XD
כבכל שנה באוקטובר מציגה Adobe בכנס השנתי של החברה את התכונות והמאפיינים החדשים בגירסאות החדשות של תוכנותיה ופיתוחים עתידיים ומהפכניים עליהם הם עובדים. בשבוע שעבר בכנס Adobe Max נחשפו שדרוגים מעניינים גם בתוכנת ADOBE XD. בהמשך לעדכון ששוחרר בספטמבר, מדובר בחידושים שבהחלט משדרגים באופן משמעותי את הכלי הנהדר שנועד עבור מעצבי ממשקים.
בקצרה – רשימת העידכונים
- אנימציה אוטומטית (Auto Animate) – ממש ככה, אלמנטים של ממשק ב-XD כעת מונפשים באופן יעיל וחכם, ללא ציר זמן (Timeline) או Keyframes, אנימציה שמבוססת על מעבר שבין צורות, גדלים, מיקומים ועוד… דוגמא בהמשך.
- מחוות גרירה (DRAG) – כעת מעבר ללחיצה על הפורטוטייפ ניתן גם לגרור אלמנטים ולבצע אינטרקציה התואמת יותר למסכי מגע. בשילוב עם אנימציה אוטומטית התוצאה לא פחות ממהממת! דוגמא בהמשך.
- סימבולים מקושרים – כעת ניתן ליצור קובץ ’מאסטר‘ לכל הסימבולים, בעת העתקת הסימבול לקובץ חדש הוא מקושר לקובץ המקור- עובדה המאפשרת שמירה על אחידות בעיצוב של מערכות מורכבות וכן שמירה על אחידות בין חברי צוות העיצוב העובדים במקביל. דוגמאות בהמשך.
- פתיחת מסמכי אילוסטרייטור – XD מאפשרת כעת לפתוח קובצי אילוסטרייטור שיצרתם, כמעט כל מאפייני הקובץ נשמרים בעת הפתיחה בתוכנה (למעט אפקטים מורכבים). האלמנטים הוקטורים שומרים על איכותם.
- ייצוא ל-After Effects – במידה ותרצו לייצר אנימציות הממחישות באופן מורכב יותר את האינטרקציה בממשק, XD מאפשרת כעת לייצא את משטחי העבודה בשלמותם, כולל את כל השכבות לתוכנת האפקטים המיוחדים ולהנפיש בה באופן גמיש ומורכב יותר.
- הפעלה בפקודה קולית – אשכרה עובד! אפשר לתת ל-XD (בפרוטוטייפ) פקודה קולית שתגרום לאינטרקציה, התוכנה יכולה גם לענות. שדרוג זה נותן מענה לתחום העיצוב חווית משתמש המבוסס דיבור (אלקסה, סירי, גוגל ועוד שירותים ומכשירים המגיבים לפקודות קוליות)!
- תוספים (Plug-Ins) – התוכנה מאפשרת כעת התקנת תוספים, במטרה להרחיב את יכולות התוכנה באמצעות כלים שאינם תוצרת Adobe. דוגמא בהמשך.
אנימציה אוטומטית (AUTO ANIMATE)
פקודת האנימציה האוטומטית מנסה לגשר ולהקל בדיוק על נקודת קושי זו. האנימציות אינן מורכבות אך בהחלט מאפשרות מגוון מייצג של התנהגויות בממשקים.
המרכיבים לבניית אנימציה הם לפחות שני משטחי עבודה (Artboards) שבהם ממוקמים אובייקטים בעלי שם זהה (שם שכבה זהה), עם שינוי באחד מהפרמטרים הבאים: גודל, מיקום, ציר, צבע, שקיפות ועוד. פקודת האנימציה מזהה אובייקטים (שכבות בפועל) בעלי שם זהה ומבצעת אנימציה אוטומטית בין שני המצבים השונים. לדוגמא:
בשני משטחי העבודה כל השכבות נושאות שמות זהים, אך האובייקטים עברו שינוי של מיקום, גודל או צבע וכו‘, פקודת האנימציה האוטומטית בשלב הפרוטוטייפ מאפשרת הגדרת מספר מרכיבים ברי עריכה כמו מה מפעיל אותה (Triger), סוג האנימציה (Easing) והמשך שלה.
את הפעולה הזו אפשר להפעיל לצורך מגוון המחשות, ממיקרו אינטרקציות ועד ליצירת אנימציות שלמות ופשוטות.
מחוות גרירה (DRAG)
לדוגמא:
בכדי להגיע לתוצאה זו כך נראות ההגדרות של שני משטחי העבודה:
סימבולים מקושרים
בחלון הסימבולים נקבל התראה כי הסימבול המקורי נערך ונוכל לבחור האם לעדכן את הסימבול לגירסה החדשה, או להשאיר את גירסת המקור. לחיצה עם לחצן ימני בחלון הסימבולים והאפשרות של העדכון תופיע לכם מול העיניים.
זה נראה ככה:
תוספים (PLUGINS)
שיתוף הפעולה של Adobe עם מפתחים שונים היוצרים תוספים והרחבות ל-XD מרחיב את יכולות התוכנה. אמנם בשלב זה עושה רושם שרוב התוספים לא משנים באופן דרמטי את אופן העבודה, אבל ראויים לציון שני תוספים עיקריים שיכולים בהחלט לסייע. שינוי גודל אותיות בלעז Change Case – לעיתים יש צורך בהחלפת מלל לטיני שהוקלד באותיות קטנות, בגדולות וההיפך, קביעת אות ראשונה גדולה בכל מילה וכדומה. התוסף Change Case מאפשר זאת ועוד. כל שצריך הוא להוריד את התוסף מחלון התוספים הממוקם בתפריט PlugIns > Discover PlugIns. חיבור לתוכן אמיתי מגוגל דוקס – תוספת זו מאפשרת כבר עכשיו לחבר תוכן אמיתי לעיצוב שלנו, עם יצירת מסמך גליון נתונים מבית Google ניתן לשייך כל תא בטבלה לאלמנט בעיצוב שלנו. התוסף מאפשר חופש בעריכת התוכן על ידי הלקוח ללא הצורך בהקלדת המלל בעצמינו. נראה יעיל ונחמד. עוד תוספים ששווה לבדוק – בדיקת ניגודיות של צבעים לנגישות (STARK), שילוב תמונות ממאגר UI FACES ועוד. נראה שאחד הכיוונים המעניינים הצפויים הם תוספים שמייצאים קוד לווב או אולי אפילו לנייטיב, אמנם עוד חזון למועד אבל מניסיון העבר זה בהחלט מעבר לפינה.
לסיכום