每人每天仅限5票,快给你心仪的作品鼓励的一票。
投票Symbol作为sketch中炒鸡好用的功能,用起来相当的爽,不过嵌套使用起来,层级太深确实也容易让人犯晕,但是学会了用起来简直要起飞啊,所以来一波操作吧!
废话不多说,明人不说暗话,案例走起!!!讲解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实例重命名为覆盖文本值;
每人每天仅限5票,快给你心仪的作品鼓励的一票。
投票
发表评论