设计系统

设计系统是摹客3推出的一个集中管理的设计资源模式，用于在摹客3中查看、管理项目中所用的样式（颜色、字体等）、组件、图标，使这些设计资源与开发端保持一致。

其核心作用包括：

• 可视化

• 为样式资源可添加 CSS 变量名，一键导出 .css

• 自动生成图标库文件（字体图标、SVG图标）

进入设计系统

在编辑器内，右上角切换原型/UI模式下拉菜单里，增加进入设计系统入口，点击即可查看设计系统。

样式

在文件内创建了文本样式、颜色样式、效果样式、网格样式、圆角样式后，设计系统可自动展示样式资源。创建样式资源教程请参考：001样式资源

选择样式，右侧会显示样式属性、别名、描述等，也可以查看和复制CSS代码。

导出样式

摹客3设计系统支持导出CSS样式资源，同时会将别名自动添加至CSS代码中，相当于变量名称，方便后续研发使用。

图标

图标资源，在画布内需要创建名称为 @iconset 分区，并将图标组件置入到此分区中，在设计系统中就会自动展示图标。

导出图标

同时支持将图标批量导出为字体图标、SVG图标，方便后续研发使用。

组件

在文件内创建组件后，设计系统会自动展示组件资源，同时当组件有添加状态或自定义属性，也可在设计系统内切换查看状态。创建组件资源教程请参考：002组件资源

也可以对组件设置做基础设置，包含组件名称、别名、描述、添加链接等信息；如果需要编辑源组件，点击“跳转到源组件”，则会回到编辑界面。

最佳实践Tips

为了最大化设计系统模式的价值，以下是一些建议和注意事项：

1. 规范命名

• 统一命名策略对于样式（颜色、文字、间距等）非常重要，比如 primary-color, secondary-color, heading-1, body-text 等；

• 组件名称／属性也要与开发端达成共识。

2. 抽象与复用

• 样式尽量抽象，不要一个地方用一个完全只在那里的样式，应该复用色彩、字号、线条这些通用样式；

• 组件也应做到模块化、可组合。

3. 与开发保持沟通

• 在设定变量名称、组件别名时，要与开发团队对齐；

• 导出的样式文件／图标库格式要满足当前技术栈要求。