Composer
排版与设计：页面、画框、组件与真正的排版控制，配有原型视图和代码视图。
一句话概括#
一块用来排布内容的无限画布：多页文档、屏幕设计和版式，其排版控制远不止"选个字体和字号"这么简单。
布局#
| 菜单栏 | File · Edit · View · Object · Vector · Text · Arrange · Plugins |
| 工具栏 | 撤销/重做、选择、画框、形状、直线、箭头、钢笔、文字、抓手，然后是 Margins、Guides、Baseline，以及画框数量 |
| 左侧 | Pages，然后是 Layers · Assets · Components · Frames，再往下是按类别分的图层列表 |
| 中间 | 画布，带有缩放和页码指示 |
| 右侧 | Design · Prototype · Code |
| 状态栏 | 画框数、对象数、选区、当前工具、缩放 |
你在这里做什么#
页面与画框#
一份文档包含若干页面；一个页面容纳若干画框（artboard）。这就是它和 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，这些共同构成了一套由设计令牌驱动的设计：Vectra 的 DA 工作区可以导出设计令牌，而 Composer 正是这些令牌被使用的地方。
原型设计#
这里的原型，是建立在你已经画好的画框之上的一张图。每一次交互都由四样东西组成：一个触发方式（点击或悬停）、一个目标画框、一个过渡效果和一个时长。从一个画框的连接手柄拖到它应该引向的那个画框。
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（背景） | 包括透明，在格式允许的情况下 |
面板会主动说明，而不是留给你自己发现的两个细节：
- 只有 PNG 和 SVG 能携带透明度。 在一个 JPG 上选择透明背景是一个没有任何效果的设置，面板也会这样告诉你。
- 一次导出的来源要么是一个节点，要么是一个切片：Create Slice 会从当前选区生成一个导出区域，这就是如何在不把整个画框切碎的情况下，只导出它的一部分。
Presets（预设） 会保存一整套设置，这样一个项目的导出配置只需要写一次。
可读写的文件#
| 原生格式 | .comp |
| 导出 | .png · .jpg · .svg，任意缩放比例或 DPI，RGB 或 CMYK |
| 生成 | CSS · SwiftUI · Jetpack Compose |
把工作发送到其他工作室#
产出一份排版作品，以及渲染成图像的当前画框。接受像素画、矢量图和图像。
与他人协作#
Composer 以文档方式同步：整个状态，做去抖动处理，再加上派发出去的动作。两个人在同一瞬间编辑同一个页面，会有一方胜出；不如把不同页面分开来做。
限制与常见坑#
- Auto width 和 auto height 会和固定布局冲突。 一个设成 auto width 的框不会换行；如果文字溢出了画框，通常就是这个原因。
- Text threading 不是自动的。 一个文本框会一直显示 Not linked，直到你把它串联起来。
- Components 的改动只从定义处扩散，而不是从某个实例扩散。 编辑一个实例不会更新其他实例。