Sketch Symbol符号工具用法详解 sketchsymbol符号|UI设计

这个Symbol符号工具是Sketch App的一个强大的功能，这是一个很神奇的工具，因为它提高了设计师的效率。
例如，你创建任何产品、项目、订单的列表，并希望在每个实体中显示不同的内容，那么符号将能真正帮助你。
简单地说，symbol在设计中为你提供了变量，在这里你可以覆盖变量的实例。
我们将要讨论的要点如下

如何创建符号和使用。
如何编辑符号。
如何管理符号。

让我们从第一点开始
如何创建和使用符号例如，我将创建“订单列表”布局，其中有订单id、status状态、date日期、customer客户和total amount订单总量，如下图所示

文章图片
这里我将覆盖[#Number]、[Date]、[Customer Name]、[Amount]的值。
注意：我们应该选择点文本而不是段落块文本来创建符号，因为它不允许我们在中间更改段落的内容。
1、将布局转换为符号

选择你的布局。
进入图层，选择创建符号，或者点击工具栏上的创建符号按钮。
你想要什么符号就给它取什么名字，例如order。

符号现在就被创建了，下一步是如何使用符号。
2、使用符号

执行插入>符号（Insert > Symbol）。
选择你的符号，例如：order。
把符号放在你想放的地方。

也可以复制或粘贴符号。
3、编辑内容的值
选择你的符号，然后去检查器并覆盖一些值。

文章图片
现在在画板上添加尽可能多的符号实例，并随时更改变量的值。

文章图片
如何编辑符号【Sketch Symbol符号工具用法详解】编辑你的符号非常简单，更改你的符号，并通知其效果的所有实例。
编辑符号步骤：

双击符号。
根据你的需要更新符号。
点击“返回实例（return to instance）”按钮。

现在我将重新排列相同符号或布局的文本，如下所示

文章图片
现在点击“返回实例”

文章图片

符号变化的效果

你可以看到所有的布局都根据符号的变化而改变。
如何管理符号我们可以使用“/”来对符号进行分类，这样就创建了一个文件夹。例如，如果你创建了state/red、state/green和state/yellow，那么它将创建一个文件夹状态。
假设，符号的每个实例中的红线代表订单的状态。因此，它还应该根据订单状态改变颜色，例如绿色green(已交付)、黄色yellow(待定)和红色red(取消)。
现在我要创建3个不同颜色的符号。
1、双击并打开你的符号，在本例中为“order”。
2、点击带有红色的矩形，将其转换为带有名称order/status/red和类似的2个符号order/status/green & order/status/yellowstatus的符号。