设计系统
设计系统是摹客3推出的一个集中管理的设计资源模式，用于在摹客3中查看、管理项目中所用的样式（颜色、字体等）、组件、图标，使这些设计资源与开发端保持一致。
其核心作用包括：
-
可视化
-
为样式资源可添加 CSS 变量名，一键导出 .css
-
自动生成图标库文件（字体图标、SVG图标）
进入设计系统
在编辑器内，右上角切换原型/UI模式下拉菜单里，增加进入设计系统入口，点击即可查看设计系统。
样式
在文件内创建了文本样式、颜色样式、效果样式、网格样式后，设计系统可自动展示样式资源。创建样式资源教程请参考：001样式资源
选择样式，右侧会显示样式属性、别名、描述等，也可以查看和复制CSS代码。
导 出样式
摹客3设计系统支持导出CSS样式资源，同时会将别名自动添加至CSS代码中，相当于变量名称，方便后续研发使用。
图标
图标资源，在画布内需要创建名称为 @iconset 分区，并将图标组件置入到此分区中，在设计系统中就会自动展示图标。
导出图标
同时支持将图标批量导出为字体图标、SVG图标，方便后续研发使用。
组件
在文件内创建组件后，设计系统会自动展示组件资源，同时当组件有添加状态或自定义属性，也可在设计系统内切换查看状态。创建组件资源教程请参考：002组件资源
也可以对组件设置做基础设置，包含组件名称、别名、描述、添加链接等信息；如果需要编辑源组件，点击“跳转到源组件”，则会回到编辑界面。
最佳实践Tips
为了最大化设计系统模式的价值，以下是一些建议和注意事项：
规范命名
统一命名策略对于样式（颜色、文字、间距等）非常重要，比如 primary-color, secondary-color, heading-1, body-text 等；
组件名称／属性也要与开发端达成共识。
抽象与复用
样式尽量抽象，不要一个地方用一个完全只在那里的样式，应该复用色彩、字号、线条这些通用样式；
组件也应做到模块化、可组合。
与开发保持沟通
在设定变量名称、组件别名时，要与开发团队对齐；
导出的样式文件／图标库格式要满足当前技术栈要求。