Figma:组件变体(Variants)怎么设计才不乱

先把“维度”想清楚

做变体前先列维度:Size(S/M/L)、State(Default/Hover/Disabled)、Icon(On/Off)等。维度越清晰,后续调用越稳定。

命名规则建议

属性名用英文且一致:Size、State、Icon、Theme。属性值尽量短:S/M/L,Default/Hover/Pressed/Disabled。避免把“颜色值”写进组件名,颜色应该由样式或 token 控制。

如何拆分属性防止爆炸

当维度过多时,组合数量会指数增长。解决思路:把可选内容(如左图标/右图标)拆成插槽式组件,或把不影响布局的状态改成交互样式,而不是每个状态都做一套布局。

交互状态的组织方式

按钮类组件建议用 State 维度统一管理;表单控件建议把 Focus/Error/Success 作为状态,而不是多个独立组件。原型交互里,把 Default 连接到 Hover/Pressed 的对应变体。

落地小技巧

1)使用 Auto Layout 保证不同文案长度不破版;2)优先做“最常用”的变体组合;3)定期清理不用的属性值,保持调用面板简洁。

用户评论 (0)

登录后参与讨论

立即登录 注册账号

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

操作成功