如何制作Sketch组件库-Web基础组件篇

北京/交互设计师/8年前/26461浏览

版权

灵活利用Sketch的组件及智能缩放的功能再结合Sketch的Libraries功能，让你的组件库更智能更灵活。

很高兴最近有很多设计师朋友对这篇文章都很感兴趣，说明很多人对于制作组件库这件事情开始感兴趣了，但是这篇文章是2017年的文章，随着Sketch版本的升级以及我们在实际使用中的一些经验，组件库已经升级了几个版本，组件库的设计逻辑已经有很大的改变，这篇文章可以参考部分内容，但是组件嵌套的规则建议大家看我另外一篇文章 Sketch 基础组件库文件制作逻辑及推荐工具，这里介绍了两种设计组件库的文件逻辑以及团队协作的工具，希望对大家更有帮助。

----------------------------------------------------------------------

2017年初开始使用Sketch来设计后台系统，很大程度提高了设计师的工作效率，毕竟每一个后台产品都涉及大大小小最少二三十个页面，现在终于不需要每次在修改文件的时候逐一打开每一个PSD文件来修改。

2017年中我们完成了第一个Sketch系统规范文件，而且我们的前端工程师也发布了一个基于view的开发框架，解决了一些内部功能后台的设计问题，直接由前端工程师就能完成一些基础的功能页面制作。不过设计师使用的频率并不高，原因是每次都需要打开规范文件将组件复制过来使用，而且原组件的灵活度不高，这样并没有能很大的提高工作效率。随着Sketch47.1版本更新，资源库功能的更新让我们可以灵活的在不同的文件中导入组件库，这让我萌生了要重新制作一套组件库的想法。

另外一点是我喜欢的一个设计师janlosert放出了一版免费Sketch组件，这让我有了一个Sketch规范文件如何制作的参考。如果你的公司没有交互也没有更多的资源去分类整理组件的话，antdesign是一个很好的分类及样式参考，当然如果你想要学习如何整理组件的话，腾讯的这篇文章可能会带给你启发，《在整理设计规范中变强》。

这样我开始了文件的制作，前前后后花了大改三周的时间，基本完成了文件的制作，现在组内的设计师已经开始使用组件库，反馈还不错，很大的提高了工作效率。

制作规范系统文件大家可以参考上面janlosert的免费文件，下面几个是我认为比较重要的部分在制作的过程中需要注意的问题：

1、配色

这是很重要的部分，因为我是基于第一套规范文件来制作的，所以我们已经有了自己的一套配色，并且之前已经使用在几个产品设计中，所以如果你想要建立自己的规范系统的话，如果已经有成型的产品，可以从产品中总结配色，如果没有的话，还是要根据公司业务拼装几个典型页面来检查你的配色，再制定配色规范。可以参考antdesign的配色规则，它有一套配色算法，可以制定一个标准色，然后自动生成色彩梯度。我在制作的过程中使用的方法是设定一个深色，然后使用透明度来设定标题色、正文色、辅助色、失效色、边框色、分割线、背景色，当然，这种做法可能没有基于算法来的结果符合一定的规则，完全靠感觉。不过制作Sketch规范文件的好处就是如果你对你的配色不满意，你可以任意更新。