原子设计系统（均称为设计系统）这个词应该已经流行很久了，像蚂蚁金最的 Ant Design 3.0 说是基于「设计系统」进行构建的。如果你没有了解过原子设计系统，那么我建议先对原子设计系统做一个初步的了解。因为这篇章并是原子设计系统的科普。
虽然设系统这概念出了很久，但从设师的角度看，业界仍然存的「伪」设系统。什么这么？
设计系统是从 Style Guide 上发展出来个设计法论。所以设计系统其实并不是解决了「设计风格」这个问题，而是在尝试解决 Style Guide 在实践存在诸多问题。
先来传统运用 Style Guide 中存在的问题。
当明确一个设计需求，我们根据 Style Guide 进行规范化的设计，输出对应的一系列组件。果 Style Guide 中没有明确定义的时，能就自己创建一样式，最付开，能等到产品完上，才根据之前的设计结果修订 Style Guide 或者组件库。
整个实践模式如图示：
这种流程存在诸多问题，如组件库和 Style Guide 的更往往因为项目迭代速快而滞后；创建的组件与之前的 Style Guide 存在冲突；更组件库和 Style Guide 又要时间……
当然我这的基本都中小型公司， BAT 这样的公司不能包含内——一旦人多了之后，任何设的问题就都只变理的问题了。
而正是为这实践模存在诸多问题，效率上有待提升， Brad Frost 才会提出设计系统这个概念。值提是，Brad Frost 在 2013 年提出设计系统这个概念时候， 他团队有 4 个。我想也正是为团队小，才更加需要效率提升吧。
计系统提出的一个实践模式是先计系统，而后根据计系统来完成业组件库。如下图所示：
这个好不言，组件库业线可以同步更新，一次修改，便可以多端响应。完美解决 Style Guide 模式中存在的种种问题。
但是问题又来，怎么样才以现种践模式呢？用程序的说，设计系统应该抽取哪内容，分别让业务与 Style Guide 继承呢？
答案就是：模，组件，原子 。这是为么设计系统被称为原子设计的原因。
基于前面到的，设计系统中必须做到的一点是：当你改任何一个原子，你有自信他有依赖于这个原子的件全自更。只有满足了这一点，设计系统设想中的效率、解放生产才会真正实现。
我人猜测，Brad Frost 应该受到过 React 的启发，因 React 作端模块化发的鼻祖，其源时间 20135月，与文章中提到的 2013 吻合，同时 Brad Frost 端发者，必很了解React。
设计系统的落地关键
论的分讲了，接来是落地的键。只有到了这个地方，才够鉴别各种谓的「设计系统」到是是真的设计系统。
还记得我们之怎么的吗？修改设系统中的任何一原子，整系统都应该能够被响应到。
那么在 Sketch 有什么可以到这样效？，分享样与嵌套符号。
只有理利用了这个功能，才能真正达计系统的效果。如果在 Sketch 中没有实现式共享，仍然只是 Style Guide，算不上一个真正的计系统。没法全局响应就味着没法执行「先计系统，后业组件库」的流程。
让我们来看下现在风头正盛的 Ant Design 组件库。
可以，随便选取的一个颜色并没有任何共享式，这就味着如果去修改这些颜色，组件的式并不会跟着改变。
在查看完组件中的颜、字均没有对应的共享样式，基以断定 Ant Design 的 Sketch 文件并没有构成正意义上的设计系统。
凭的主观判断，这做的因可能有个：
- Ant Design 团队内部有套设计系统更新工具，可以快速 Sketch 已存在原子进更新，是并不会以共享样保存。而为原，这个工具没有发布。
- Sketch 文件发布之初就没有想过层面的颜色、字体等还会被替换，因此没有去置共享式。个人认为这种可能性会更大一些。
是不管我如何去揣测，个法全局更新 Sketch 文件，哪怕具有再多组件，于设计师来说，接使用价值也是常有限。 为设计师没法把这么多组件接、快速地复用到自己业务场景，那么这些所谓「设计系统」往往变成了单纯「参考图」，缺少工程使用价值。
实际上， Ant Design 对于开发者来说价值巨大，个人在做开发的候用起来也非常爽。但是对于计来说，真正的工程价值可能就只有「置行间距的候总是多个 16px 就好」之类的经验了。
而且乎上对 Ant Design 予以评的绝大部分是开者，而不是设计师。所以见一斑。
「伪」设计系统
除 Ant Design 之外，还有哪「伪」设计系统呢？我从网找到大概10来份设计系统的 Sketch 文档，一一做检查与测试。
1. IBM 的 Carbon Design
2. Shopify 的 Polaris
3. Salesforce 的 Lightning Design System
它只义了一主色，其他颜色字体都共享样式。
4. Atlassian Design Language
他们没有 Design System 自称，但是这里我放上来了。
Sketch 件中一样没有定义颜色的共享样式。过难得的是它做了字体和阴影样式的定义。
以都公司的 Sketch 文档。可以看到，基本出的设系统都「伪」设系统，对原子过良好义的很少。我究其原因还因不会考虑到供其他设师「复用」这些资源供自己的项目使用吧。我愿意把它们当披「设系统的皮」的 Style Guide。
更多设计系统可以从StyleGuide.io 这个网站上找，我不过是挑选了其知名些来测试。
「真」设计系统
我相信接下来内容大家可能会更加关心，真正称上设计系统有哪些呢？ 为有这些设计系统才能帮助提升我们日常工作效率，让生活变更加愉悦。
1. UXPT
UXPT 全称 UXPower Tools，应该市面真的设系统中完整的一家了，同时 Web 、移动端的设系统，均可响应原子操作。
我在前文提到原子级颜色、体、阴影样等等这些都可以自定义，而改，所有组件能够步改。
拿修改颜色举个例：
可以当修改式并进行同步后，所有组件的式都进行了修改。
UXPT 用 Style Stacks™ 的方式现一次修改颜，端修改的需求。简单来说就是下图所示的样子。
另外还有几个很不错的特，比内容自适应、自定义符号等等。
△ 内容根据尺寸自适应
△ 基「分子」自定义页面内容
△ 阴影的样式也以做定义设置
还有开箱即的 Style Guide ，既有白天模式，还有黑夜模式。
这个设计系统好是好，过移端 + PC 的合集要 80 刀，还是稍微有点贵，在 Gumroad 上售卖。
2. Frames
Frames 是一个门针对 Web 的设计系统，同样以现原子系统中的一次修改，端复用。
我个人认为它最大的优势就是供了百个模的模页，可非迅速地展示页面。
△ 个视频展示的就是用模板页在短短几分钟内完成一个主页的设计。
Frames 中还供了一些可视的图表，但是这分的设计和复性都是特别众。
△ 图表
这设系统卖 48 刀，也 Gumroad 售卖。
3. Rojcyk 的 iOS Blueprint
iOS Blueprint 是一个专注于 iOS 的设计系统。在界知名蛮的，连 Sketch 官方都有报道它。
同时它的使指南做的非呆萌。
除了基本的 Library 之外，供了一些预先通的模，如登陆注册、忘记密码等等。改个颜色、改个名字基本上可开箱即了。
这个设计系统宜一些，Gumroad 上卖 20 刀。
4. Cabana
Cabana 是针对 Web 端的一个设计系统，我个人感它最大的特是用 8 点网系统。官网上个特也是一个展示。样一来在进行排版局的时能够很的节省时间与精力。
此外它还供了一些图像处的滤镜，可对图片进行快速处。
△ Cabana 的设计风略偏黑暗
我个人虽然大 Cabana 的格，过修改与自定义对于设计系统来说却是小菜一碟。设计系统之为设计系统，就是够通过原子层面的调整，页面呈现全一样的效果。
Cabana Gumroad 卖 48 刀。
5. janlosert 的 Nested Symbols & Auto-Updating Styleguides
这个设计系统是上已有的设计系统中唯一免的存在。我个人猜测作者可是从 UXPT或者 Cabana 修改过来的。因为中一些标注么的都一样……
△ 右侧的 Overrides ，和 UXPT、Cabana 的标注形式一模一样
这设系统其他相比，功能其实什么特别的。可能的特点就「免费」吧。
这个作者配套提供了份 React 组件代码，在 Gumroad 上卖 9 刀。
6. Predix
Predix 算公司出品的设系统，但仍然这些设系统里面不友好的一。因它提供自义的「接口」，如果去自义就自己找相应的 Symbol 。
7. UIT
我厚着脸皮把自己基 UXPT 修改的设计系统贴上来。UIT 主要的贡献是做地化处理以及提供 Button 样式设计的自定义。
△ 一基的样式接口，直接修改几个主就以产出不同的设计系统
当时还做一下使用指，来因为比忙就没继续做下去。不使用方法其和 UXPT 一样。
UIT 基于 UXPT 修改，没法商，一开始做来就是为了习一设计系统的设计流程。
我以这些设系统对于小公司、独立设师以及新人的帮会非常。
设计系统已经完成了大部分组件定制，在实现业务不需要多考虑按钮圆要多大，距要留多少，可以更加聚焦于业务逻辑本身，节省时精力。
另一方面，计系统有的式定义能力，可以针对不同需求高效地产出对应的计系统，然后快速复用组件。
刚行的新人也以通套设计系统去学习与研究设计的逻辑与其遵守的规范，一背的设计理念。
最后再说些别的感想。
其实我人对 Ant Design 的望还蛮高的，科学的设方法与对细节的把控我都非常赞赏。不过可能也因望越，失望也越。AntD 对于发者非常友好，箱即用，但从拿到的 Sketch 文件看，团队似乎并考虑过如何帮非 AntD 的设师提升作效率，解产力。不知道还发布的 Kitchen 会哪些惊艳的表呢。
另，如 AntD 要成为设计界 Bootstrap ，可能未来需要做是能够完成原子与分子绑定，让设计师也能够享受到「开箱即用」体验。
相比起来，Airbnb 在「解放计生产力」这条路上的会更远一些。有兴趣的同学可以去翻一翻计队一篇《Sketch Interface》的文章，甚至在探索机器学习计系统的结，最终达绘制型图就能直生成业界面的目的。
之前在研究计系统的候， Airbnb 的 Alex Schleifer 说的这句话，触深刻：
Here’s the simple truth: you can’t innovate on products without first innovating the way you build them.
翻译过来大致就是：这是一个简的真理——如果不在方法层面有所创新，你就不可能在产品上有所创新。
我想我们研究设计系统也是此，改变我们原有的设计思想、设计方式，我们才能够以更加高效，更加优雅地姿态去创造新的产品吧。
在前端开发中有个词叫做「技术」，如果大公司的设计系统供原子层面的自定义，说定等到未来设计界会来一个「设计」这样的词。
欢迎关注作者的微信公众：arvindesign
浙公网安备33011002017549号