用一个按钮组件来讲透变体的正确用法👇
🎯 一个按钮可能有这些属性：
属性 1 → Type（类型）：Primary / Secondary / Tertiary / Ghost 属性 2 → Size（尺寸）：Large / Medium / Small 属性 3 → State（状态）：Default / Hover / Pressed / Disabled / Loading 属性 4 → Icon（图标）：None / Left / Right / Only
🔢 排列组合：4 × 3 × 5 × 4 = 240 个变体
是不是吓到了？别怕，Figma 会用属性面板来管理，使用时只需要在右侧切换选项
📌 设置步骤：
① 先做好一个 Default 状态的按钮（用 Auto Layout） ② 复制出所有状态变化的版本 ③ 全选，右键 → Combine as Variants ④ 在属性面板里命名每个属性和选项 ⑤ 整理好变体的排列方式（按属性分行/分列）
💡 实用建议：
属性数量控制在 4 个以内，太多了使用时找不到
最常用的放第一个属性（通常是 Type）
状态单独一个属性，别和类型混在一起
给每个属性和选项写清楚描述
做好变体之后，使用组件时在右侧面板里一键切换就行，不用再手动改颜色改大小了
组件库的效率提升 80% 就靠变体了，一定要学会🔧
