Composer
การจัดวางและออกแบบ: หน้า เฟรม คอมโพเนนต์ และงานพิมพ์จริง พร้อมมุมมองต้นแบบและมุมมองโค้ด
สรุปในประโยคเดียว#
แคนวาสไม่จำกัดสำหรับจัดเรียงสิ่งต่าง ๆ: เอกสารหลายหน้า การออกแบบหน้าจอ และ เลย์เอาต์ พร้อมตัวควบคุมงานพิมพ์ที่ไปไกลกว่า "เลือกฟอนต์กับขนาด"
การจัดวางหน้าจอ#
| แถบเมนู | File · Edit · View · Object · Vector · Text · Arrange · Plugins |
| แถบเครื่องมือ | undo/redo, select, frame, shapes, line, arrow, pen, type, hand: จากนั้นคือ Margins, Guides, Baseline และจำนวนอาร์ตบอร์ด |
| ซ้าย | Pages จากนั้น Layers · Assets · Components · Frames จากนั้นรายการเลเยอร์แยกตามหมวด |
| กลาง | แคนวาส พร้อมการซูมและตัวบอกหน้า |
| ขวา | Design · Prototype · Code |
| แถบสถานะ | อาร์ตบอร์ด, อ็อบเจ็กต์, การเลือก, เครื่องมือที่ใช้งานอยู่, การซูม |
สิ่งที่คุณทำที่นี่#
หน้าและเฟรม#
เอกสารหนึ่งมี pages หน้าหนึ่งมี frames (อาร์ตบอร์ด) นั่นคือความต่างจาก Vectra ซึ่งวาดบนอาร์ตบอร์ดเดียวในแต่ละครั้ง: Composer มีไว้สำหรับชุดหน้าจอหรือชุดหน้าคู่ (spread)
เลเยอร์ asset และคอมโพเนนต์#
สี่แท็บบนเอกสารเดียวกัน Components คือชิ้นส่วนที่นำกลับมาใช้ใหม่ได้ กำหนด ครั้งเดียว วางได้หลายที่ แก้ไขคำนิยามแล้วทุกอินสแตนซ์จะตามไป Assets คือสิ่งที่ เอกสารกำลังดึงเข้ามาใช้ รายการเลเยอร์จัดกลุ่มตามประเภท (Text, Images, Graphics) ซึ่งกวาดตาดูได้เร็วกว่ารายการแบนราบบนหน้าที่มีเนื้อหาเยอะ
จัดวางอย่างแม่นยำ#
X, Y, W, H และรัศมีมุม บวก align และ distribute Margins, Guides และกริด Baseline เป็นสวิตช์บนแถบเครื่องมือ: กริด baseline คือ สิ่งที่ทำให้ข้อความหลายคอลัมน์เรียงตรงกันข้ามหน้าคู่
งานพิมพ์#
ส่วนที่ทำให้ Composer มีที่ยืนของตัวเอง:
| Font, size, leading, tracking | เป็นตัวเลข ไม่ใช่แถบเลื่อน |
| Alignment | แนวนอน และ แนวตั้ง ภายในกล่อง: บน กลาง ล่าง |
| Weight และ case | รวมถึง "ตามที่พิมพ์" |
| Paragraph spacing, รายการ | แบบจุดหรือแบบตัวเลข |
| Resize mode | Fixed size, Auto width, Auto height: กล่องตามข้อความหรือข้อความตัดบรรทัดตามกล่อง |
| Text threading | เชื่อมกล่องข้อความหนึ่งไปยังอีกกล่อง เพื่อให้ส่วนที่ล้นไหลต่อไป |
| Text styles | มีชื่อ นำกลับมาใช้ใหม่ได้ |
ต้นแบบและโค้ด#
แท็บ Prototype เชื่อมหน้าจอเข้าด้วยกันเป็นโฟลว์ที่คลิกได้ แท็บ Code แสดงการออกแบบในรูปแบบโค้ด
ตัวแปรและสไตล์#
สองพาเนลที่เปลี่ยนเอกสารให้เป็นระบบแทนที่จะเป็นแค่ชุดของหน้า:
- Variables: ค่าที่มีชื่อ (สี ตัวเลข สตริง) ใช้ทั่วทั้งเอกสาร พร้อม ตัวเลือกตัวแปร ทุกที่ที่มีการกำหนดค่า เปลี่ยนตัวแปร การใช้งานทุกที่จะตามไป
- Styles: สไตล์ข้อความและอ็อบเจ็กต์ที่มีชื่อ
- Fills: ตัวแก้ไขการเติมสี รวมถึง gradient และภาพ
ร่วมกับ Components สิ่งเหล่านี้คือสิ่งที่ทำให้การออกแบบขับเคลื่อนด้วยโทเคน: พื้นที่ทำงาน DA ของ Vectra ส่งออก design token ได้ และ Composer คือที่ที่มันถูกนำมาใช้
การทำต้นแบบ#
ต้นแบบที่นี่คือกราฟที่วางทับบนเฟรมที่คุณวาดไว้แล้ว แต่ละอินเทอร์แอกชันประกอบด้วย สี่อย่าง: trigger (คลิกหรือ hover), เฟรม เป้าหมาย, การเปลี่ยนผ่าน และ ระยะเวลา ลากจากจุดเชื่อมต่อของเฟรมไปยังเฟรมที่มันควรนำไปสู่
Prototype Mode เปลี่ยนแคนวาสให้เป็นมุมมองโฟลว์ Preview Player รันมัน เหมือนที่ผู้อ่านจะเห็น พร้อมปุ่มเริ่มใหม่ ไม่มีเอกสารต้นแบบแยกต่างหาก เฟรมคือหน้าจอ เหล่านั้นเอง
Dev Mode, การส่งมอบการออกแบบให้โค้ด#
แท็บ Inspect คืออีกครึ่งหนึ่งของเครื่องมือออกแบบ มันอ่านสิ่งที่เลือกและสร้างโค้ด สำหรับมัน บนสามแท็บแพลตฟอร์ม
| แท็บ | ผลลัพธ์ |
|---|---|
| CSS | สำหรับเว็บ |
| iOS | SwiftUI |
| Android | Jetpack Compose |
นอกจากโค้ดที่สร้างขึ้นแล้ว มันยังรายงานตัวเลขจริงที่นักพัฒนาต้องการ: ขนาด รัศมี การหมุน ความทึบ การเติมสี เส้นขอบ เอฟเฟกต์ ฟอนต์และขนาดฟอนต์ และระยะห่างที่วัด ไปยังพาเรนต์ และ ไปยังพี่น้อง: สองระยะที่กำหนดเลย์เอาต์ โค้ดคัดลอกไปยัง คลิปบอร์ดหรือดาวน์โหลดได้
การส่งออก#
การส่งออกใน Composer คือ รายการการตั้งค่า ไม่ใช่ตัวเลือกเดียว: เพิ่มได้หลายอัน เลือกว่าจะรันตัวไหน แล้วแต่ละการตั้งค่าที่เลือกจะสร้างไฟล์ของตัวเองในครั้งเดียว แต่ละการตั้งค่ามี:
| Format และ quality | ต่อการตั้งค่า ดังนั้น PNG และ JPG จึงออกไปพร้อมกันได้ |
| Scale และ DPI | @2x และความละเอียดสำหรับพิมพ์ |
| CMYK (print) | สำหรับเวอร์ชันที่จะส่งโรงพิมพ์ |
| Naming | คำนำหน้าและคำต่อท้าย project- และ @2x |
| Background | รวมถึง transparent ในรูปแบบที่รองรับ |
สองรายละเอียดที่พาเนลบอกไว้แทนที่จะปล่อยให้คุณค้นพบเอง:
- มีเพียง PNG และ SVG เท่านั้นที่รองรับความโปร่งใส การเลือกพื้นหลังโปร่งใส บน JPG คือการตั้งค่าที่ไม่มีผลอะไร และพาเนลก็บอกเช่นนั้น
- แหล่งที่มา ของการส่งออกคือ node หรือ slice อย่างใดอย่างหนึ่ง: Create Slice สร้างพื้นที่ส่งออกจากส่วนที่เลือกอยู่ในปัจจุบัน ซึ่งเป็นวิธีที่คุณ ส่งออกส่วนหนึ่งของเฟรมโดยไม่ต้องตัดเฟรมออกเป็นชิ้น ๆ
Presets บันทึกชุดการตั้งค่าทั้งหมด ดังนั้นการตั้งค่าการส่งออกของโปรเจกต์จึง ถูกเขียนเพียงครั้งเดียว
ไฟล์ที่อ่านและเขียนได้#
| รูปแบบเนทีฟ | .comp |
| ส่งออก | .png · .jpg · .svg ที่สเกลหรือ DPI ใด ๆ ในระบบสี RGB หรือ CMYK |
| สร้าง | CSS · SwiftUI · Jetpack Compose |
การส่งงานไปยังสตูดิโออื่น#
สร้าง งานประกอบ และอาร์ตบอร์ดที่ใช้งานอยู่ในรูปแบบภาพ รับ ภาพพิกเซล งานเวกเตอร์ และภาพ
การทำงานร่วมกับผู้อื่น#
Composer ซิงค์ในฐานะ เอกสาร: สถานะทั้งหมด แบบ debounced บวกการกระทำที่ ถูกส่งออกไป คนสองคนแก้ไขหน้าเดียวกันในเวลาเดียวกันจะมีคนหนึ่งชนะ ให้ทำงานคนละหน้า แทน
ข้อจำกัดและปัญหาที่พบบ่อย#
- Auto width และ auto height ขัดแย้งกับเลย์เอาต์แบบตายตัว กล่องที่ตั้งเป็น auto width จะไม่ตัดบรรทัด หากข้อความล้นออกจากเฟรม นี่มักเป็นสาเหตุ
- Text threading ไม่ใช่แบบอัตโนมัติ กล่องจะรายงาน Not linked จนกว่าคุณ จะเชื่อมมัน
- คอมโพเนนต์กระจายจากคำนิยาม ไม่ใช่จากอินสแตนซ์ การแก้ไขอินสแตนซ์หนึ่งจะ ไม่อัปเดตตัวอื่น