必须勾选「设为设计系统项目」,否则无法启用样式同步、组件发布和引用功能;再依次创建四个标准页面、定义全局样式、搭建带变体的组件库并发布,最后编写强制性使用文档。

要在MasterGo中构建可复用、可维护、团队协同一致的设计规范体系,必须从组件库、样式系统和文档结构三个层面同步搭建,不能只建颜色或只存按钮。
创建设计系统项目与基础结构
进入工作台→点击左上角「新建项目」→在弹窗中命名为“XX团队-设计系统”,并勾选「设为设计系统项目」。这一步【必须勾选】,否则后续无法启用设计系统模式下的样式同步、组件发布和引用功能。
新建完成后,立即进入该项目,在画布空白处右键→选择「新建页面」→依次创建四个标准页面:「01_颜色与文字」、「02_图标与插图」、「03_组件库」、「04_使用说明」。命名带数字前缀可确保页面在左侧导航栏按逻辑顺序排列,避免后期混乱。
定义全局样式:颜色、文字、间距、圆角
方法一:通过「设计系统」面板直接添加
点击右上角「设计系统」图标(蓝色立方体)→切换到「样式」页签→点击「+ 新建颜色」→输入名称如“主品牌色”、值填#FA2549→回车确认。重复操作添加中性色、语义色(成功/警告/错误)、禁用态等,至少覆盖6类常用状态。
方法二:从已有图层提取样式(适合已有设计稿迁移)
选中画布中一个已设好填充色的矩形→右键→「提取为颜色样式」→命名并保存。注意:【若原图层使用RGB而非HEX,提取后可能丢失透明度信息,建议统一用HEX+Alpha格式输入】。
文字样式同理:选中标题文本框→右键→「提取为文字样式」→命名为“H1_正文标题”并指定字号、字重、行高、字体族。一套基础文字样式应包含H1~H4、正文、辅助文字、按钮文字共6档。
搭建可复用组件库
第一步:创建组件母版
在「03_组件库」页面中,拖入一个按钮图形(矩形+文字),设置好圆角8px、主色填充、文字样式H3、内边距12×16。选中该图层→右键→「转换为组件」→命名为“Button/Primary”。组件命名必须用斜杠分隔层级,如“Form/Input”、“Navigation/Tab Bar”,这是后续自动归类和搜索的前提。
第二步:添加变体(Variant)
双击刚创建的组件进入编辑→复制该按钮→修改填充为灰色、文字为“禁用”→右键该副本→「添加为变体」→在弹出面板中将「状态」属性设为“disabled”。同理添加“loading”、“small”、“icon-only”等变体。每个变体需绑定至少1个可切换属性,否则无法在实例中联动控制。
第三步:发布为团队可用组件
返回组件母版画布→点击右上角「发布」按钮→选择「发布到团队设计系统」→勾选「同步更新所有引用」→确认发布。此时所有已加入该团队的成员,在任意项目中都能在左侧组件面板里看到这个Button组件,并实时获得更新。
编写设计系统使用文档
在「04_使用说明」页面中,用MasterGo的「注释」工具(快捷键C)在每个核心组件旁添加使用约束说明。例如在Primary Button下方标注:“仅用于主操作;不可叠加图标与文字同时省略;禁用态必须配合cursor: not-allowed CSS声明”。
插入一个「链接组件」,指向内部页面如“01_颜色与文字”,方便开发点击直达规范详情。所有文档内容必须基于真实开发需求撰写,避免出现“建议”“可选”等模糊表述,直接写死“必须使用Text/Body样式,字号14px,行高20px”。
最后,点击右上角「分享」→开启「允许查看者下载设计系统资源」→复制链接发给前端、产品经理和测试人员。链接有效期默认永久,但团队管理员可在「团队设置→设计系统管理」中随时关闭访问权限。











