如何在Sketch中创建嵌套符号 _原型设计

本文概述

什么是” 嵌套符号” ？
如何创建嵌套符号

如果必须更改文件中多个位置存在的图标, 该怎么办？然后, 当你不得不稍微改变分配给图标的一种颜色时, 该图标刚刚花费了整个设计时间, 你该怎么办？
你可以立即使用Sketch进行上述所有更改。符号是Sketch中用于创建大型设计系统的最强大功能之一。今天, 我将教你如何高效地使用嵌套符号。
什么是” 嵌套符号” ？嵌套符号是由Sketch中已经存在的其他符号组成的常规符号。听起来有点像盗梦空间？它是。但是不用担心–在这个简短的教程之后, 使用嵌套符号来节省时间将是小菜一碟。
看下面的例子。我采用了两个简单的符号, 然后将它们组合在一起以制作另一个符号：

文章图片
通过从其他符号创建新符号, 我可以覆盖嵌套在新符号中的原始符号的设置。

文章图片
如何创建嵌套符号我们将创建上面的按钮示例, 以了解创建嵌套符号的过程。
步骤1：创建颜色符号
首先, 为按钮创建一些颜色。创建一个100px x 100px的无边框矩形, 并在其中添加蓝色填充。将其命名为** COLOR / PRIMARY-BLUE。 **右键单击此矩形, 然后选择” 创建符号” 。双击矩形以跳到” 符号” 菜单, 然后复制整个符号。
将副本重命名为” COLOR / SECONDARY-BLUE” , 然后将其填充更改为另一种颜色。你可以再次重复该过程以创建其他颜色。

文章图片
步骤2：创建图标符号
为了创建嵌套符号, 我们将使用另外一个元素：图标。该过程与使用颜色的过程相同–创建一个图标, 然后将其转换为符号。然后, 在” 符号” 菜单上, 复制带有图标的整个符号, 并为其指定唯一的名称。
重要提示：图标符号的画板大小必须相同。

文章图片
步骤3：创建带有嵌套符号的按钮
要创建嵌套符号, 我们将使用在步骤1和步骤2中创建的颜色和图标符号。
首先将颜色符号放置在新的画板上, 然后将其转换为按钮的形状。在其上添加一些文本, 然后将图标符号放在顶部。现在, 选择所有这些层, 将它们分组, 然后将其转换为新符号。

文章图片
而已！现在, 你可以对按钮使用符号替代来进行调整, 但是你希望以更少的步骤进行调整。
步骤4(可选)：用表情符号命名图层！
为了更清晰, 可以将表情符号用作图层名称。如果你想知道如何做, 请看一下我以前的文章：使用表情符号管理Sketch文件
【如何在Sketch中创建嵌套符号】这是嵌套符号及其覆盖的最终结果：