暗色模式
DSM 概览
DSM(Design System Manager)是 MasterGo 的设计系统管理面板,用于集中管理组件、样式、变量,并将设计资源发布为团队库供团队使用。
进入 DSM
有两种进入方式:
- 工作台:右键点击团队库文件 → 选择「设计系统模式」
- 文件页:点击顶部导航文件名旁的下拉按钮 →「设计系统模式」
该模式仅在已发布为团队库的文件中可用。
发布团队库
在文件中创建好组件、样式和变量后,可以将它们发布到团队库,供团队成员订阅使用。
发布流程
- 打开团队库面板 → 选择要发布的文件 → 点击「发布为团队库」
- 勾选需要发布的组件、样式和变量(新增、修改和待移除项分别展示)
- 填写版本说明,描述本次变更内容
- 选择发布范围:
- 当前团队:仅当前团队可见
- 企业内所有团队:企业下所有团队可订阅
- 指定团队:手动选择目标团队
- 点击「发布」
发布更新
组件、样式或变量有修改后,点击「发布更新」生成新版本。已订阅该库的成员会收到更新通知。
取消发布
在团队库面板中可取消发布。取消后已订阅成员无法继续获得更新。
订阅团队库
订阅
- 打开 DSM 面板 →「团队库」标签
- 浏览可用的团队库 → 点击「订阅」
- 订阅后在设计文件的「资源」面板中可以看到库组件
使用库组件
- 从资源面板拖拽组件到画布
- 库组件在图层列表中显示为链接图标
- 双击库组件实例无法直接编辑(需到源文件编辑)
更新库版本
当团队库有新版本时,图层栏会显示更新提示,点击「更新」接受新版本,或「查看变更」了解改动后再决定。
取消订阅
在 DSM 面板找到已订阅的库 → 点击「取消订阅」。取消后已有的库组件实例保留,但不再接收更新。
切换团队库
- 打开左侧组件面板 → 点击团队库图标
- 查看当前文件使用的所有团队库列表
- 点击「切换团队库」→ 选择目标库
- 决定是否勾选「切换实例中的默认样式」
- 点击确认
切换基于名称匹配,如果新库中没有同名组件,MasterGo 将无法识别。
样式与组件管理
样式管理
- 样式按类型分组,点击可定位到对应样式位置
- 支持宫格和列表两种预览模式
- 可设置变量名,用于导出工具类和 Dev Mode CSS 变量展示
组件管理
- 点击组件可在弹窗中预览,支持切换组件属性
- 可为组件名称和属性设置别名,与研发组件属性对齐
图标库
将图标放入画布中名为 @icons 的容器,进入 DSM 即可按分类管理并批量导出图标。
设计 Token 导出
在 DSM 中可将已设置变量名的样式导出为 CSS 或 SCSS 工具类文件,供开发直接使用。
详见设计 Token 导出。
DSM AI 工具
使用 AI 辅助管理和优化设计系统,自动检测不一致、生成变量名等。
详见DSM AI 辅助工具。