设计系统指南
从去年开始吧，就一直看到design system这个词，似乎一夜之间大家都在搭建自己的Design System， 想想这也不是什么新概念，Apple 的HCI ， Google 的 Material design 不就是设计系统么， 为什么突然又如此的流行。
今天抓来了Uxpin 上关于 design system的一系列文章， 研究一下这到底是什么， 到底怎么搞。
Create the UI Inventory for the Design System
为设计系统创建UI库 Create the UI Inventory for the Design System
1. 创建模式清单（ Create the Patterns Inventory）
将设计的图形模式截图， 形成一个不同模式（pattern）的清单。
从你的产品中收集这些案例。 不管是截图后将他们集中到同一个地方， 还是使用原型工具， 或者是从产品文档里来整理整个产品的pattern，
检查前端代码和/或与开发人员讨论整个代码库中使用的体系结构方法。 尝试确定前端体系结构是否为模块化的，以及是否可以使用它来对清单中的模式进行分类。
前端开发人员经常使用模块化体系结构来工作，该体系结构可用于组织设计系统中的模式。 谨慎对待并保持批判性思维，但绝对不要忽略已经存在的东西。 例如，在UXPin，我们的前端开发人员将CSS分为：元素，模块和组件。 LESS文件中存在的模块性帮助我们为该系统奠定了坚实的基础，并使库存更具可操作性，可以作为我们将来冲刺的参考文件。
如果存在模块化前端体系结构，则使用体系结构中的类别对清单中的模式进行分类。
采取从产品中收集的模式并将其分组。 例如，如果前端架构的最低层是一个元素，则收集所有按钮并将它们放在“元素按钮”类别下。 您可能还需要记录指向与给定元素关联的所有样式文件的链接。 您不仅会使用相同的语言与前端开发人员进行交流，你也会指出一系列的不一致性。
如果是模块化前端架构，请在清单中对模式进行分类
即使现在你的生态系统中没有模块化的前端架构，你也必须对清单中收集的所有模式进行分类。 您现在不必决定设计系统的整体架构。 只需找到元素的通用类别（按钮，表单字段，注册表单等等），整个团队和利益相关者便可以迅速注意到目前所存在的不一致性。
2. 创建颜色清单（Create the Colors Inventory）
设计不一致的一个典型的原因是整个产品组合中使用的颜色。 例如，UXPin的颜色清单出现了大量的冗余，拖慢了开发过程。 在我们的设计系统出现之前，UXPin使用了116种颜色变量和62种灰色阴影。
遍历代码文件并列出所有颜色变量和/或CSS文件中使用的所有颜色
注意出现特定颜色的地方数量
3. 创建字体排版清单 （ Create the Typography Inventory）
在一个复杂的项目中，排版可能会很快失控。 整个项目缺乏一致的字体排版，使信息体系结构混乱不堪，用户难以理解，同时由于代码分散，还增加了产品维护成本。 通过盘点文本样式，可以向团队和利益相关者展示样式不一致的地方。
浏览UI并通过浏览器控制台检查所有文本样式。
记下一个项目中文本样式的任何不一致之处。
按信息重要性的顺序（从h1到小文本）对文本样式进行排序来形成字体排版。 如有必要，创建多个比例
如果使用CSS预处理器-请注意用于生成文本样式的mixin和变量，并尝试将其与清单中的样式匹配
在现代的前端开发中，CSS预处理程序通常通过使用mixin（例如Sass mixins）来生成现成的文本样式。 在清单中引用这些简单功能可以帮助您与开发人员进行交流，并且对于实施新的排版非常方便。
4. 创建图标清单 （Create the Icons Inventory）
图标为用户体验提供了必要的上下文，并加快了大多数界面中关键动作的识别速度。图标使用不一致会导致用户极为困惑并增加维护成本。
识别产品中使用的所有图标库
在图标之间标记不一致（例如，在一个UI中使用了来自不同家族的两个图标，分配给不同操作的两个相似图标，分配给同一操作的两个不同图标，等等）
检查是否有不同的方法来实现整个产品组合中的图标
有多种使用图标的方法。内联SVG，作为数据URL的SVG，icon font -与开发团队联系，或浏览代码以了解设计和开发生态系统中使用了哪些方法。如果使用了不同的方法，则应注意一下，因为这可能会增加整个产品的不一致之处，并进一步减慢开发过程。
5.创建空间清单
空间是任何UI的关键要素，设计人员和开发人员必须有效地管理空间。 将添加到产品中的各种网格添加到您的库存中，也许还可以深入研究容器中的填充物以了解任何不一致之处。 列出和记录整个产品组合中使用的网格系统（如果有）
。
看完这开篇，我暂时没有打算继续下去，因为我发现design system暂时不适合我们这小公司。
我需要顶多是一个的是一个 style guide , or pattern library （ 在搞行动村1.0的时候，有在Sketch里做过1.0 的style guide ) ，但是还需要更加系统的进行一下研究。
Uxpin 这篇还是相对来说更加偏已经有一些列产品系的大公司来做规整，将其梳理完成后搭建自己的设计系统。
另外， 如果你正在研究Design System ， 推荐一下文章：
这个系列一共有6篇，具体作者有在每篇文章下面罗列。
