Figma 组件变体(Variants)实战:用一套属性管理按钮的状态与尺寸

为什么要用 Variants:别再复制 20 个按钮了

当按钮有不同尺寸、不同状态、是否带图标时,如果你用复制粘贴做一堆组件,很快就会失控。Variants 的价值是:用同一个组件,通过属性切换状态,维护成本大幅降低。

准备:先做一个“基础按钮”组件

先做一个主按钮样式:背景、圆角、文字、内边距都确定。建议用 Auto Layout 包裹文字,让按钮能随文字长度变化。

创建 Variants:三类最常用属性

选中组件后点击“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 状态不要改布局,只改颜色/透明度。

交付建议:配合组件描述与示例

在组件说明里写清“何时用主按钮/次按钮”、禁用规则、最小宽度等。再做一页示例(常见按钮组合),开发和设计同学会省很多沟通成本。

用户评论 (0)

登录后参与讨论

立即登录 注册账号

暂无评论,快来抢沙发吧~

操作成功