Composer

בשורה אחת#

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

הפריסה#

מה עושים כאן#

עמודים ופריימים#

למסמך יש עמודים; עמוד מחזיק פריימים (לוחות עבודה). זה ההבדל מ-Vectra, שמצייר על לוח עבודה אחד בכל פעם: Composer מיועד לסט מסכים או לסט כפולים.

שכבות, נכסים וקומפוננטות#

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

סדרו במדויק#

X, Y, W, H ורדיוס פינה, בתוספת יישור וחלוקה. Margins, Guides ורשת Baseline הם מתגים בסרגל הכלים: רשת ה-baseline היא מה שמיישר טקסט רב-עמודות על פני כפול.

טיפוגרפיה#

החלק שמצדיק את מקומה של Composer:

פרוטוטייפ וקוד#

הטאב Prototype מחווט מסכים יחד לזרימה לחיצה. הטאב Code מציג את העיצוב כקוד.

משתנים וסגנונות#

שני פאנלים שהופכים מסמך למערכת ולא לסט עמודים:

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

יחד עם Components, הם מה שהופך עיצוב מונחה-tokens: סביבת ה-DA של Vectra יכולה לייצא design tokens, ו-Composer הוא המקום שבו הם נמצאים בשימוש.

פרוטוטייפינג#

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

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

Dev Mode, מסירת העיצוב לקוד#

הטאב Inspect הוא החצי השני של כלי עיצוב: הוא קורא את הבחירה ומייצר עבורה קוד, על פני שלושה טאבי פלטפורמה.

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

ייצוא#

ייצוא ב-Composer הוא רשימת הגדרות, לא בחירה אחת: הוסיפו כמה, בחרו אילו להריץ, וכל הגדרה נבחרת מייצרת קובץ משלה במעבר אחד. כל הגדרה מכילה:

שני פרטים שהפאנל אומר במקום להשאיר לגילוי:

• רק PNG ו-SVG נושאים שקיפות. בחירת רקע שקוף על JPG היא הגדרה בלי אפקט, והפאנל אומר זאת.
• ה-מקור של ייצוא הוא node או slice: Create Slice יוצר אזור ייצוא מהבחירה הנוכחית, וכך מייצאים חלק מפריים בלי לחתוך את הפריים.

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

קבצים שהוא קורא וכותב#

שליחת עבודה לסטודיו אחרים#

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

עבודה עם מישהו אחר#

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

מגבלות ותקלות נפוצות#

• Auto width ו-auto height נלחמים בלייאאוטים קבועים. תיבה שהוגדרה ל-auto width לא תעטוף; אם טקסט בורח מהפריים, זו בדרך כלל הסיבה.
• Text threading אינו אוטומטי. תיבה מדווחת Not linked עד שאתם משרשרים אותה.
• Components מתפשטים מההגדרה, לא ממופע. עריכת מופע לא מעדכנת את השאר.