废话不多说，明人不说暗话，案例走起！！！讲解symbol案例的同时，插件的介绍以及使用小技巧和注意事项，我会穿插在案例之中，这样更加便于大家理解插件的使用场景。

步骤开始啦：我们来做一个QQ的navigationBar

一、创建一个矩形、一个圆形头像、一个文本、一个图标

小技巧：

1、关于头像素材，除了可以使用sketch自带的素材库里的头像，也可以收集并创建自己的素材库。在素材网站上收集需要的头像照片（尽量收集正方形，上半身的头像照片），本地建立一个文件夹，把照片拖进去（可以按照头像的风格分类建立不同的文件夹，比如高冷范、商务、小清新等）。打开sketch——首选项——素材库，直接把文件夹拖进去即可（注意本地文件不可删除）。

二、把矩形、文字、图标分别创建成symbol

注意事项：在把“消息”创建成symbol的时候，最好在原位加一个稍大大一些的矩形（去掉描边和填充），把“消息”和这个矩形一起创建成symbol（这个矩形的作用相当于占位符，symbol创建完成后可以删除），否则当进入symbol页面的时候，画板会非常小，而symbol编辑页面中，只有画板尺寸相同的两个元素才能被判定为同一组。

小技巧：

1、如果想要批量创建symbol，可以使用 Batch Create Symbols 插件。

2、命名的时候尽量使用英文来命名，并且用 "/ "符号作为隔断，sketch会将"/ "作为组的分隔标志，方便分组找到并且复用。

三、选中所有组件，再次创建成一个symbol

小技巧：

为什么要先把单个元素创建成symbol，又把元素组合起来再次创建symbol呢？这里需要提到一个原子化设计的概念。这也就是传说中的组件思维模式，也是symbol的核心使用功能。

四、添加组件选项

让我们一起进入另一个时空，去往symbol的隐藏世界吧！！！

可以通过双击任意一个被创建成symbol的元素，进入symbol原件编辑的界面，也可以过通过点击左侧组件进入。

小技巧：symbol一旦多了看起来会比较乱，可以使用symbol organizer 插件整理symbol的位置并查看。

复制组件把里面的内容改成你需要的样式，注意：命名同类前缀需要相同哦。

另外导航栏的颜色，也可以通过创建symbol来修改，在这里我使用了遮罩功能。

选中导航栏，点击上方symbol导入我们做的颜色symbol,记得遮照层要放在上面，然后点击被遮照的图层，右点击选中蒙版，这样就被遮照了。导航栏被覆盖上颜色状态了，后面改导航栏颜色都可以直接只改颜色状态这个symbol了。（遮照快捷键：control+command+M, 图层向上一层：option+command+向上三角形）

五、噔噔噔！完成啦

现在就可以回到Page页啦，可以通过右边的选项框开心的各种调整啦，简直不要太爽！

以上是一个很丑，但也很简单的symbol嵌套小案例，如果一旦symbol组件很多，那么命名什么的其实会让人很头大的，复制以后改画板的名称也很麻烦。所以你还需要以下插件啦！

Rename it  —— 批量重新命名 ；

Symbol Manager —— 对symbol进行重新命名，或拖拽改变嵌套操作；

Symbol namer —— 将symbol实例重命名为覆盖文本值；