Symbol的命名和归类

作者: 隐匿的大V | 来源:发表于2018-07-03 16:52 被阅读56次

上一篇文章写了symbol的一些使用技巧,没有读过的童鞋可以先看一下,附链接了解symbol的四大特点,让你的效率提升100倍

symbol虽然好用,但是当一个项目比较大的时候就会需要建立很多个symbol,这时给symbol进行合理的命名和归类就显得尤为重要。

归类

首先我们通过一个情景来对比一下未归类和已归类的symbol在使用时的区别,

场景:我们要左侧导航栏中的彩色图标替换为白色图标,

如果我们没有做归类的话,右击替换symbol看到的界面是这样的

symbol未归类

如果我们合理的命名归类的话,右击替换symbol看到的界面是这样的

symbol已归类

很明显,归类后的symbol是已有一个清晰的分类和层级关系的,我们可以根据这种关系,快速的找到我们所需要替换的symbol,这样才可以更大提升我们的工作效率。

那么怎样命名才可以对symbol进行分类呢,其实很简单,就是给symbol命名的时候用斜线号来归类,符号“/"。

比如 “icon/24px/菜单栏/新建/normal”,

这样的命名方式就代表着这个24像素的icon,是位于菜单栏上的图标,图标名称是“新建”,图标状态是normal。

这样就可以把symbol按照功能和层级进行一个清晰的分类了。

命名

不过我们除了要对symbol进行分类之外,还需要对symbol里面的元素(比如文字,图片等)进行重命名,这样才能够让我们对一个symbol的构成有一个清晰的认识,这样做的好处就是,不仅方便自己的后续修改和迭代设计;而且即使是把源文件交给团队中的其他人,也可以自如的使用你的symbol。

如果我们没有对这个symbol里面的元素进行重命名的话,修改时面板就比较混乱,无法清晰知道文件名称在哪里修改,特别是有多个元素重名时。

我们还是通过场景来对比一下:

场景:我们要修改页面列表中第一列的“文件名”的名称进行修改,要将Harry Cortez修改为Small Pig Peki

假如我们没有对这个表单symbol进行重命名的话,我们在右侧的修改栏中看到的就是这样的情况。我们无法准确快速的找到,哪一个文本才代表的是文件名。

未重命名

如果我们进行过重命名的话,在右侧修改栏中看到的就是这样的情况。

已重命名

两图对比可以看出,对symbol中的元素进行重命名之后,修改面板清晰,我们可以快速找到需要修改的内容。

那如何修改symbol中的元素在修改面板中的title名称呢

其实很简单,就在进入symbol的page,然后修改symbol中对应图层的名称就可以了。

以“文件名”这个元素举例,

symbol中的图层名称修改前后对比 修改面板title名称前后对比

为了让symbol的修改面板更清晰,我们可以在给symbol的图层命名时备注一个emoji,比如文本用✍️表示,图片用🏙表示,背景色🎨表示。

在MAC上调出emoji的方式:

在输入框处于激活状态时,按下Ctrl+Command+空格。

添加emoji 显示的效果

总结

最后我们来回顾一下文章,

给symbol进行归类和重命名:

第一:用斜线号 "/" 进行层级分类

第二:在symbol页面给图层重命名命名,便于后期修改

第三:Control+Command+空格,可以调出emoji

彩蛋

给大家推荐两个插件,这两个插件结合symbol使用的话,会极大提高我们的工作效率。

01 remove unused symbol

自动删除该sketch项目里面没有用到的symbol。

02 rename it,按照一定的规律(比如按照顺序,替换文本等)重命名画板或图层。

相关文章

  • Symbol的命名和归类

    上一篇文章写了symbol的一些使用技巧,没有读过的童鞋可以先看一下,附链接了解symbol的四大特点,让你的效率...

  • R-基因名转换

    SYMBOL命名转换为ENSEMBL命名 可以得到gene文件

  • 第三章 接口与API设计(EffectiveObjective-

    1 使用前缀避免命名空间冲突 命名冲突,应用程序链接的时候会报错duplicate symbol _OBJC_ME...

  • Symbol in ES6

    了解Symbol或是刚刚了解Symbol的时候,觉得这东西很鸡肋,有必要用么?项目当中命名好就可以了嘛~ 但是越深...

  • ES6_Symbol属性介绍19-10-18

    //创建Symbol属性值1.Symbol属性值对应的值是唯一的,解决命名冲突问题2.可以定义常量3.内置Symb...

  • js面试相关问题2

    目录 跨域问题 symbol 什么是事件监听 手写Promise 原型链 转化下划线命名到驼峰命名 js字符串转数...

  • Symbol基本类型

    Symbol基本类型 Symbol 是一种解决命名冲突的工具。试想我们以前定义一个对象方法的时候总是要检查是否已存...

  • 文件分类清楚

    文件要进行分类 1.命名 2.建立序号 3.分类归类

  • 日更|阿里云盘,归类!

    归类: 1,阿里云盘,碎片太多了,删除了之前别人的素材。保留自己拍摄的那些。 2,重新按照新的归类命名方法,整理下...

  • Symbol

    Symbol 每个Symbol都是独一无二的Symbol() !== Symbol() Symbol 不能进行运算...

网友评论

    本文标题:Symbol的命名和归类

    本文链接:https://www.haomeiwen.com/subject/tgcpsftx.html