Composer
排版與設計：頁面、畫框、元件與真正的文字排印，附帶原型檢視和程式碼檢視。
一句話說明#
一張用來排列內容的無限畫布：多頁文件、畫面設計和版面配置，附帶超越「選字型選大小」的文字排印控制。
版面配置#
| 選單列 | File · Edit · View · Object · Vector · Text · Arrange · Plugins |
| 工具列 | 復原／取消復原、選取、畫框、形狀、線條、箭頭、鋼筆、文字、手形工具，接著是 Margins、Guides、Baseline，以及畫板數量 |
| 左側 | Pages，接著是 Layers · Assets · Components · Frames，然後是依類別分組的圖層清單 |
| 中央 | 畫布，附帶縮放和頁面指示器 |
| 右側 | Design · Prototype · Code |
| 狀態列 | 畫板、物件、選取範圍、目前工具、縮放 |
你在這裡做什麼#
頁面與畫框#
一份文件擁有頁面（pages）；一個頁面承載畫框（frames，即畫板）。這正是它和Vectra不同的地方：Vectra 一次只畫一塊畫板，而 Composer 是用來處理一整組畫面或一整組跨頁的。
圖層、素材與元件#
同一份文件上的四個分頁。Components（元件） 是可重複使用的零件，定義一次、放置多處，編輯定義後每個實例都會跟著更新。Assets（素材） 是文件正在引用的內容。圖層清單依種類分組（Text、Images、Graphics），比一份扁平清單在忙碌的頁面上更容易瀏覽。
精確排版#
X、Y、W、H 和一個圓角半徑，外加對齊與分佈。Margins、 Guides 和一個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（填色）：填色編輯器，包含漸層和圖片。
它們與 Components 一起，讓一個設計以設計權杖（token）為驅動核心： Vectra 的 DA 工作區可以匯出設計權杖，而 Composer 正是它們被使用的地方。
原型製作#
這裡的原型，是建立在你已經畫好的畫框之上的一張圖。每個互動都由四件事組成：一個觸發方式（點擊或懸停）、一個目標畫框、一個轉場和一個時長。從一個畫框的連接控點拖曳到它應該連到的畫框即可。
Prototype Mode（原型模式） 會把畫布變成流程檢視；Preview Player（預覽播放器） 則以讀者實際會看到的方式運行它，並可重新開始。這裡沒有另外一份原型文件，畫框本身就是畫面。
Dev Mode，把設計交給程式碼#
Inspect（檢查） 分頁是設計工具的另一半：它讀取目前的選取範圍，並在三個平台分頁上為它產生程式碼。
| 分頁 | 輸出 |
|---|---|
| CSS | 網頁 |
| iOS | SwiftUI |
| Android | Jetpack Compose |
除了產生的程式碼之外，它也會回報開發者真正需要的實際數字：大小、圓角、旋轉、不透明度、填色、邊框、特效、字型與字型大小，以及分別測量到父層和到相鄰元素的間距，也就是決定版面配置的那兩個距離。程式碼可以複製到剪貼簿或下載。
匯出#
Composer 的匯出是一份設定清單，而不是單一選項：可以加入多個設定，選擇要執行哪些，選取的每一個設定都會在同一次匯出中產生自己的檔案。每個設定都帶有：
| Format 與 quality（格式與品質） | 各自獨立設定，所以 PNG 和 JPG 可以一起輸出 |
| Scale 與 DPI（縮放與 DPI） | @2x 和印刷解析度 |
| CMYK (print)（CMYK／印刷） | 給要送印的版本使用 |
| Naming（命名） | 前綴和後綴，例如 project- 和 @2x |
| Background（背景） | 包含透明，在格式支援的情況下 |
面板會明確說明兩個細節，而不是讓你自己發現：
- 只有 PNG 和 SVG 帶有透明度。 在 JPG 上選擇透明背景是一個不會有任何效果的設定，面板也會這麼說明。
- 一次匯出的來源，可以是一個節點，也可以是一個切片：Create Slice 可以把目前的選取範圍變成一個匯出區域，這正是在不把整個畫框切開的情況下，匯出其中一部分的方法。
Presets（預設） 可以儲存整組設定，所以一個專案的匯出設定只需要寫一次。
讀寫的檔案格式#
| 原生格式 | .comp |
| 匯出 | .png · .jpg · .svg，可任意縮放或設定 DPI，支援 RGB 或 CMYK |
| 產生 | CSS · SwiftUI · Jetpack Compose |
送去其他工作室#
產出一份構圖，以及以圖片形式輸出的目前畫板。接收像素藝術、向量圖形和圖片。
與別人協作#
Composer 以文件方式同步：整個狀態，經過去抖動處理，外加已派發的操作。兩個人同時編輯同一頁時，會有一方勝出；請在不同頁面上工作。
限制與常見問題#
- Auto width 和 auto height 會與固定版面配置互相衝突。 一個設為 auto width 的文字框不會換行；如果文字跑出畫框，通常就是這個原因。
- 文字串接不是自動的。 一個文字框在你把它串接之前，會一直顯示Not linked（未連結）。
- 元件的變更是從定義往外傳播的，而不是從某個實例。 編輯一個實例不會更新其他實例。