Figma组件变体(Variants)组织技巧:命名、属性与自动布局联动

变体做不好,组件库会越来越乱

很多人做Variants一开始很爽,后面发现:找不到想要的状态、属性命名混乱、Auto Layout一改就溢出。解决思路是:先定属性体系,再做布局规则。

第1步:用“属性”而不是“后缀”命名

推荐属性:Type(Primary/Secondary/Text)、State(Default/Hover/Disabled/Loading)、Size(S/M/L)、Icon(None/Left/Right)。这样组件面板里可以筛选属性,而不是靠记名字。

第2步:默认值要有逻辑

把最常用的组合设置为默认:比如Type=Primary,State=Default,Size=M。这样拖出组件时默认就是80%场景,减少你每次都要改属性的成本。

第3步:Auto Layout统一规则(避免不同变体尺寸打架)

按钮类组件建议:内边距固定(如12/16),文字Hug contents,容器Hug contents,间距固定。不同Size只改Padding与字体大小,不要在某些变体里把宽度写死。

第4步:处理“图标有/无”的变体

Icon属性建议做成None/Left/Right三种。做法:在布局里预留图标位,但仅在需要时显示;或把图标层作为可切换的Boolean属性(如果你的版本支持)。关键是:不要靠手动隐藏导致尺寸不一致。

第5步:状态变体尽量只改颜色与交互,不改结构

Hover/Disabled/Loading通常只需要改颜色、透明度、光标与文案,不要在某个状态里突然换布局结构,否则实例切换状态时会跳动。

一个实用检查表

1) 属性是否可筛选?2) 默认值是否覆盖多数场景?3) Auto Layout是否统一?4) 状态切换是否不跳动?5) 组件名称是否语义清晰?做到这五点,你的Variants就能长期维护。

用户评论 (0)

登录后参与讨论

立即登录 注册账号

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

操作成功