说明使用的界面版本：sketch83.2

本篇经验非针对sketch新手，因此不写过多的基础说明，需要有sketch使用基础后再来阅读。

Symbols用于创建可复用的界面元素，有助于维护设计方案的一致性。但是symbols只限于在该文件内部。如果有多个业务涉及到使用同一套symbos，就可以使用libraries实现控件和元素的统一。

libraries和组件属性、自适应等设置配合，可以极大的提升组件库使用的灵活性。

案例：表单控件

输入框控件中可以包含图形、icon、文字等元素，按照需求创建组件，实现是否含有icon、等不同状态输入框的展示。

先罗列出所有自己需要创建的组件类型，根据使用习惯进行分类。我的分类目录为：单行表单（是否有icon可控，表单类型可控）、说明文本表单（是否有icon可控，表单类型可控）、输入表单、文本域。

组件库分为symbols和libraries。symbols为当前文档的组件库，libraries作为统一调用文件，导入当前的文档中使用。

引用官方对于libraries的诠释能很好的说明libraries的作用：一个Library本质上就是一个普通的Sketch文件，其中的Symbols可以被其他Sketch文件调用。如果你编辑了Library当中的Symbols，那么调用了该Library的其他Sketch文件便会收到更新通知，你可以对变更进行预览、对比和确认，使这些Sketch文件所调用的Symbols自动更新至最新版本。

导入libraries：打开sketch→preference→libraries→Add libraries选择导入的文件并勾选。

新建一个sketch文件，用于统一的组件调用。sketch70更新了components，更加方便了组件库的管理。可以直接在components页面进行组件库的新增删除编辑和组别调整。

sketch更新了色彩库功能，目前是只支持单色。作用和组件、图层、文本规范类似。如图层样式和文本等多种组件均调用了colors中的主题色，之后如果涉及到主题色的修改，那么对应的图层样式、文本等组件都可以同步修改。

添加色彩：

点击“create color variable”创建一个默认色彩，在右侧的编辑框中修改色彩和名称。为了方便其他设计师对接，我会习惯在名称中标注出色彩使用场景，如文字使用、提示颜色、警告颜色等

按照设计规范中的色彩值进行创建。创建好的色彩可在组件、文本、图层样式中调用。如果将来色彩库有调整，就可以直接在colors中修改，并全局应用。

调用色彩：

选中需要调用色彩的文字或图形，右侧的属性设置中，对应的色彩选中调用colors。已使用colors的色彩会显示成橙色icon。

巴巴色彩库（有不清晰使用场景的色彩）

根据公司色彩库进行定义的一套colors

为了方便创建和更新，先将自己需要的文本样式列出来。按照使用习惯（使用场景）分类命名

 创建文本样式

创建文本样式有两种方式，一种是在components页面点击顶部的“create text style”，（记得右侧要先切换成文本样式库），创建好文本样式，右侧编辑面板中进行编辑；

第二种方式是在画板页面，创建文字，并编辑好文本样式。点击右侧appearance中的create，创建文本样式并命名。

这里说明一下create右侧的按钮。“update”作用是当你使用了文本样式后进行调整，点击update会将当前文本样式替换为新的文本样式。（出现调整后文本样式名称右侧会有*提示）。“detach”是将当前文本样式复制到本地symbols中。“more"中则是重置、重命名和在libraries中编辑文本样式。

附图，如果是中文版的应该会更加清晰，不了解设置的点击看看也会清楚该功能的作用。其中的resizing是需要详情讲解的部分，可以帮助我们制作弹性控件。

sketch中可以通过在命名中使用“/"将内容分组。如按钮命名为"button/大按钮/默认“，那么组件目录中该按钮的位置为“button级”下的“大按钮”下的“默认”组件。而调用组件时也会按照目录展示，同组的内容则会优先展示。

因此为了方便调用，我会将常用的功能文字样式单独设为一组。如按钮中的文字分为17pt和13pt，分别使用在大小按钮和标签按钮中，因此单独设定“按钮文字”，在修改按钮组件的文字样式时可以在同级目录中直接调用而不用切换上级目录。

Resizing是控制物体间的位置关系和物体尺寸的，是一种相对关系。它的使用需要有参照物，可以是画板也可以是组。

1、pin to Edge 固定边缘

上下左右四个边可以点击，选中图层，点击确定需要固定的边缘，该边缘会变橙色。再拉升组或画板，会发现固定的边缘始终保持不变。

将圆形设定pin to edge 右侧，矩形不做设置，将矩形和圆形设成一组，对组进行拉伸。发现不管如何拉伸，圆形始终保持右侧距离固定。

 2、fix size固定尺寸

fix size可以选择固定高和宽度。选中圆形图层，点击固定高度，矩形未设置。将圆形和矩形合并组，再对组进行拉伸变形，可以发现圆形的宽度会改变但是高度始终不变，矩形则会随着拉伸而改变宽高。

 3、preview预览

设定好后鼠标放在preview上，能看到实时演示，以帮助我们判断是否是自己想要的效果

选中文字，右侧的属性编辑中appearance中选择要调用的样式。可以看到，调用样式后，再次点击选择会出现同组内的文本样式。这样对于功能类的文本样式切换就非常方便。

和文本样式的创建一致。一种是在components页面点击顶部的“create layer style”，（记得右侧要先切换成图层样式库），创建好样式，右侧编辑面板中进行编辑；

第二种方式是在画板页面，创建图形，并编辑好图层样式。点击右侧appearance中的create，创建图层样式并命名。

形状图层的命名和样式调用同文本样式一致。

以列表为例，列表组件中包含文字、图形、icon等元素，绘制好组件元素后，根据自己的需要将元素赋值对应的样式。如不同状态的icon，赋默认值为“标准”图层样式。

选中组件，点击顶部菜单中的“create symbol”。并对组件进行命名。命名方式可以根据自己公司的组件使用习惯来确定分组。

创建的时候可以选择智能分布。sketch从58版开始更新了智能分布的功能。

组件尺寸会根据内容自动变化。可以设定变化为从左向右、从中间向两边，从右向左、从上到下、从中间向上下和从右向左。

如设定文本和图形为组件1，选择从左向右的智能分布。

从右向左的智能分布；

创建好后的组件会在symbols中，标题名称会变粉红色。

选中面板，右侧会出现可设置的属性。将属性勾选去掉，那么该属性就不可以进行修改。这块设置对组件修改的便捷性有很大帮助。

如在公告弹窗中，取消标题和内容的文字样式设定，只能按照固定样式修改文字内容和确定按钮样式。调用组件时，右侧编辑中就无法修改标题和内容的文字样式，避免出现组件规范的不统一。

这里需要注意的是，为了方便调用组件在使用时编辑，建议左侧菜单的图层顺序按照内容使用顺序来排序并命名。

“按钮”中包含的元素为icon、文字、底部矩形。对各个元素进行属性设置。

1、通过分析需要的按钮样式，将icon、文本、底部矩形进行风格样式设置；文本对齐方式选择居中；

2、点击创建组件，此时的resizing和layout都默认为无；

3、调用组件，将组件进行拉伸，可以发现拉伸到一定程度后icon和文字之间间距会变化，icon也变形了。那么再针对出现的问题进行设置。

4、icon设置resizing，保持宽高不变；将icon和文字合成组，组的resizing设置为宽度不变；5、设置完拉伸变形后，需要在对自适应进行设置（可根据需求）。不需要icon的时候，文字需要保持居中；按钮长度需要根据文字长度变化；

6、将icon和文字的组进行layout设置，选择从中间到两边；按钮组件进行layout设置，选择中间到两边；

那么最后得到的按钮组件，可以进行按钮类型修改，icon修改，按钮可根据文本进行长度自适应和手动调节长度

1、将包含完整元素的组件先绘制出来。针对各元素进行风格样式调用。其实icon为调用的icon组件。

2、icon1、标题名称、icon2设置为组1，说明文字，操作类型icon为组2；3、icon1、icon2固定宽高，标题名称文字左对齐，组1Resizing设置pin to Edge为左，设置宽度固定（拉伸时避免元素间距发生改变）；组1layout设置从左到右(保持元素跟随）；4、梳理出组2的几种类型，选择、开关、跳转。将祖2创建为一个新组件，建立选择、开关、跳转三种类型组件，组件元素进行样式调用，icon设置固定宽高。组2Resizing设置pin to Edge为右，设置宽度固定（拉伸时避免元素间距发生改变）；组2layout设置从右到左(保持元素跟随）；

5、对组件的属性管理进行设置。勾掉标题名称、icon、说明文字的文本样式

效果

 总结一下，设置一个组件涉及到的部分有：组件元素的样式赋值，resizing，组件的layout和组件的可修改属性设定。根据自己公司业务的需求对组件进行全面的设置能极大的提升组件库的使用效率。

Powered by Froala Editor