Skip to content

DSM 概览

DSM(Design System Manager)是 MasterGo 的设计系统管理面板,用于集中管理组件、样式、变量,并将设计资源发布为团队库供团队使用。

进入 DSM

有两种进入方式:

  • 工作台:右键点击团队库文件 → 选择「设计系统模式」
  • 文件页:点击顶部导航文件名旁的下拉按钮 →「设计系统模式」

该模式仅在已发布为团队库的文件中可用。

发布团队库

在文件中创建好组件、样式和变量后,可以将它们发布到团队库,供团队成员订阅使用。

发布流程

  1. 打开团队库面板 → 选择要发布的文件 → 点击「发布为团队库」
  2. 勾选需要发布的组件、样式和变量(新增、修改和待移除项分别展示)
  3. 填写版本说明,描述本次变更内容
  4. 选择发布范围:
    • 当前团队:仅当前团队可见
    • 企业内所有团队:企业下所有团队可订阅
    • 指定团队:手动选择目标团队
  5. 点击「发布」

发布更新

组件、样式或变量有修改后,点击「发布更新」生成新版本。已订阅该库的成员会收到更新通知。

取消发布

在团队库面板中可取消发布。取消后已订阅成员无法继续获得更新。

订阅团队库

订阅

  1. 打开 DSM 面板 →「团队库」标签
  2. 浏览可用的团队库 → 点击「订阅」
  3. 订阅后在设计文件的「资源」面板中可以看到库组件

使用库组件

  • 从资源面板拖拽组件到画布
  • 库组件在图层列表中显示为链接图标
  • 双击库组件实例无法直接编辑(需到源文件编辑)

更新库版本

当团队库有新版本时,图层栏会显示更新提示,点击「更新」接受新版本,或「查看变更」了解改动后再决定。

取消订阅

在 DSM 面板找到已订阅的库 → 点击「取消订阅」。取消后已有的库组件实例保留,但不再接收更新。

切换团队库

  1. 打开左侧组件面板 → 点击团队库图标
  2. 查看当前文件使用的所有团队库列表
  3. 点击「切换团队库」→ 选择目标库
  4. 决定是否勾选「切换实例中的默认样式」
  5. 点击确认

切换基于名称匹配,如果新库中没有同名组件,MasterGo 将无法识别。

样式与组件管理

样式管理

  • 样式按类型分组,点击可定位到对应样式位置
  • 支持宫格和列表两种预览模式
  • 可设置变量名,用于导出工具类和 Dev Mode CSS 变量展示

组件管理

  • 点击组件可在弹窗中预览,支持切换组件属性
  • 可为组件名称和属性设置别名,与研发组件属性对齐

图标库

将图标放入画布中名为 @icons 的容器,进入 DSM 即可按分类管理并批量导出图标。

设计 Token 导出

在 DSM 中可将已设置变量名的样式导出为 CSS 或 SCSS 工具类文件,供开发直接使用。

详见设计 Token 导出

DSM AI 工具

使用 AI 辅助管理和优化设计系统,自动检测不一致、生成变量名等。

详见DSM AI 辅助工具

相关文档