Sketch使用技巧:symbols

2018-09-1810:15:41原型设计Comments3,806 views字数 1177阅读模式

关于 symbols

1. 通过 symbols 实现元素复用

怎样判断是否要使用 symbols?答案在于目标元素的复用性。symbols 就像邮戳,制作了一个之后便可以反复使用。在 Sketch 中,当你修改了主 symbol,所有来自于该 symbol 的实例对象都会被自动更新,这能使设计稿的迭代效率得到极大提升。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/5035.html

Sketch使用技巧:symbols文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/5035.html

2. 创建 symbol

通过 symbols 将复用率较高的设计模式进行打包。举例来说,我们现在有一个卡片组件,其中包含一个圆形图片、一段文字描述以及一个按钮。完成布局设计,将它们打包成组,然后在工具栏中点击“Create Symbol”按钮即可。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/5035.html

Sketch使用技巧:symbols文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/5035.html

3. 通过属性覆写 (overrides) 对symbol进行订制

譬如我们将一个卡片模式打包成为symbol,在日常使用时通常需要在不修改主symbol的前提下更改每个实例当中的具体属性值,例如图片、文字等等。属性覆写功能 (overrides) 就是用来解决这个问题的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/5035.html

将symbol插入到画板当中,保持选中态,右侧检查器面板当中会出现“Overrides”选项单。下图所示的范例共包含4项可覆写文本字段,你只需在这里进行修改,便能使该symbol衍生出的每一个实例对象都体现出不同的内容。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/5035.html

Sketch使用技巧:symbols文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/5035.html

4. 创建symbol之前,对图层进行重命名

为了使可覆写的属性在检查器面板当中呈现出恰当的属性名,例如“姓名”、“职能”等等,而不是在创建symbol时所使用的特定范例内容,你可以在打包创建symbol之前对图层进行重命名,使其与最终希望呈现出的属性名称一一对应。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/5035.html

Sketch使用技巧:symbols文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/5035.html

5. 为特定的元素禁用属性覆写

symbol当中并非每一个元素都需要支持覆写功能,譬如那些永远不会发生内容变动的属性。如果不想该属性出现在symbol的检查器面板当中,只需在创建symbol之前在图层列表当中将该图层锁定即可(锁型图标)。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/5035.html

Sketch使用技巧:symbols文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/5035.html

6. symbols嵌套

“设计模式”当中本就包含着多层次的概念,这同样能体现到symbol的实现方式里。譬如我们首先定义了一个全局通用的按钮symbol,然后我们还需要一个全局通用的工具栏symbol,而这个工具栏当中又会用到刚刚定义的按钮,这时我们便可以将按钮symbol插入到工具栏当中,并一同打包创建为新的symbol,实现嵌套。如果按钮symbol得到样式更新,那么工具栏symbol当中的按钮样式便可自动更新。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/5035.html

Sketch使用技巧:symbols文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/5035.html

7. symbols的尺寸可变

你可以随意调整symbols实例对象的尺寸,而不用受制于symbol本身的规格。不过一旦将来主symbol的尺寸发生变化,所有实例都将统一更新为新的尺寸样式,而忽略掉你之前所做的调整。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/5035.html

Sketch使用技巧:symbols文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/5035.html

8. 从symbol中分离

要将某实例对象从原本的symbol当中分离 (譬如要基于该symbol的布局设计更为复杂的模式时),在该对象上右键单击,选择“Detach from Symbol”,这将使实例变为普通的图层组。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/5035.html

Sketch使用技巧:symbols文章源自菜鸟学院-https://www.cainiaoxueyuan.com/yuanxing/5035.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/yuanxing/5035.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定