适合:团队协作、需要大量复用组件、想减少手工对齐/改色/改字号的人。建议先准备:1 个专用「组件库文件」(Library file)+ 1 个「业务文件」(使用方)。
建议结构:Pages 至少包含:00_Tokens(变量/样式)、01_Components(基础组件)、02_Patterns(组合组件/模板)、99_Docs(使用说明)。
在组件库文件中打开 Assets → Local variables(或从右侧面板进入 Variables),新建集合(Collection),建议至少做三类:Color、Spacing、Typography。
命名建议:用层级路径,后续搜索和批量替换更顺手,例如:
color/brand/primary、color/text/strong、space/2、space/4、type/body/regular
小技巧:如果有浅色/深色(或多主题),在同一个 Collection 里用 Modes 管理,不要复制一堆同名变量。
选中图层后,在 Fill/Stroke/Text 的设置里将数值改为绑定变量(Variable)。让组件的颜色、文字大小尽量来自变量而不是手工输入。
目的:后续改品牌色或字号,只需要改变量一次,所有组件自动同步。
先做 3-5 个最常用的基础组件,别一上来就做大而全。推荐优先级:
1)Button(按钮) 2)Input(输入框) 3)Tag/Badge(标签) 4)Card(卡片) 5)Modal(弹窗)
关键点:所有组件尽量使用 Auto Layout;Padding、间距、圆角尽量来自 Variables(space/*、radius/*)。
以 Button 为例,把不同状态合并为一个组件集(Component set),用 Variants 维度来管理:
建议维度:type=primary/secondary/ghost;size=sm/md/lg;state=default/hover/disabled;icon=none/left/right。
注意:维度不要太多,先覆盖 80% 使用场景;确实很少用的状态可以后补。
命名建议:
组件:Button / Input / Card;组件集:Button(变体维度如 type、size、state);图层:Label、Icon、Container。
在 99_Docs 页面写 1 屏说明即可:用途、何时用哪种 type、推荐尺寸、禁用态规则。
在组件库文件中进入 Assets → Library,打开开关发布。然后切到业务文件,在 Libraries 中启用该库。
验证方法:在业务文件中拖一个 Button,修改变体(type/size/state),看是否能正确切换;再改一次变量色值,确认组件跟随变化。
推荐流程:
1)新增需求先在业务文件验证 → 2)回库文件完善组件/变量 → 3)更新说明 → 4)发布更新。
版本小贴士:每次大改前复制一个页面快照(如 Archive_2026-03-03),方便回滚对比。
问题 1:业务文件里找不到组件/库:确认库文件已发布;业务文件 Libraries 已启用;组件必须在组件库文件中作为 Component 存在(不是普通 Frame)。
问题 2:组件改了但业务文件不更新:检查是否使用了 Detach instance(分离实例);分离后不会再跟随更新。必要时用 Replace with… 替换回组件实例。
问题 3:颜色/字号改动无法一键同步:检查是否真的绑定了 Variables;很多时候是组件里仍残留手填数值(尤其是文本样式、描边)。
问题 4:Auto Layout 变形/对不齐:检查 Hug/Fill 设置;图标和文本的对齐方式;Padding 是否来自 space 变量;必要时把 icon 包一层容器再对齐。
1)颜色、间距、圆角是否尽量来自 Variables
2)核心组件是否使用 Auto Layout
3)Button/Input 等是否用 Variants 管理状态
4)命名是否可搜索、维度是否清晰
5)99_Docs 是否有最基本的使用说明