个性化阅读
专注于IT技术分析

Sketch Symbol符号工具用法详解

这个Symbol符号工具是Sketch App的一个强大的功能,这是一个很神奇的工具,因为它提高了设计师的效率。

例如,你创建任何产品、项目、订单的列表,并希望在每个实体中显示不同的内容,那么符号将能真正帮助你。

简单地说,symbol在设计中为你提供了变量,在这里你可以覆盖变量的实例。

我们将要讨论的要点如下

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

让我们从第一点开始

如何创建和使用符号

例如,我将创建“订单列表”布局,其中有订单id、status状态、date日期、customer客户和total amount订单总量,如下图所示

sketch创建订单列表

这里我将覆盖[#Number]、[Date]、[Customer Name]、[Amount]的值。

注意:我们应该选择点文本而不是段落块文本来创建符号,因为它不允许我们在中间更改段落的内容。

1、将布局转换为符号

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

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

2、使用符号

  • 执行 插入>符号(Insert > Symbol)。
  • 选择你的符号,例如:order。
  • 把符号放在你想放的地方。

也可以复制或粘贴符号。

3、编辑内容的值

选择你的符号,然后去检查器并覆盖一些值。

sketch编辑符号的值

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

使用更多符号

如何编辑符号

编辑你的符号非常简单,更改你的符号,并通知其效果的所有实例。

编辑符号步骤:

  • 双击符号。
  • 根据你的需要更新符号。
  • 点击“返回实例(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的符号。

符号转换

你也将得到分层符号管理

得到符号文件夹

回到你的页面从左层面板从符号列表改变你的符号。

使用多个符号
赞(1)
未经允许不得转载:srcmini » Sketch Symbol符号工具用法详解

评论 抢沙发

评论前必须登录!