sketch中symbol使用技巧,...

  • 经验类型经验/观点
  • 经验属性原创文章
  • 经验版权署名
5962 1 7 2019-04-09

Symbol作为sketch中炒鸡好用的功能,用起来相当的爽,不过嵌套使用起来,层级太深确实也容易让人犯晕,但是学会了用起来简直要起飞啊,所以来一波操作吧!

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


Image title

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


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


小技巧:

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


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


Image title

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


小技巧:

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

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

Image title


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


小技巧:

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

Image title



四、添加组件选项

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

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


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


Image title

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


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

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


Image title


五、噔噔噔!完成啦

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


Image title

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

Rename it  —— 批量重新命名 ;

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

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





全部评论:1

  • 2020-02-12 09:45

    请问一下,symbol是不是只要创建了就会在所有画板中看到,能不能只针对一个画板创建一个?

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票