ps. 不讨论插件，插件太多了，只说 Sketch 本身的功能。也不是教程，没有讲具体怎么用的，一个应用组件库的思路。

Sketch 有两个提升效率的功能：Style、Symbol。这两个功能可以约等于 “为什么要用 sketch” 的理由，出乎意料的是有些UI设计师在用 sketch 的时候不会用这两个功能，仅仅把 sketch 当作一个 “比PS简单易学” 的软件来用。

开始设计页面前要先确定主题色、文字样式、线粗、投影样式这类设计规范，根据交互将所有页面中涉及的内容拆分为组件（输入框、下拉列表等）这些大家应该都是知道的。

设计规范和组件除了作为输出产物和规范对接其他岗位和作为设计组的统一标准，还可以应用到 Sketch 中，从技术的角度提升工作效率，把时间从一些重复机械性的操作中解放出来。

这里的“设计规范”和“组件”对应的就是就是 Style 和 Symbol，不仅可在 Sketch 文件中使用，还可以单独保存为【Template】 ，将需要的 Symbol 变成公用的组件库，这个模板同时连接到多个文件中使用，相当于多个文件共用一份 Symbol，只需要维护这个模板文件即可同步更新所有的文件（原来可是要把 Symbol 复制到每个文件内，手动更新同步的）。

01 命名

由于”前面”不规范，给再强的功能也白搭，跑不起来，我打算从添加第一个元素起要注意的地方开始讲了！这个都要被讲烂了～

十分重要，Style、Symbol、Layout、Artboard 都要自己写名称，能不能快速找到目标就看命名是否规范了，不然找东西都要可多时间了，看不了、不能忍。

Sketch 的名称可以用英文符号【/】分级，命名尽量是看到名称就知道它长啥样的，还要保证团队成员知道你写的啥。

举个例子，投影样式名称第一级就可以用 “shadow”，投影还分为顶部导航栏、底部导航栏、卡片的投影，其中导航栏的投影颜色、大小、距离是一样的，只是上下相反，那就可以这样命名：

在实际应用中会根据【/】分级显示。

Symbol、Layout、Artboard 等也是一样要按层级名好名称（凡事要写名称的就要规范）。Symbol的名称不用说，在替换 Symbol 的时候命名不规范根本找不到，尤其是使用 Template 这种外接 Symbol 时；Layout 、Artboard 的名称主要是输出（导出图片、推送到Zeplin）的时候会根据【 / 】分类或创建文件夹，还有一个使用场景是在需要从多个画板中选中某个类型的图层时，从画板中选反而不如从图层中直接选方便，如过名称不规范是没法儿这样玩的。

所以，名称一定要规范！有些地方虽然不能当时看到有什么好处，但是养成这个习惯是没有坏处的，万一后面发现个新插件需要规范命名那是打算重新回来改？

02 建好样式表

把 UI 规范里的颜色添加到色板，文字按照颜色、大小、行距字距、对齐方式等组合好添加到 Style （命名怎么命别忘了），要用到的底色、分隔线样式都添加好。

确保你后面添加的所有元素样式都是用的样式表中，别画一个元素就加了个新样式。为什么？要是你想把所有页面底色从 A 改成 B ，只需要把样式中的颜色改了就行，所有用到这个底色的位置都会自动更新。

03 先准备基础组件

为什么是基础组件呢？因为还有嵌套的组件。

基础组件是指输入框、按钮、下拉列表等等内容少而单一的组件，基础组件可以拿去组合成复杂的组件，复杂的组件还可以组合成非常复杂组件（无限嵌套），不过UI设计中不建议嵌那么多级，跑起来慢、会把自己嵌懵、别人也看不懂，一般基础组件再嵌一层接着就用到页面里了。

还有一种类型的基础组件，是用来方便管理和统一相似组件的。卡片、列表常常会有很多差不多的表亲，可能是同一个列表状态不一样，也可能是列表不同的人看到会显示得不一样，这个时候就把他们都有的元素拎出来变成一个基础组件 Symbol A。

再把基础组件 Symbol A 和其他的元素建成一个嵌套的 Symbol B、C、D… 现在如果要把他们的标题都放大一丢丢的时候，改 Symbol A 的标题的文字就可以了，他会自动应用到 Symbol B、C、D以及使用了他们的页面（如果是改的 Template，还会应用到连接了这个 Template 的 文件，很厉害吧！）

Symbol 中的每个元素在页面应用时像都可以替换图片、更改文字，嵌在里面的 Symbol 跟子级 Symbol 中的元素也可以被更改。所以我们做好一个组件后，应用在页面里时可以将他们改成不同的内容模拟真实页面。更改内容不改变其属性。

组件中的图层名称按照数据类型命名，比如“图片、标题、简介” 这样在页面中更改内容的时候才知道哪个是哪个（一顿瞎找真的不能忍！）。然后按照内容梗概频率排序，比如“移除”两个字不会变就放最底下一层，左侧 checkbox 可以改可以不改放倒数第二层，依次类推。

Tips

创建组件的时候，图标我会画完后导出、再把导出的图片拖进 sketch，直接拖进来的图片可以给更改颜色、也可以在页面中替换图标图片；还有一种方法是将每个图标（指可以编辑的图标）都做出一个 Symbol ，也可以在页面中替换图标。

图片会用矩形图案填充，可以才有圆角，拖进去的图片是没有 Radius 属性的，而且不能要改变图片的宽高比。

04 组件的适配

不论现在需不需要做不同尺寸的设计稿，做组件的都要时候顺手选上对的适配方式，组件的意义就是可以应用在不同的场景里。

如果组件内容元素和样式一样，但尺寸不一样之要设置一下元素的适配方式就可以啦，不需要分别做两个组件；而组件中任何一个元素样式不一样了就不适合使用适配方式，因为根本就不叫适配了，就是两个组件。

不设置 Resizing 时是元素和间距是按比例缩放（文字字号不会，文字框会）。大方框是设置四周哪边要固定的（固定边距），Fix 是设置是否需要固定元素本身的宽或高（不能改变大小），四周固定和元素宽高固定不能同时被选中。多个元素都选择了四周固定的话，sketch会处理成固定边距和间距，内容尺寸按原来所占的比例缩放。

适配方式也可以嵌套，元素、组件、组都可以单独设置适配方式，这个不一一例举怎么组合了，多尝试。

Tips

文字的宽度需要设置为最大宽度，即组件宽度减去边距，在组件的宽度有变化时才会按照预期的方式显示。（右侧文字的三个点不会自动处理，还是得手填）

05 组件的应用

建议将组件库单独导出为模板，做页面的时候调用，这样不同的文件也能保持组件一致（又回忆起手动同步的痛苦…)。

导出就 File > Save as Template，选择位置保存，模板的文件长得跟普通的文件一样，取个好区分的名字。

添加和应用 File > Add as Library，勾选上你们的组件库模板，以后替换 Symbol 的时候就能选组件库里的 Symbol 了。

06 同步和更新

当然是得去组件库模板文件里更改，保存更改后，应用了组件库组件的文件右上角会提示 【Library Update Available】，点击打开会告诉你哪些 Symbol 改了，原来和现在的样子，要不要更新。

小结

这些都比较基础的东西，也没啥干货，但是希望都能注意到这些小东西，不要把时间浪费在“统一”上。