Composer
Layout và thiết kế: trang, frame, component và chữ in thật, với chế độ xem prototype và chế độ xem code.
Trong một câu#
Một canvas vô hạn để sắp xếp mọi thứ: document nhiều trang, thiết kế màn hình và layout, với các điều khiển chữ in vượt xa "chọn một font và một kích cỡ".
Bố cục#
| Thanh menu | File · Edit · View · Object · Vector · Text · Arrange · Plugins |
| Thanh công cụ | hoàn tác/làm lại, select, frame, shapes, line, arrow, pen, type, hand, rồi đến Margins, Guides, Baseline, và số lượng artboard |
| Trái | Pages, rồi Layers · Assets · Components · Frames, rồi danh sách layer theo nhóm |
| Giữa | canvas, với mức zoom và một chỉ báo trang |
| Phải | Design · Prototype · Code |
| Thanh trạng thái | artboard, đối tượng, lựa chọn, công cụ đang hoạt động, zoom |
Bạn làm gì ở đây#
Trang và frame#
Một document có các page; một page chứa các frame (artboard). Đó là khác biệt so với Vectra, thứ vẽ trên một artboard tại một thời điểm: Composer dành cho một bộ màn hình hay một bộ trang gộp.
Layer, asset và component#
Bốn tab trên cùng một document. Components là các mảnh có thể tái sử dụng, định nghĩa một lần, đặt nhiều lần, chỉnh sửa định nghĩa và mọi instance đều theo. Assets là những gì document đang kéo vào. Danh sách layer được nhóm theo loại (Text, Images, Graphics), nhanh hơn để quét mắt qua so với một danh sách phẳng trên một trang bận rộn.
Sắp xếp chính xác#
X, Y, W, H và một bán kính góc, cộng thêm căn chỉnh và phân bố đều. Margins, Guides và một lưới Baseline là các nút bật/tắt trên thanh công cụ: lưới baseline là thứ giúp chữ nhiều cột thẳng hàng nhau xuyên suốt một trang gộp.
Chữ in#
Phần khiến Composer xứng đáng có mặt:
| Font, size, leading, tracking | dưới dạng con số, không phải một thanh trượt |
| Alignment | ngang, và dọc bên trong khung: top, middle, bottom |
| Weight và case | kể cả "as typed" |
| Paragraph spacing, danh sách | có dấu đầu dòng hoặc đánh số |
| Resize mode | Fixed size, Auto width, Auto height: khung theo chữ hay chữ ngắt dòng theo khung |
| Text threading | liên kết một khung chữ này sang khung tiếp theo để phần tràn ra tiếp tục chảy |
| Text styles | có tên, tái sử dụng được |
Prototype và code#
Tab Prototype nối các màn hình lại thành một luồng có thể nhấp được. Tab Code hiện thiết kế dưới dạng code.
Variables và styles#
Hai panel biến một document thành một hệ thống thay vì một tập hợp các trang:
- Variables: các giá trị có tên (một màu, một số, một chuỗi) dùng xuyên suốt document, với một bộ chọn biến ở bất cứ đâu một giá trị được thiết lập. Đổi biến, mọi nơi dùng nó đều theo.
- Styles: các style chữ và đối tượng có tên.
- Fills: trình biên tập fill, bao gồm cả gradient và ảnh.
Cùng với Components, chúng là thứ khiến một thiết kế được điều khiển bởi token: workspace DA của Vectra có thể xuất design token, và Composer là nơi chúng được dùng.
Làm prototype#
Một prototype ở đây là một đồ thị trên các frame bạn đã vẽ sẵn. Mỗi tương tác là bốn thứ: một trigger (click hoặc hover), một frame đích, một transition và một duration. Kéo từ tay cầm kết nối của một frame đến frame nó sẽ dẫn tới.
Prototype Mode biến canvas thành chế độ xem luồng; Preview Player chạy nó như người đọc sẽ thấy, kèm nút khởi động lại. Không có một document prototype riêng biệt nào cả, các frame chính là các màn hình.
Dev Mode, bàn giao thiết kế cho code#
Tab Inspect là nửa còn lại của một công cụ thiết kế: nó đọc lựa chọn hiện tại và sinh ra code cho nó, trên ba tab nền tảng.
| Tab | Đầu ra |
|---|---|
| CSS | web |
| iOS | SwiftUI |
| Android | Jetpack Compose |
Bên cạnh code được sinh ra, nó báo cáo những con số thật mà một lập trình viên cần: kích thước, bán kính, xoay, opacity, fill, stroke, effects, font và cỡ chữ, và khoảng cách đo đến cha và đến anh em: hai khoảng cách quyết định một layout. Code có thể sao chép vào clipboard hoặc tải xuống.
Xuất#
Xuất trong Composer là một danh sách cài đặt, không phải một lựa chọn duy nhất: thêm nhiều cài đặt, chọn cái nào để chạy, và mỗi cài đặt được chọn sẽ tạo ra file riêng của nó trong một lượt. Mỗi cài đặt mang theo:
| Format và quality | theo từng cài đặt, nên một PNG và một JPG có thể ra đời cùng lúc |
| Scale và DPI | @2x và độ phân giải cho in |
| CMYK (print) | cho phiên bản dành cho nhà in |
| Naming | một tiền tố và một hậu tố, project- và @2x |
| Background | bao gồm cả trong suốt, ở những định dạng cho phép |
Hai chi tiết panel này nói rõ thay vì để bạn tự phát hiện:
- Chỉ PNG và SVG mang theo độ trong suốt. Chọn nền trong suốt trên một JPG là một cài đặt không có tác dụng gì, và panel nói rõ điều đó.
- Nguồn của một lần xuất là một node hoặc một slice: Create Slice tạo ra một vùng xuất từ lựa chọn hiện tại, đó là cách bạn xuất một phần của một frame mà không cần cắt cả frame ra.
Presets lưu lại cả một bộ cài đặt, nên cấu hình xuất cho một dự án chỉ cần viết một lần.
Định dạng đọc và ghi#
| Định dạng gốc | .comp |
| Xuất | .png · .jpg · .svg, ở bất kỳ tỉ lệ hay DPI nào, ở RGB hoặc CMYK |
| Sinh ra | CSS · SwiftUI · Jetpack Compose |
Chuyển công việc sang xưởng khác#
Tạo ra một bản dàn trang, và artboard đang hoạt động được render thành một ảnh. Nhận vào pixel art, vector art và ảnh.
Làm việc cùng người khác#
Composer đồng bộ như một document: toàn bộ trạng thái, có độ trễ dồn, cộng thêm các hành động được gửi đi. Hai người cùng chỉnh sửa cùng một trang tại cùng một thời điểm sẽ có một người thắng; hãy làm việc trên các trang khác nhau.
Giới hạn và các lỗi thường gặp#
- Auto width và auto height xung đột với layout cố định. Một khung được đặt auto width sẽ không ngắt dòng; nếu chữ tràn ra khỏi frame, thường đó là lý do.
- Text threading không tự động. Một khung báo Not linked cho đến khi bạn liên kết nó.
- Components lan truyền từ định nghĩa, không phải từ một instance. Chỉnh sửa một instance không cập nhật các instance khác.