Sketch—Symbol的建立与使用

Sketch在52版本更新中，大力的强化了Symbol这个功能。

之前看到同学在用的时候真的就一直抠666...

真的可以很大程度加强的工作效率。

正文开始之前先来一个Sketch 52版本官方视频开开眼（视频来源于网络）

好了，视频看完了，那就开始正文了。

下面我简单的为大家介绍一下Symbol的基本建立以及功能使用。

原谅本人学识有限，我也才刚开始接触这款软件，所涉及的知识也非常基础，欢迎大家提出宝贵意见。如若有错误或者遗漏，希望大家能够多指点！

一.Symbol的介绍

1.Symbol是什么

Symbol在Sketch中译作“组件”，它是一种特殊的组，能被多个页面重复引用，在Symbol中修改样式，其他页面也会同时被修改。其实也就跟Flash的“元件”、Axure的“母版”是差不多的意思。

2.Symbol应该怎么用

上面提到了，能被重复引用，能够批量修改并生效到所有页面。 产品中部分元素经常会重复出现在多个页面中，例如菜单、搜索框、登录头像等，我们可以提取出来将其创建为Symbol，并应用于相应的页面中。

二.Symbol的建立

1.理出要做的结构（因个人也是刚学习的，所以还是先把思路弄清楚吧）

01.就以导航栏为例子，整块导航栏，分为四块——左侧、中间、右侧，再加底部背景。

02.然后分别画出相应图形或者文字。（这里下面分版块的地方，底色不应该有颜色的，这里是因为文字是是白色的，方便看见文字，所以我填充了颜色）

2.创建symbol

01.我先以最底层开始建起，以左侧为例，直接选中然后点击Create Symbol，在弹出的框中输入Symbol的名称即可。为了方便理解，我就直接命名“导航栏/左侧/返回”。

02.其他Symbol的创建同理。创建完成后，得到下图所示的一个基础Symbol库，然后调整好位置，进行归类（灰色部分是透明，因为文字是白色，所以我画板填充了个灰色，方便能看清文字和图形），如下图：

这里需要注意的一点就是，图层的命名。在Sketch中，如果在图层中命名使用了“/”这个符号，会被自动将它视为分隔标志，当然分组能方便地复用Symbol（后面详述），所以命名时一定要注意（最好是能英文命名，因为我的英文确实太辣鸡了，就不在这边展示了，哈哈）。

03.然后这个时候，奇迹就出现了，点击顶部Symbols就会发现已经有层级的出现了；选中中间标题，会发现右侧可以直接编辑“标题”的里的文字。

前面说过的以“/”隔断命名就可以直接生成层级，然后按层级显示，这就是命名的重要性！

三.制作嵌套Symbol

看到这里，可能你也会觉得这个好像也没多牛的样子啊，我为什么要用“也”字呢，因为我之前也是这样的，但是别急，现在看来是有点简单，可思考一下，如果说有很多个页面的导航栏需要更换怎么办呢，下面就介绍一下解决这个问题的办法。

首先，先拿整个导航栏中的右侧图标来说，如果说我做页面的时候想换个图标用，那难道还要重新这样来一遍？不用！

1.先将“导航栏/左侧/返回”整个画板直接复制过来一份，然后把图标改成自己要的东西，我这里改成了“添加”图标。然后依次把剩下都按上面的操作做完。Symbol库就成了这样：

2.此处加注一点：在如果有文字，一定选择文本排列方式，这里是居中整个页面的，所以我选择的是居中，这样后面任意修改文字就都是居中的，也是小知识哦。

3.此时，返回Page页面，再次点击Symbols时就会发现有层级了，层级里也有更多的选择了。

4.此刻在Page页面中把所有转换成Symbol的图层选中，然后再建立一个Symbol，命名为“导航栏”。这样，简单的一套组件就已经完成了。

四.复用Symbol

现在，来到重头戏，上面提到过，Symbol可以复用，现在就来提下复用的奥义。

1.打开Symbols点到导航栏，右侧就会有很多选项，依次就是我们之前在Symbol库里做的然后就可以自行更改里面的内容信息了。甚至还可以直接更改里面的文本。

感动吗？这对实际工作应该会有很大帮助吧，会有效提高工作效率的。

五.维护Symbol

如果是需要更改里面的部分内容，直接在页面双击任意Symbol，或者点击pages下方的Symbols，可以进入Symbols页面，在里面对Symbol进行更改即可，所有更改会生效在复用的页面用。

---

然后呢，再说一下，文中案例出现过换颜色，就再提一下更换颜色的其他方式。

一.Layer

这个呢，个人理解有点像是Photoshop里的复制图层样式、粘贴图层样式。也就是可以无限选择复用的。我这里以三个颜色为例展示一下。

1. 新建三个矩形，分别填充上颜色（添加些图层样式也可以），我这里用红蓝绿三个颜色来拟定。

2.选中一个矩形，点击右侧APPEARANCE处下面的NO Layer Style（如果没有做的话默认肯定就没有的），然后点击Create new Layer Style来新建一个，然后命名好，也还是要分层级哦，我这里命名为“颜色/红色”。

然后其他两个颜色依次进行上面的操作。

3.三个都完成之后呢，就可以直接进行调用颜色和图层样式了。

二.Symbol

1.在Page页画一个矩形，然后将矩形转化为Symbol，我这里命名为“颜色”

2.进入Symbol页面中，将“颜色”矩形再次进行转化为Symbol，注意不是那个组是只是矩形哦，命名为“颜色/紫色”，将填充色改为紫色。

3.再将“紫色”矩形整个画板选中进行复制一份，填充改成黄色，名称更改为“颜色/黄色”。

4.返回Page新建一个矩形，再拖出来一个颜色组件放在矩形上，然后进行蒙版遮罩。就可以任意更改颜色了，如需增加其他颜色，就Symbol页面进行编辑增加就好了。

当然，方法有很多很多种，只要自己用着舒服，能给自己提高效率就行，用哪种肯定是没有限制的。

最后来一个小知识总结：

1.同Symbol尺寸应该要保持一致，如果尺寸不一致，替换后样式会出现问题哦。

2.在画布上画任意形状或者其他图形之类的，都可以直接替换为Symbol，并且沿用Symbol的样式。

3.命名尽量用英文来命名，学好英文很重要，不要像我一样辣鸡…

4.命名时层级之间一定记得要加“/”，Symbol就会自动分好组，更方便进行复用替换。

---

以上就是本文Symbol的建立与使用的大概内容，个人理解，哈哈哈~

原谅本人学识有限，所涉及的知识也非常基础，欢迎大家提出宝贵意见。

也是第一次写文章，希望对大家有所帮助。如若哪里有错误和遗漏的地方，还望大家能多指点~

如果觉得还不错的话，记得帮我点个赞哟~ 谢谢啦