DSM 设计系统管理

设计系统管理平台是连接设计资源与研发语言的桥梁，支持设计人员使用设计侧命名规范，同时允许开发人员定义适合研发的样式与组件名称。

如何进入设计系统管理

进入 DSM 设计系统管理，需要将文件发布为团队库。

右键任意的团队库，即可进入设计系统管理的界面。

代码解析配置

选择代码解析配置页面即可进入配置编写窗口。本文档的解析配置都可以在 DSM 设计系统管理平台中进行配置和编辑。

参考预制解析配置

如果你还对当前的配置方法不够熟练，我们建议你从模版中创建一个解析配置，以便你边学边改。

通常我们建议你创建跟自己项目相通框架语法的配置，例如 React 项目使用 Ant Design, Vue 项目使用 Element Plus。

同时，我们为也你制作了对应的组件库，请将它们拷贝到你的团队中。

Ant Design UIKit 变量版

Element Plus UIKit 变量

订阅团队库

你可以在当前团队库中使用你定义的配置文件来解析。如果你需要另外的文件中订阅，记得启动此团队库。这样我们也能够使用当前团队库的解析配置来解析这个文件。

组件别名

别名的主要功能是为了解决设计组件与前端组件命名不一致，而导致D2C无法识别的问题。

通常情况下，设计师会用更容易理解的形式来标识组件和属性的名称，例如使用中文的“尺寸”、“状态”等。我们使用别名可以将组件的属性名称映射到前端组件的属性名称。

小提示

如果您设计组件的属性及名称与前端组件已保持一致，则无需再配置别名。

样式别名

样式别名可以理解为样式的 Token 名称，例如前端的 Css Variable 名称。

如果你为一个品牌色设置了 “primary” 的别名，那么在设计稿中应用了这个品牌色的元素，就会被解析为 “--primary” 这个 Css Variable。

<!-- 应用在 背景填充上 则输出为 -->
<div style="background-color: var(--primary);">...</div>

<!-- 应用在 文字填充上 则输出为 -->
<div style="color: var(--primary);">...</div>

<!-- 应用在 边框上 则输出为 -->
<div style="border-color: var(--primary);">...</div>

如果你希望将样式映射在你项目中的样式上，你可以在样式解析中做如下映射

// 增加颜色映射
"color": {
  "primary": "text-primary",
  // ...
}
// 输出为：
<div class="text-primary">...</div>


// 增加背景映射
"background": {
  "primary": "bg-primary",
  // ...
}
// 输出为：
<div class="bg-primary">...</div>


// 增加边框映射
"border": {
  "primary": "border-primary",
  // ...
}
// 输出为：
<div class="border-primary">...</div>

D2C PRO 会自动判断样式， 如果是 style 样式，则会将样式写入到 style 中， 如果是 class 样式，则会将样式写入到 class 中。