3.3.6 元件的创建

Create Symbol（创建元件）功能是Sketch的一个强大功能，在UI设计中也是比较常用的。通过创建元件功能可以快速地修改文档中重复使用的元素，极大地节约制作时间。

右图所示的4个元件，都是由一个元件复制出来的，仅需要调整元件编辑器中的文本内容及图片即可，不需要重新绘制。

创建元件

首先创建一个元件。如右图所示，选择图层，再单击红框中的Create Symbol（创建元件）按钮。

此时，会弹出一个对话框，将元件命名为“歌曲列表”，并选中Send Symbol、to“Symbols”Page（将元件发送到“元件”页面）复选框，单击OK按钮。

创建元件后，在图层列表中，之前的所有图层已经变成了一个元件单层，右图红框中的符号表示当前图层是一个元件层，元件层的名字为刚刚命名的名称。

创建完成的元件都会在Symbols（元件库）中出现，单击右图红框中Page1右侧的下拉按钮，在下拉列表中，选择Symbols（元件库）选项即可进入元件库中。双击元件也可以直接进入元件库中。

在元件库中可以找到刚刚创建的元件。

之后可以将创建好的元件直接添加进画布中，单击Insert按钮，在下拉列表中选择Symbols （元件）>Document（文档）选项，选择“歌曲列表”元件，即可将其添加进画布。

如果在创建了元件以后，想将它转换成正常的图像，可以直接在元件上单击鼠标右键，在弹出的快捷菜单中选择Detach from Symbol（分离元件）命令。此时，可将元件的各个组成部分放在一个图层组中，单击图层组的下拉按钮，可以显示元件每个组成部分所在图层。

编辑元件

若要编辑一个创建好的元件，可以进入Symbols（元件库），双击元件名称，会直接显示元件编辑界面。修改完成后，单击Return to Instance（返回主界面）按钮即可。

Overrides（覆盖）

在设计界面时，经常会遇到内容很烦琐的文件，将它们转换为元件后，可以节省大量的操作时间。Overrides功能有助于用户编辑元件的部分内容，而不改变元件中相同的元素，但它们可以拥有各自的内容（比如文本或图像）。如果不设置Overrides选项，那么Symbol（元件）将会展示默认内容。

如下图所示，将一个元件复制两份，选中其中一个备份，在右侧的属性检查器中可以看到Overrides设置选项，在这里可以看到当前元件内的文本及图片信息。

选择其中一个备份后，在Overrides选项区域单击Choose Image（选择图片）按钮，选择一张图片，即可在不改变元件内部组件的情况下，更改图片信息。

接着在Overrides选项区域的文本框处单击，输入相应的文本，即可更改文本内容。