当按钮有不同尺寸、不同状态、是否带图标时,如果你用复制粘贴做一堆组件,很快就会失控。Variants 的价值是:用同一个组件,通过属性切换状态,维护成本大幅降低。
先做一个主按钮样式:背景、圆角、文字、内边距都确定。建议用 Auto Layout 包裹文字,让按钮能随文字长度变化。
选中组件后点击“Combine as variants”,然后建立属性:
1)State:Default / Hover / Pressed / Disabled
2)Size:S / M / L(对应不同 padding 与字号)
3)Icon:None / Leading / Trailing
推荐命名格式:State=Default, Size=M, Icon=None。这样在右侧面板里切换属性会非常清晰,也便于团队协作。
1)所有变体保持相同的约束与对齐策略;
2)图标占位用组件或固定宽度容器,避免切换时文字位置漂移;
3)Disabled 状态不要改布局,只改颜色/透明度。
在组件说明里写清“何时用主按钮/次按钮”、禁用规则、最小宽度等。再做一页示例(常见按钮组合),开发和设计同学会省很多沟通成本。