教你学会如何使用sketch library

概述
最近看到有个问题争论的很火热：“设计规范vs设计创造力，哪个更重要？”，在我看来两个同等重要，没有设计创造力的设计，设计规范再好也不能说是一个好的设计。同样，如果缺少设计规范，在一些较大较复杂的产品上面，也十分影响团队协作。设计规范不是素材的拼接，它不仅可以保证产品的统一性，同时也可以和其他产品拉开差异性。

网上有许多教程是教你构建设计体系的思路，但是对于入门同学学习成本较高。本文主要是教你如何使用工具。

工欲善其事，必先利其器。

目录

1.什么是symbol？

2.sketch library是什么？它和symbol是什么关系？

3.怎么创建library？

4.怎么和团队同步设计文档？

正文

1.什么是symbol

Symbol是sketch里一项强大的功能，它可以重复调用你画板和页面的元素，是构建设计体系的关键。

Symbol由两部分组成：父元素和子元素（也可以称为主元素，子元素），他可以定义配色、图标、按钮、表单等等。

当修改父元素时，子元素们会统一跟着变化。子元素修改不会影响根元素。这样当某一控件调整的时候，就可以在事先创建好的父元素上调整，并应用于文档中所有的画板和页面。就是这样使用Symbol来节省时间和改善工作流程。

2.library是什么？他和symbol是什么关系？

symbol是构建设计体系的关键，但是symbol仅限于文档内部，在不借助于插件的情况下，难以实现多个文档乃至设计团队的文件同步。
library就是将symbol库在多个文档和多个设计师之间实现文件同步，由此来同步团队的组件库。

3.怎么创建library？

在创建library之前，首先要有一个symbol库。

symbol是根据命名来区分层级的，sketch是通过“/”符号区分层级结构。让我们先来建一个symbol库。

第一步：创建图层样式组件
他可以带有填充、描边、投影、透明度

新建一个sketch文件做为UI Kit，在新的面板上建一个形状，并填充你想要的图层样式。命名可以是组件/所用类型/颜色名称，例：颜色/系统/红色、颜色/系统/蓝色…以此类推

第二步：创建文字样式组件

输入一段文字，文字内容可以是他的分类，例如：标题 title、正文body…

选中文字，在sketch右侧栏选择创建字体样式，命名可以是：字号/文字层级/对齐方式，例：14pt/正文 body/居左对齐

第三步：创建控件组件

例入按钮组件，先在画板上创建好一个按钮，将这个按钮选中右击，创建组件（symbol），命名可以是组件/类型/颜色/状态，例：按钮/常用按钮/蓝色/高亮状态、按钮/常用按钮/蓝色/置灰状态…

其他控件也是以此方式进行命名

按照上述步骤将symbol库创建完成，这里层级结构需要根据项目需求去命名，对这有疑惑的同学可以参考下iOS Design、Material Design、Ant Design的组件库等。Ant Design设计团队非常优秀，😁向他们致敬并附上Ant Design的设计资源：Ant Design

4.怎么和团队同步设计文档？

symbol库创建完成后，就可以将他传到云端和设计团队共同使用和维护了。如果团队人数不多，蓝湖网盘可以满足需求（类似的产品很多，这里拿我用的示例）。

如果设计团队人数较多，可以看一下Abstract，想了解的可以移步知乎：版本控制工具 Abstract 是如何提升设计团队协作效率的？

下面我将以蓝湖网盘为例（蓝湖创建团队的步骤此处就不讲了），首先安装好蓝湖网盘，打开mac的file，将symbol库放到蓝湖网盘文件夹。

在文件夹中打开symbol库，然后在sketch的文件-保存为library，然后关闭就完成了。让设计团队的其他人也重复上面步骤。

现在随便打开一个sketch文件，在顶栏symbol里就可以看到你创建的library了。

附件放了Meterial Design和微信小程序的UI Kit给大家参考
Ant Design：https://ant.design/docs/spec/download-cn
iOS Design：https://developer.apple.com/design/resources/#ios-apps

蓝湖网盘：https://lanhuapp.com/sync

Abstract：https://www.goabstract.com/   使用方法（知乎）：https://zhuanlan.zhihu.com/p/33990415