设计系统/组件库全面知识整合

 http://symboldesign.co/

国外知名设计团队 Craftwork 出品的设计系统，整个系统的颜值很高，分类也很详细，独特的置入了一个插画系统。缺点还是贵，58美刀一次性购买。

 3、Nested Symbols

 http://janlosert.com/store/symbols-styleguides

组件没有之前两个那么丰富，但是足够工作使用，最重要的是它免费！而且官网有特别详细的使用说明，非常良心。

4、Frames

 http://framesforsketch.com/

一个专门为网页设计服务的设计系统，最牛的是里面有140个网页模板可供调用，在做网页设计时真的能快速出图。48美刀一次性购买。

5、Prime

 http://www.primedesignsystem.com/

与Symbol2差别不大，同样有丰富的种类，高颜值，但是是里面最贵的一个，68美刀一次性购买，因此不太推荐。

小结

目前市面上销量较高口碑也不错的通用型设计系统就是这五款，我个人比较喜欢第一和第三个，第一个是因为它组件真的很丰富，第三个是因为它免费。它们都有上文中提到的基础系统，本质上差别不大。有需要的酷友入手其中一款就足够使用了，最主要的还是花费时间改成自己产品的设计系统并持续维护。

总结

在文章的最后，通过一张脑图为大家总结复习一下整篇文章的脉络与知识。首先在理念篇为大家介绍了设计系统的概念重要性以及引入了原子化设计的构建方法。在实战篇，介绍了五个基础子系统颜色、字体、图层样式、图标及栅格系统，还有一个核心的组件系统。说明了构建时需要注意的地方以及呈现方式。在最后的资源篇，给大家安利了5个热门的通用型设计系统。

很开心第一次在站酷上与各位分享我自己在设计上的一些总结与感悟，第一次写文章，不足之处请多包涵，也希望各位在评论区给我留意见以及你们希望了解的知识方向。如果这篇文章能给你带来一点启发记得帮我点个赞，之后我也会持续在站酷上分享自己的设计知识，欢迎关注，也希望能与各位酷友共同进步。

相关资料

（有空的话记得扩展阅读哦~）

http://medium.com/sketch-app-sources/sketch-tools-for-managing-a-design-system-ca8845d1903b

http://medium.com/free-code-camp/how-to-construct-a-design-system-864adbf2a117

http://builttoadapt.io/intro-to-the-8-point-grid-system-d2573cde8632

http://medium.com/sketch-app-sources/how-to-create-a-design-system-in-sketch-part-one-fd450dccab10

http://medium.muz.li/creating-a-ui-component-design-system-step-by-step-guide-5c18b5a2f529

FEVTE编注：更多平面设计理论学习请访问飞特网平面设计理论知识栏目，地址：https://www.fevte.com/plan/shejililun/