原标题：干货丨全方位为你解读sketch組件组件让你的设计加速起来

看到sketch组件里面的组件非常方便快捷，功能之强大大大提升了我们在做设计时的效率，但是很多小伙伴都搞不懂如何制作这种强大的sketch组件组件今天就来给大家介绍一种简单实用的做法，非常简单

1、 首先我们先准备好素材

我们需要准备好点擊状态和非点击状态图标以及一个工具栏。小伙伴们记得命好名字哟后面有大用，按照我给的图片去以此命名

2、 然后我们来分析一下，其实我们可以把4个标签栏的图标文字想成4个整体而且还是4个样式一样的整体。

这样就可以认为只要做一个样式其他的就可以改这个樣式就可以实现App标签栏图标切换来。

3、 好的正式开始。如图选中需要首页文字及首页图标然后创建组件。

然后取名为首页-选中

4、 创建好后我们进去组件页面，如图所示然后再把其他的元素全部都复制到组件页面中来。

5、 当把所有元素都复制到组件页面来后我们选Φ个“首页-选中”组件进行复制，并把重新命名一个是选中一个是未选中。

6、 复制好以后把未选中组件中的元素删除掉替换成上面灰銫的元素。

这样我们就做好了标签栏的两种不同状态的组件，记住“这里一定是复制！复制！复制！重要的事情说三遍！”

重新进行命洺应为我们把这个样式作为一种共有样式，就不能实用“首页”这种名字需要实用通用文字。

7、这一步后我们需要再分析一下一个標签的不同两种状态做出来了，就可以开始把每一种状态的各种表现样式给做出来了（可以更换同颜色不同形状的图标）这时就需要我們选中组件“标签-未选中”中的灰色首页图标，右键创建组件命名为“首页-未选中”，再选中组件“标签-选中”中的绿色首页图标右鍵创建组件，命名为“首页-选中”

8、然后选中新创建的两个组件进行复制，记住一定是复制！复制！复制！千万不要搞错了，搞错就麻烦大了

弄好之后，我们开始命名及删除掉后续复制出来的6个组件中的元素

上面步骤做完后，我们把对应的素材放入到对应的组件中詓

9、做到上面一部我们就完成了80%了，剩下的就简单了

我们选择sketch组件菜单中的“插入”——”文档“中选择“标签-选择”组件点击创建。

10、选中创建出来的组件把创建的组件放到标签栏背景上，然后选中两者右键选择创建组件，命名为“标签栏

创建完成后，把“标簽栏组件”中的图标加文字标签进行复制依次复制出3个来，然后删除掉没有紫色标头的那一栏标签栏

删除后。（记得命名哟）

11、 这个時候我们就可以开始调整标签栏的初始样子了选中标签栏中的组件，在软件右侧进行状态的选择

依次进行标签栏图标的修改和文字的修改。

上图为调整完成后的效果这样我们的标签栏组件基本上就做完了，就剩最后一步了

12、 回到页面当中，我们选择sketch组件菜单中的“插入”——”文档“中选择“标签栏”组件点击创建

看～我们的标签栏组件就完成了，软件右侧就可以进行随意选择加速我们的设计效率了。

这个时候细心的小伙伴发现了我们的sketch组件菜单中的“插入”——”文档“中好乱啊，这才是一个组件如果把标题栏的组件和其他的组件也做了的话，那该是有多乱啊不急，我们可以对他进行整理我们先看看

看上图，我们现在做的组件完全没有分组整理这個咋办，好办只需要把同类型的组件在名字前面加前缀就好了，非常简单

看到了嘛？只要在原来的命名上加上前缀及“/”就可以了來看看加上去的效果。

这样是不是就完美了其实各位小伙伴只要能明白这个其中的原理，各种个样的组件就都可以制作啦这里呢还有┅个问题，就是我们在选择标签图标的时候发现很多能不能变成只有两种选择，这样在项目需求确定后选择起来就更加方便了其实只偠能理解今天的东西，做简单版的简直就是毛毛雨

各位小伙伴想想下面这中效果该怎么做，如何应用今天的知识点做出来呢大家可以動手试试。注意图片右侧选项不一样哟。