组件由多个symbol控件组合并再次进行创建symbol控件而成,简单点说就是symbol嵌套symbol。相比创建样式来说创建控件和组件会更加的复杂,所以在创建组件时为了保持一个良好的思路,建议在实际操作前用xmind将要创建的组件样式进行梳理,一步步细化将组件的所有样式都罗列出来。然后对这些样式进行一个筛选,去除一些可能用不到的样式,将组件库进行精简,不但能够降低组件库的尺寸大小和提高打开组件库文档的速度,还能使得后期调用的效率更为高效。

覆盖层

样式是组件的组成部分,体现在组件覆盖层属性上。如果组件中的图层没有设定样式,则没有组件覆盖层的属性。需要注意的是组件在使用时覆盖层属性标题对应的是组件中的图层标题,所以创建组件时给每个图层命名是良好的也是必须的习惯。
image.png

图层

创建Symbol组件时,建议先将所有样式绘制出来后,再统一执行创建Symbol操作,绘制所有组件的样式一般用复制粘贴的方式快速完成,但复制元素时,图层的名称会在原命名后多个copy或拷贝、复制。这样一来在创建组件时就要对其修改。大量的的重命名操作也添加了不少工作量,所以在这里推荐一个Sketch插件:Rename it。可以为图层重命名工作带来更高的效率。另外一个插件:Fast Text Transfer。可以快速的批量复制粘贴文本而不改变其样式。

命名

每个symbol控件都需要良好的命名,控件中的每个元素也同样需要做好命名工作,在symbol中嵌套symbol也需要对被嵌套的symbol进行重命名。在创建symbol之前,要梳理好一套命名规则,所有的控件、组件按同样的规则命名,如:
nav/silderbar/menu/submenu.disable;
nav/silderbar/menu/submenu.expanded;
nav/silderbar/menu/submenu.selected;
导航/侧边栏/菜单/子菜单.禁用
导航/侧边栏/菜单/子菜单.展开
导航/侧边栏/菜单/子菜单.选中
image.png

位置

创建组件时,还需要考虑组件内部元素的位置。在调整组件大小时,确保组件中元素在大小变化中始终处于你想要它处于的位置。则需要设置「靠边固定」来包装元素在组件中的相对位置。如:卡片标题始终处于卡片左上角,按钮始终在卡片的右下角。
image.png

尺寸

组件在实际使用中可能会变更尺寸大小,在转换成组件时的尺寸就是该组件的默认尺寸,有些组件可能只有一个尺寸,这个时候需要设置「固定尺寸」来保证组件的固定宽度、固定高度。

image.png

分类

当创建了大量symbol控件时,调用symbol控件需要花费不少时间来找到你想用的控件,所以需要给控件做个分类。在创建symbol命名时,symbol名称前加入”/“斜杠符号和分类名来对控件进行分类。类似电脑文件夹路径这样理解更方便些,灵活运用分类带来的便捷。新版本sketch中可以到组件页面去管理和分类控件。
image.png


以上是创建symbol控件时需要注意的地方,在后面的内容中就不再重复了。创建每一个symbol控件都需要注意,以上内容非常重要。