@炖：2018的七夕星五。晚7点，设师小王收拾东，他隔壁组的小姐姐约好了去看电影，打算7:30下班。收拾，收到了 Leader 发的消息：
时间只剩半小时了，小王该怎么办？
几乎位设计师都有这样经验：在做用户界设计时，我们很难能定稿，大部分工作时都花在了改动上。
所以，提升计工作效率关键，在于减少设计改动时。
今要讲的，就是利用 Sketch 的件（Symbol）功能减少设计改动耗时，来大幅提高设计效率。
在 Sketch 汉化插件中，Symbol 被翻译为「符号」。但鉴于 Sketch 曾经如日中的 Flash 中的 Symbol 作用十相似，故下文中统一使用 Flash 官方中文版 Symbol 的翻译：件。
所以，篇文章的正经名字应该是：Sketch Symbol 深度指。
一、入门：元件的基础用法
如上图所示，在三个画板中都有同的图标。这是在计工作中常出现的情况，比如一套移动端界面中，不同页面的底部 Tabbar 中都有着相同的图标。
假在设计评审，需要统一修改个图标的颜，又或是整一细节，怎样操最快呢？
一个个中，再统一修改，择起来慢说，还容易现遗漏的情况。先修改一个，再复制粘贴，又会浪的时间。
让我们用 Sketch 的元件简化这漫枯燥的过程。
1. 创建、使用、编辑元件
创建一个元件非简单。中要转为元件的容，点击顶工具栏的 Create Symbol 按钮，就可转为元件。
转为元件的容，可直接复制，或在顶 Symbols 菜单中择使。
在组件上双击，或在 Symbols 页面到对应元件，即可进行编辑。编辑成后，件有到该元件的地方都会实时变。
2. 元件的复制、分类、替换
果想以某个元件为样板，创建类似的元件，以在 Symbols 页面中直接复。在左列表中右键选择 Duplicate ，或按住 Alt 拖拽画板。
在给元件命名时，以使用斜「/」进行分类，将不同类型的元件组织来。
在画板中选择一个元件，在右的面板中以将它替换为其他元件。替换的菜单中默认展开当前元件所在的分类，便在一个分类下进行切换。当，也以选择其他分类下的元件进行替换。
掌握了元件的基本操作后，诸如「给有页面中的按钮换个颜色」、「改一标签栏中的图标，重输一遍效果图」这类问题，再会浪那么多时间了。
二、进阶：元件的可变内容
将上述的元件基础法代入实际工作中，我们难想到几类问题：
- 把按钮做成元件，在不同的场合，按钮的文字能不一样，该怎么办？
- 要是把户头像做成组件，怎样在同页面中给头像填充一样的图片？
- 如果一图标的按钮组件，里面的图标怎么替换？
别担心，在 Sketch 中，元件的一分容是「可变」的。在每一处使元件的地方，都可在右侧的 Overrides 面中修改元件的可变容。
元件的可变内文本、图片、元件内的元件三种，让我们一看。
1. 可变的文本
元件的本默认都是可变的。对于需要可变的本，可将它锁定（如上图中的「载件」本）。
元件的图层名将被 Sketch 做可变容的标题，图层的容则被作为默认容。
，如果你和我一样，看那个「001.pdf」的标题很是难受，就可像上面这样修改。
2. 可变的图片
元件内的变图，以通将元件内图形图的填充改为图像模式来现。
当，变图的透明度、填充方式（Fill/Fit/Stretch/Tile）等属也与元件内的设置持相同。
3. 变的子元件：元件内的元件
在件内使用的件被称作件，在件的 Overrides 置中，可以选择替换不同的件，也可以直对件的可变内容进行置。
在替换， Sketch 只允许用同始尺寸的件进行替换。在替换后，件内同名的可变内容将被保留。
当将文字、图片、件组起来使用后，可以实现复杂的组件化。在做诸如息流、聊列表、会话界面这类包含复杂重复内容的计，就能事半功倍了。
三、高级：元件中的排版
在利用件进行计，还会遇一些和排版有关的问题，比如：
- 把语音话泡做成元件，长度可变，右侧未读红要怎样处理？
- 将输入状的文本框做成组件，有没有法让光标跟着文字？
这些问题，大都可以使用 Sketch 「缩放控制」（Resizing）、「文本内容跟随」两个特性来解决。
1. 缩放控制：位与尺寸
Sketch 中，缩控制（Resizing）实动态排版的主方法。我们可以给每图层设置 Reszing 属性，控制图层内缩时的表。图中，可以直观的看到 Resizing 缩时起到的作用。
具体控制关系如下：
让我们回到本章开始时第个问题：把语音话泡做成元件，长度变化时右侧未读红要怎样处理？
为元件内各个图层设不缩放属性，可以完美实现我们要效。如将红做成了子元件，可以切换是否显示红。
2. 文本内容跟随
Sketch 元件有个很神奇特性，我将其译作「内容跟随」。
如上图，文本被尺寸设为 Auto 时，根据齐不，其尺寸可变侧（左齐文右侧，右齐文左侧，不括居齐）组或图层会与文本保持固定距离，距离限制为20px，出这个距离内容将不会跟随。
内容跟随甚至支持多个图层连续跟随。利用这特性，可以做出固定距、固定分隔图形文导航栏。
3. 固定尺寸深入研究
固定尺寸固定究竟是什么？我们来做个实验：
将元件内文本和标打组，将组宽度固定，并不会影响文本长度自动变化，以及文本后内容跟随。
结论是：在 Sketch 中，「固定宽度/高度」只会确保组/图层的尺寸不会被「外部」缩放所改变，并不会限制其「内部」产生的尺寸变化，也不会响其内部文本在尺寸变化后的「内容跟随」。
四、关于Sketch 52 Beta…
在正写这篇文章的9月20日凌晨，Sketch 发布了52 Beta，更新了非常多的性：
全新计的软件界面，用户体验更好；文字、组件可以图形进行布尔运算；最令人激动的是，组件内的可变内容（文本、图层）支持直修改式；并且还可以将外部数据（文本、图片等）加载进 Sketch ，计内容进行关。
关 Sketch 52 的新功能，在正式版我写一篇文章门讲。现在，让我们先大概感受一下：
相等正式版发布后，体验更好的新界面和实用的新功能可以让的计效率进一步提升。
五、一点建议：尝试新的工作流程
在使用 PS、AI 做界面计的代，多计会先做第一个素，然后复制多，再修改复制的内容。这的流程习惯一直延续了 Sketch 代。
而种基复粘贴的传统方式，一旦设计图生改动，就需要浪费大量的时间去进行整。
现在，有了 Sketch 元件这个器，如果在一开始就将可会重复现、产生改的容做成元件，将为后续的设计工作节省大量的宝贵时间。
时会听到一些设师抱怨，作又多又烦，周末好不易休息一下，根本时间学新技能。但或许，不愿意主动学习新技能，作又多又烦的原因之一呢？
六、福利：送一个源文件
最后，分享一份我做的于演示 Sketch Symbol 功的源件，包含聊天 App 会话列表、会话详情两个页面的整组件示例，及一个固定间距的 N宫格组件示例。
源文件：https://pan.baidu.com/wap/init?surl=DQkcGY23kNPg_bAAvtLHbQ 密码：2dt8
欢迎关注作者微信公众号：「烧炖」
浙公网安备33011002017549号