在mastergo中创建变体组件集可统一管理同类元素(如不同状态、尺寸的按钮)。先在同一画布绘制结构一致、命名清晰的多个图层,框选后用⌘+⌥+k(mac)或ctrl+alt+k(win)一键生成组件集;再在属性面板添加【state】等属性并绑定对应图层,支持实时切换;还可追加【size】等多维属性,通过覆盖生成新增图层并绑定值,实现交叉组合。

在MasterGo中创建变体组件(即组件集),是为了把同一类元素(比如不同状态、尺寸或颜色的按钮)归为一个可统一管理、快速切换的集合,避免组件库堆满重复图层。
先准备多个待组合的状态图层
打开设计文件,绘制至少两个视觉不同但语义相同的图层——例如一个「默认态」蓝色按钮和一个「禁用态」灰色按钮。确保它们结构一致:都包含相同层级的容器+文本图层,且命名清晰(如“Button / Default”、“Button / Disabled”)。【必须在同一画布页内,且不能嵌套在已有的组件或组里】
框选这两个图层(按住Shift多选,或鼠标拖拽全选),注意不要误选背景或其他无关图层。
一键生成组件集
方法一(推荐):选中后直接按快捷键 ⌘ + ⌥ + K(Mac) 或 Ctrl + Alt + K(Windows),图层立刻被包裹进一个紫色虚线大容器,顶部出现菱形图标,右侧属性面板自动切换为「组件集」设置区。
方法二:右键选中区域 → 选择「创建组件集」(不是「创建组件」)→ 确认生成。
方法三:顶部工具栏点击「对象」→「创建组件集」。
⚠️ 如果快捷键没反应,检查是否已退出文本编辑状态(按Esc),或图层是否被锁定/隐藏。
定义第一个属性维度
第一步:在右侧属性面板中,点击「添加新的属性」→ 输入属性名,例如 【State】(状态)。
第二步:点击该属性右侧的「+」号,依次添加值:Default、Disabled、Hover(可按需增删)。
第三步:逐个点击画布上的子组件(即原来那几个按钮),在右侧「State」下拉菜单中为其指定对应值——比如把蓝色按钮设为 Default,灰色按钮设为 Disabled。这一步本质是绑定图层与属性值的映射关系。
做完后,任意选中组件集中的任一实例,右侧就会出现 State 下拉菜单,切换即可实时替换为对应状态图层。不需要再手动拖拽或查找。
添加第二个属性(如尺寸)
在属性面板中再次点击「添加新的属性」→ 命名为 【Size】 → 添加值:Small、Medium、Large。
此时需要复制出新图层来匹配组合:比如原 Medium Default 按钮,复制一份后改宽高、调字体大小,再命名为 “Button / Small Default”,然后把它也拖进当前组件集(按住Shift多选已有组件集+新图层 → 再按 Ctrl+Alt+K 覆盖生成)。【覆盖生成会保留原有属性,只新增匹配图层】
接着为这个新图层在 Size 属性中指定 Small,在 State 中仍指定 Default。
现在右侧会出现两个下拉菜单:State 和 Size,可交叉组合出全部状态 × 尺寸的实例,无需预先画完所有排列组合。











